WPF的布局面板

作者：孙英鹏     撰写时间：2019年5月13日

WPF用于布局的元素有5个（主要用到的），分别是Stack Panel(栈面板)、Wrap Panel（环绕面板）。Dock Panel（停靠面板）、Canvas（画布）、Grid（网格面板）。

StackPanel: 栈面板。
栈面板,就是将元素排列成一行或一列，每个元素都各占一行或一列。通过设置面板的Orientation属性设置了两中排列方法：
Vertica（垂直排列）（默认）、Horizontal(水平排列)
默认情况下，水平排列时，每一个面板都是一样高，垂直排列时，每个面板都是一样宽，如果超过了面板空间，会自动截断多出的内容。

注意：如果想调左右方向可以在StackPanel里加上FlowDirection属性设置为RightToLeft，方法只可以调Horizontal(水平排列)。

第一：垂直方向排列

使用XAML代码：

 
运行图：

第二：水平方向排列

使用XAML代码：

运行图：

WrapPanel：环绕面板。
环绕面板是从左往右按照行或列的顺序排列出来，当长度不够时会自动调整，进行换行。
当Orientation属性值为Horizontal,元素是从左向右排列的,从上到下换行。属性值为Vertical,元素是从上到下排列，左右换行。

第一：属性值为Horizontal。
使用XAML代码：

运行图：

第二：属性值为Vertical。
使用XAML代码：

运行图:

DockPanel:停靠面板。
停靠面板是定义一个区域，使用子元素描点排列。DockPanel是对每个元素进行排序，根据指定的边进行停靠，按顺序排列，DockPanel有4个排列方向的值，分别是：Top（顶部）、Left（左边） 、Right、（右边） Bottom（底部）。

第一：填充整个剩余空间
使用XATM代码：

运行图：

当默认情况下，后面添加的元素只能使用剩余空间，无论怎么停靠，DockPanel的最后的元素都会填满剩余空间，如果不希望空间填满，可以在DockPanel属性里加上LastChildFill，设置为False,并为最后一个子元素指定停靠位置。

第二：不充整个剩余空间

使用XATM代码：

运行图：

Canvas:画布面板。
画布用于控制每个元素的位置，使布局里最简单的一种，把元素放到指定位置，主要用来布置图画，用Canvas必须指定一个子元素位置，否作全部会出现左上角画布上，调整位置用Top（顶部）、Left（左边） 、Right、（右边） Bottom（底部）四个属性。Canvas允许子元素超出边界，不会裁剪子元素，如果想超出边界的内容显示外面，使用负坐标即可。

第一：子元素不超边界。

使用XAML代码：

运行图：

第二：子元素超出边界
使用XAML代码：

运行图（XAML界面）

如果将ClipToBounds属性设为true，在XAML界面会对子元素的超出部分进行裁剪。

Grid:网络面板。
网络面板是把子控件放在一个个实现定义好的小格子，整齐排列，比起其他的面板，它是最为复杂的。使用Grid首先要添加RowDefinitions和ColumnDefinitions属性，RowDefinitions是定义行，ColumnDefinitions是定义列，设置面板的行和列可以通过手动的方法去弄，也可以通过XAML页面设置。

使用XAML代码：

 <Window x:Class="WpfApplication.dome1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Icon="图片/Photos3 (104).jpg"
    Title="dome1" Height="300" Width="300" Loaded="Dome">
<Grid>
    <!--自定义行-->
    <Grid.RowDefinitions>
        <RowDefinition Height="10*"/>
        <RowDefinition Height="10*"/>
    </Grid.RowDefinitions>
    <!--定义两列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <!--占第一行 第一列 第一个-->
    <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1">
        <Grid.Background>
            <RadialGradientBrush>
                <!--定义径向渐变画刷-->
                <GradientStop Color="#0000" Offset="0.112"/>
                <GradientStop Color="Gold" Offset="0.381"/>
                <GradientStop Color="Purple" Offset="0.641"/>
                <GradientStop Color="Pink" Offset="0.92"/>
            </RadialGradientBrush>
        </Grid.Background>

    </Grid>
    <!--占第一行 第二列 第一个-->
    <Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="1">
        <Grid.Background>
            <RadialGradientBrush>
                <!--定义径向渐变画刷-->
                <GradientStop Color="#0000" Offset="0.112"/>
                <GradientStop Color="CornflowerBlue" Offset="0.381"/>
                <GradientStop Color="BurlyWood" Offset="0.641"/>
                <GradientStop Color="CadetBlue" Offset="0.92"/>
            </RadialGradientBrush>
        </Grid.Background>

    </Grid>
    <!--占第二行 第一列 第一个-->
    <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1">
        <Grid.Background>
            <RadialGradientBrush>
                <!--定义径向渐变画刷-->
                <GradientStop Color="#0000" Offset="0.112"/>
                <GradientStop Color="Orange" Offset="0.381"/>
                <GradientStop Color="BurlyWood" Offset="0.641"/>
                <GradientStop Color="Chocolate" Offset="0.92"/>
            </RadialGradientBrush>
        </Grid.Background>

    </Grid>
    <!--占第二行 第二列 第一个-->
    <Grid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="1">
        <Grid.Background>
            <RadialGradientBrush>
                <!--定义径向渐变画刷-->
                <GradientStop Color="#0000" Offset="0.112"/>
                <GradientStop Color="Red" Offset="0.381"/>
                <GradientStop Color="BurlyWood" Offset="0.641"/>
                <GradientStop Color="BlanchedAlmond" Offset="0.92"/>
            </RadialGradientBrush>
        </Grid.Background>
    </Grid>
</Grid>

运行图：

说明：把网格分为四个小格，用RowDefinitions和ColumnDefinitions定义行和列，接下来用径向渐变画刷涂抹四个空格，径向渐变画刷可以用属性里的画笔工具弄出来，也可以手动弄，为了区分颜色涂抹在哪一个空格，我们要写一行代码，用Grid.Row、Grid.Column和Grid.ColumnSpan，它们分别是第几行第几列占第几个空格。