Wpf中几大布局容器的一个总结

2020/11/17

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、分别介绍几大容器

1.DockPanel(泊靠式面板)

1.在DockPanel中，指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。每个子元素都有一个DockPanel.dock属性，可以设置子元素在面板中的位置。
2. 默认情况下，后添加的元素只能使用剩余空间，无论对DockPanel的最后一个子元素设置任何停靠值，该子元素都将始终填满剩余的空间。如果不希望最后一个元素填充剩余区域，可以将DockPanel属性LastChildFill设置为false，还必须为最后一个子元素显式指定停靠方向

代码如下（示例）：

<Window x:Class="StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel LastChildFill="False">
        <Button Content="buttonleft" DockPanel.Dock="Left"></Button>
        <Button Content="buttonTop" DockPanel.Dock="Top"/>
        <Button Content="buttonRight" DockPanel.Dock="Right"></Button>
        <Button Content="buttonButtom" DockPanel.Dock="Bottom"></Button>
        <Button Content="最后一个不填充满剩余空间" ></Button>
    </DockPanel>
</Window>

2.WrapPanel(环绕面板)

1.WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从右至左的顺序进行。
2.Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为Vertical：元素是从上向下排列的，然后从左至右自动换行。

代码如下（示例）：

<Window x:Class="StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackPanel"
        mc:Ignorable="d"
        Title="WrapPanel面板" Height="350" Width="525">
    <WrapPanel Orientation="Vertical">
        <Button Content="buttonleft" ></Button>
        <Button Content="buttonTop" />
        <Button Content="buttonRight" ></Button>
        <Button Content="buttonButtom" ></Button>
        <Button Content="buttonLast" ></Button>
    </WrapPanel>
</Window>

3.Canvas(画布)

1.Canvas为容器控件，用于定位,可以把Canvas比作一个坐标系,所有的元素通过设置坐标来决定其在坐标系中的位置.这个坐标系的原点并不是在中央,而是位于它的左上角

代码如下（示例）：

<Window x:Class="StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackPanel"
        mc:Ignorable="d"
        Title="Canvas面板" Height="350" Width="525">
    <Canvas>
        <Button Canvas.Left="100" Content="buttonleft" ></Button>
        <Button Canvas.Top="20" Content="buttonTop" />
        <Button Canvas.Right="20" Content="buttonRight" ></Button>
        <Button Canvas.Bottom="20" Content="buttonButtom" ></Button>
        <Button Canvas.Top="30" Canvas.Left="50" Content="buttonLast" ></Button>
    </Canvas>
</Window>

其实这里我们可以由上面得出，我们可以知道一个安放在面板中元素的位置比如buttonleft按钮坐标为(100,0)

4.StackPanel(栈式面板)

1.可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。其特点是：每个元素各占一行或者一列
代码如下（示例）：

<Window x:Class="StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackPanel"
        mc:Ignorable="d"
        Title="StackPanel面板" Height="350" Width="525">
    <StackPanel >
        <Button Canvas.Left="100" Content="buttonleft" ></Button>
        <Button Canvas.Top="20" Content="buttonTop" />
        <Button Canvas.Right="20" Content="buttonRight" ></Button>
        <Button Canvas.Bottom="20" Content="buttonButtom" ></Button>
        <Button Canvas.Top="30" Canvas.Left="50" Content="buttonLast" ></Button>
    </StackPanel>
</Window>

上面的描述已经非常准确了，你还可以通过Margin去设置他每个元素之间的间隔，还可以将Orientation="Horizontal"这样的可以使按钮进行一个垂直布局，但是删除其中的一个元素，后面的还是会依次补上去.

4.Grid(网格面板)

1.Grid顾名思义就是“网格”，它的子控件被放在一个一个实现定义好的小格子里面，整齐配列。Grid和其他各个Panel比较起来，功能最多也最为复杂。同时此面板可承载任意元素，包括控件，图形，甚至文字。各种元素依据屏幕坐标确定位置.
那么我们就利用Grid布局做一个登陆页面.

代码如下（示例）：

<Window x:Class="StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackPanel"
        mc:Ignorable="d"
        Title="Grid面板" Height="150" Width="200">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Content="用户名:"></Label>
        <TextBox Grid.Row="0" Grid.Column="1" Margin="5"></TextBox>
        <Label Content="密码:" Grid.Row="1" Grid.Column="0"></Label>
        <TextBox Grid.Row="1" Grid.Column="1" Margin="5"></TextBox>
        <Label Content="确认密码:" Grid.Row="2"></Label>
        <TextBox Grid.Row="2" Grid.Column="1" Margin="5"></TextBox>
        <Button Grid.Row="3" Grid.Column="1" Margin="20,3" Content="登录"></Button>
    </Grid>
</Window>

通过以上实例我们可以看出，通过Grid网格布局面板我们可以很准确的布局一个登陆窗体.同时也可以看出Grid网格布局的一个强大。

二、几种布局之间的总结，其中的特点与应用场景

WPF中的UI布局主要有：Grid(网格)、StackPanel(栈式面板)、Canvas(画布)、DockPanel(泊靠式面板)、WrapPanel(自动折行面板)

一、Grid
　　1、描述：网格，自定义行和列，并通过行列的数量、行高列宽来调整控件的布局，近似于HTML中的table。
　　2、特点：
　　　　（1）可以定义任意数量的行和列，非常灵活
　　　　（2）行的高度和列的宽度可以使用绝对值、相对比例、自动调整的方式进行精确设定，并可以设置最大和最小值。
　　　　（3）内部元素可以设置自己所在的行和列，还可以设置自己纵向跨几行，横向跨几列。
　　　　（4）可以设置Children元素的对齐方向。
　　3、应用场合：
　　　　（1）UI布局的大框架设计
　　　　（2）大量UI元素需要成行或者成列对齐的情况。
　　　　（3）UI尺寸改变的时候，元素需要保留固有的宽度和高度比例
　　　　（4）UI后期可能有较大的变更或扩展。
二、StackPane
　　1、描述：栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。
　　2、使用场合：
　　　　（1）同类元素需要紧凑排列（如制作菜单和列表）
　　　　（2）移除其中的元素后能够自动补缺的布局或者动画。
三、Canvas
　　1、描述：画布，内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form的布局方式。
　　2、使用场合：
　　　　（1）一经设计，基本上不用再有改动的小型布局（如图标）
　　　　（2）艺术性较强的布局
　　　　（3）需要使用大量纵横坐标来进行绝对定位的布局。
　　　　（4）依赖纵横坐标的动画
四、DockPanel
　　1、描述：泊靠式面板，内部元素可以选择泊靠的方向，类似于Winform中设置控件的Dock属性。
五：WrapPanel
　　1、描述：自动折行面板，内部元素在排满一行后能够自动折行，类似于HTML中的流式布局。

---

总结

以上是对上周的不足进行一个总结