关于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>Lable</Label>

        <TextBox>TextBox</TextBox>

        <CheckBox>CheckBox</CheckBox>

        <CheckBox>CheckBox</CheckBox>

        <ListBox>

            <ListBoxItem Content="ListBoxItem One"/>

            <ListBoxItem Content="ListBoxItem Two"/>

        </ListBox>

        <Button>Button</Button>

    </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>

如图所示：