关于WPF布局

为了定义应用程序的布局，可以使用派生自Panel基类的类。布局容器要完成两个主要任务：测量和排列。在测量时，容器要求其子控件有合适的大小。因为控件的整体大小不一定合适，所以容器需要确定和排列其子控件的大小和位置。

 

StackPanel栈式面板

Window可以只包含一个元素，作为其内容。如果要在其中包含多个元素，就可以将StackPanel用作Window的一个子元素，并在StackPanel的内容中添加元素。StackPanel是一个简单的容器控件，只能逐个地显示元素。StackPanel的方向可以是水平或垂直。当移除一个元素后，后面的元素会自动向前填充空缺。ToolBarPanel类派生自StackPanel。

特点：每个元素各占一行或一列

适用场合：

    同类元素需要紧凑排列（如制作菜单和列表）。

移除其中的元素后能够自动补缺的布局或动画

<Window x:Class="MeDemo.Window2"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="窗口2" Height="500" Width="700">

    <StackPanel Orientation="Vertical">

        <Label>LableLabel>

        <TextBox>TextBoxTextBox>

        <CheckBox>CheckBoxCheckBox>

        <CheckBox>CheckBoxCheckBox>

        <ListBox>

            <ListBoxItem Content="ListBoxItem One"/>

            <ListBoxItem Content="ListBoxItem Two"/>

        ListBox>

        <Button>ButtonButton>

    StackPanel>

Window>

如图所示：可以看到StackPanel垂直显示的子控件

WrapPanel：自动折行面板

WrapPanel将子元素自左向右逐个排列，若一个水平行中放不下，就排在下一行。面板的方向可以是水平或垂直，类似于Html中的流式布局

Window x:Class="MeDemo.Window2"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="窗口2" Height="300" Width="300">

    <WrapPanel>

        <Button Width="100" Margin="5" Content="Button"/>

        <Button Width="100" Margin="5" Content="Button"/>

        <Button Width="100" Margin="5" Content="Button"/>

        <Button Width="100" Margin="5" Content="Button"/>

        <Button Width="100" Margin="5" Content="Button"/>

    WrapPanel>

Window>

如图所示：

Canvas：画布

Canvas是一个允许显式指定控件位置的面板。它定义了相关的Left、Right、Top和Bottom属性，这些属性可以由子元素在面板中定位时使用，内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form的布局方式。

Window x:Class="MeDemo.Window2"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="窗口2" Height="300" Width="300">

    <Canvas Background="White">

        <Label Canvas.Top="30" Canvas.Left="20" Content="Enter here:"/>

        <TextBox Canvas.Top="30" Canvas.Left="120" Width="100"/>

        <Button Canvas.Top="70" Canvas.Left="130" Content="Click Me!" Padding="5"/>

    Canvas>

Window>

如图所示：显示了Canvas面板的结果，其中定位了子元素Lable、TextBox和Button

注意：Canvas内的子控件不能使用两个以上的Canvas附加属性，如果同时设  置Canvas.Left和Canvas.Right

DockPanel:泊靠式面板

DockPanel非常类似于Windows窗体的停靠功能。DockPanel可以指定排列子控件的区域。DockPanel定义了相关的Dock属性，可以在控件的子控件中将它设置为Left、Right、Top和Bottom。

适用场合：填充整个剩余空间

<Window x:Class="MeDemo.Window2"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="窗口2" Height="300" Width="300">

    <DockPanel>

        <Border Height="25" Background="AliceBlue" DockPanel.Dock="Top">

            <TextBlock Text="Menu"/>

        Border>

        <Border Height="30" Background="LightSteelBlue" DockPanel.Dock="Bottom">

            <TextBlock Text="Status"/>

        Border>

        <Border Height="80" Background="Azure" DockPanel.Dock="Left">

            <TextBlock Text="Left Side"/>

        Border>

        <Border Background="White">

            <TextBlock Text="Remaining Part"/>

        Border>

    DockPanel>

Window>

如图所示：

Grid：网格

使用Grid，可以在行和列中排列控件。对于每一列，可以指定一个ColumnDefinition；对于每一行，可以指定一个RowDefinition。下面的示例显示两列和三行。在每一行和每一列中，都可以指定宽度和高度。ColumnDefinition有一个Width依赖属性，RowDefinition有一个Height依赖属性。可以以像素、厘米、英寸或点为单位定义高度和宽度，或者把他们设置为Auto，根据内容来确定其大小。Grid还允许根据具体情况指定大小，即根据可用的空间以及与其它行和列的相对位置，计算行和列的的相对，近似Heml中的table。

特点：(1)可以定义任何数量的行和列，非常灵活。

1. 行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定，并可以设置最大和最小值。
2. 内部元素可以设置自己所在的行和列，还可以设置自己纵向跨几行，横向跨几列。
3. 可以设置Children元素的对齐方向。

使用场合：

1. UI布局的大框架设计
2. 大量UI元素需要成行或成列对齐的情况
3. UI尺寸改变的时候，元素需要保留固有的宽度和高度比例

下面的Grid布局包含了几个Label和TextBox控件，因为这些控件的父控件是Grid，所以可以设置相关的Column、ColumnSpan、Row和RowSpan属性。

Window x:Class="MeDemo.Window2"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="窗口2" Height="500" Width="700">

    <Grid ShowGridLines="True">

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition/>

        Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition/>

<RowDefinition/>

        Grid.RowDefinitions>

<Label Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" Content="Firstname:" Margin="10"/>

        <TextBox Grid.Column="1" Grid.Row="1" Width="100" Height="30" />

<Label Grid.Column="0" Grid.Row="2" VerticalAlignment="Center"  Content="LastName:" Margin="10"/>

        <TextBox Grid.Column="1" Grid.Row="2" Width="100" Height="30" />

    Grid>

如图所示：