WPF中的布局

布局原则

1、不显式设置元素大小。

2、不使用绝对定位。

元素应该根据容器的内容来进行排列。绝对定位在开发前期会带来一些便捷，但扩展性比较差。一旦显示器尺寸或分辨率发生改变，界面的显示效果可能会达不到预期的效果。

3、布局容器可以嵌套使用

常用布局容器

 WPF中的布局控件继承自System.Windows.Controls.Panel抽象类。

常用的布局容器如下：

Grid	网格容器。可以创建不可见的行和列，然后通过设置行、列来进行元素排列。这是最灵活也是最常用的容器之一。
StackPanel	堆栈式面板。 在水平或垂直的堆栈中放置元素。当移除一个元素后，后面的元素会自动向前移动以填充空缺
WrapPanel	自动换行面板
DockPanel	停靠式面板。这个面板可以设置控件停靠的方式，类似Winform中的Dock属性
Canvas	画布。Canvas使用绝对定位来控制元素的位置。动画时会经常用到这个容器

Grid

Grid容器是WPF中最常用的布局容器。创建一个WPF工程后，系统会自动添加Grid标签作为顶级容器。

Grid容器通过定义行和列来设置控件的位置

 1   <!--ShowGridLines属性可以开启行列显示-->2     <Grid ShowGridLines="True">3         <!--添加行列-->4         <Grid.RowDefinitions>5             <RowDefinition/>6             <RowDefinition/>7         </Grid.RowDefinitions>8         9         <Grid.ColumnDefinitions>
10             <ColumnDefinition/>
11             <ColumnDefinition/>
12         </Grid.ColumnDefinitions>
13 
14         <Label Content="Row=0,Column=0"/>
15         <Label Content="Row=1,Column=1"/>
16     </Grid>

说明：

如果没有指定行和列，元素会默认放置在Grid的0行0列。

在Grid容器中，行和列的尺寸支持三种模式：

1、指定尺寸

 1 <!--指定尺寸-->2         <Grid Grid.Column="1" ShowGridLines="True">3             <Grid.ColumnDefinitions>4                 <ColumnDefinition Width="120"/>5                 <ColumnDefinition/>6             </Grid.ColumnDefinitions>7 8             <Label Content="宽度120"/>9             <Label Content="宽度为Grid容器大小 - 120" Grid.Column="1"/>
10         </Grid>

这种模式可以指定行和列的高度或宽度。

说明：

1、WPF中默认宽高单位是像素(Pixel)，完整的写法应该是Width="120px"，但是这个px可以省略。

2、WPF还支持英寸(in)、厘米(cm)、点(pt)等单位，这里不做详细介绍。可参阅推荐阅读。

3、这种模式不建议使用，因为这种方式是使用设备无关单位准确的设置尺寸。

2、指定比例

 1 <Grid Grid.Column="2" ShowGridLines="True">3             <Grid.RowDefinitions>4                 <RowDefinition Height="*"/>5                 <RowDefinition Height="3*"/>6             </Grid.RowDefinitions>7 8             <!--不指定比例，会等比拆分行列-->9             <Grid.ColumnDefinitions>
10                 <ColumnDefinition/>
11                 <ColumnDefinition/>
12             </Grid.ColumnDefinitions>
13         </Grid>

可通过(*)来指定行列所占比例。未使用(*)指定比例的，按等比划分。

上面的示例代码中，定义了两行，两列。

第一行占Grid容器高度的1/4，第二行占Grid容器高度的3/4。

在定义列的时候，未指定比例，所以两列各占Grid容器宽度的1/2

3、自动设置

自动设置就是在指定宽高时使用Auto，使用了Auto的行列宽高是根据内部所放置元素来决定。

1 　　　　<Grid ShowGridLines="True">
2             <Grid.RowDefinitions>
3                 <RowDefinition/>
4                 <RowDefinition/>
5                 <RowDefinition Height="Auto"/>
6             </Grid.RowDefinitions>
7 
8             <Label Content="高度 50" Grid.Row="2"/>
9         </Grid>

上面的示例代码中，在Grid中定义了三行。

第三行的高度使用了Auto。

如果不在第三行放置任何元素，第一行和第二行会各占Grid元素的1/2，即 Grid.Height /2

当在第三行放置一个高度为50的元素后，第三行有了50的高度。

这个时候，前面两行的高度就会发生变化，变成 (Grid.Height - 50 ) / 2

  

说明：

1、指定为Auto时，可以通过MinHeight来指定最小高度，MinHeight来指定最小宽度。

2、在布局时，通常会混合使用以上各种模式。

3、可以使用 Grid.UseLayoutRounding="True"来启用抗锯齿功能。启用后，会将容器内所有内容对齐到最近的像素边界。

跨越行和列

在定义行和列以后，有时候会需要跨越行来列来进行布局。这个时候可以使用Grid.RowSpan和Grid.ColumnSpan这两个附加属性来进行设置。

 1 <Grid>2                 <Grid.RowDefinitions>3                     <RowDefinition/>4                     <RowDefinition/>5                 </Grid.RowDefinitions>6 7                 <Grid.ColumnDefinitions>8                     <ColumnDefinition/>9                     <ColumnDefinition/>
10                 </Grid.ColumnDefinitions>
11 
12                 <Label Name="label1" Content="不跨越列" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center"/>
13                 <Label Name="label2" Content="跨越两列" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center"/>
14 
15                 <Label Name="label3" Content="不跨越行" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/>
16                 <Label Name="label4" Content="跨越两行" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center"/>
17             </Grid>

说明：

Grid布局技巧：

1、根据需要动态变化的内容，设置行列宽高来进行布局。

2、针对长度或宽度不固定的区域，可以设置宽度为Auto

3、WPF提供了一个GridSplitter类，可以动态的调整Grid的行高和列宽

 1  <Grid>2                 <Grid.RowDefinitions>3                     <RowDefinition/>4                     <RowDefinition Height="auto"/>5                     <RowDefinition/>6                 </Grid.RowDefinitions>7 8                 <Grid.ColumnDefinitions>9                     <ColumnDefinition/>
10                     <ColumnDefinition Width="auto"/>
11                     <ColumnDefinition/>
12                 </Grid.ColumnDefinitions>
13                 
14                 <Grid Grid.Row="0" Grid.Column="0" Background="Green"></Grid>
15                 <Grid Grid.Row="0" Grid.Column="2" Background="Silver"></Grid>
16                 <Grid Grid.Row="2" Grid.Column="0" Background="Pink"></Grid>
17                 <Grid Grid.Row="2" Grid.Column="2" Background="LightSkyBlue"></Grid>
18 
19                 <GridSplitter HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Height="2"></GridSplitter>
20                 <GridSplitter VerticalAlignment="Stretch" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Width="2"></GridSplitter>
21             </Grid>

StackPanel

StackPanel容器的使用比较简单，它可以在单行或单列中以堆栈形式放置元素。

使用方法如下：

1 <!--垂直堆放元素(默认)-->
2         <StackPanel Grid.Column="0">
3             <Button Content="Button1" Margin="10"/>
4             <Button Content="Button2" HorizontalAlignment="Left"/>
5             <Button Content="Button3" HorizontalAlignment="Right"/>
6         </StackPanel>

1        <!--水平堆放元素 -->
2         <!--需要指定属性  Orientation="Horizontal"-->
3         <StackPanel Grid.Column="1" Orientation="Horizontal">
4             <Button Content="Button1" Margin="10"/>
5             <Button Content="Button2" VerticalAlignment="Top"/>
6             <Button Content="Button3" VerticalAlignment="Bottom"/>
7         </StackPanel>

通过FlowDirection属性可以指定元素的浮动方向

 1             <!--FlowDirection可以指定元素的浮动方向-->2             <!--LeftToRight是默认值，表示元素从左向右浮动-->3             <StackPanel FlowDirection="LeftToRight">4                 <Button Content="Button1" Width="120" Height="28" HorizontalAlignment="Left"/>5             </StackPanel>6 7             <!--RightToLeft表示元素从右向左浮动-->8             <StackPanel FlowDirection="RightToLeft" Grid.Row="1">9                 <Button Content="Button1" Width="120" Height="28" HorizontalAlignment="Left"/>
10             </StackPanel>

WrapPanel

WrapPanel和StackPanel差不多，它采用了流式 布局，控件也是一次一行或一列的方式布置。但它与StackPanel又有区别，WrapPanel的 控件从左向右或从上往下进行排列，排列满了以后再在下一行或下一列排列。

WrapPanel可用于工具栏类似的场景，因为控件可以依次排列下去。

 1 <!--默认水平排列-->2         <WrapPanel Grid.Row="0" Grid.Column="0">3             <Button Content="abc"/>4             <Button Content="abc"/>5             <Button Content="abc"/>6             <Button Content="abc"/>7             <Button Content="abc"/>8             <Button Content="abc"/>9             <!--当水平方向排列不下时，自动排列到下一行-->
10             <Button Content="abc"/>        
11         </WrapPanel>

1  <!--设置为垂直排列-->
2         <WrapPanel Grid.Row="0" Grid.Column="1" Orientation="Vertical">
3             <Button Content="abc"/>
4             <Button Content="abc"/>
5             <Button Content="abc"/>
6             <!--当垂直方向排列不下时，自动排列到下一列-->
7             <Button Content="abc"/>
8         </WrapPanel>

DockPanel

DockPanel是一种停靠式布局容器。通过附加属性DockPanel.Dock设置元素的停靠方向。

当元素被指定为停靠在顶部时，元素会占据布局容器的整个宽度，高度会根据内容和MinHeight属性而定。当元素被停靠在左边时，元素会占据整个布局容器的高度，而宽度会根据内容和MinWidth属性而定。

1 <DockPanel Grid.Row="0"  Margin="10">
2             <Button Content="左停靠" DockPanel.Dock="Left" MinWidth="80"/>
3             <Button Content="右停靠" DockPanel.Dock="Right"/>
4             <Button Content="上停靠" DockPanel.Dock="Top"/>
5             <Button Content="下停靠" DockPanel.Dock="Bottom"/>
6 </DockPanel>

默认情况下DockPanel.LastChildFill属性值为true，该属性会设置最后一个元素否占满整个布局容器。如果设置LastChildFill为false，可以看到

使用DockPanel容器进行布局时，元素的先后顺序影响会很大。在上面的示例中，最先放置向左停靠的元素，所以【上停靠】这个按钮会占据整个面板的高度，其它的元素会放置在它的右边。

如果最先放置向上停靠的元素，那这个向上停靠的元素会占据整个面板的宽度，其它的元素会放置在它的下面

1 <!--可以看到元素的先后顺序对布局会产生很大的影响-->
2         <DockPanel Grid.Row="2" Margin="10">
3             <Button Content="左停靠" DockPanel.Dock="Top" MinWidth="80"/>
4             <Button Content="右停靠" DockPanel.Dock="Right"/>
5             <Button Content="上停靠" DockPanel.Dock="Left"/>
6             <Button Content="下停靠" DockPanel.Dock="Bottom"/>
7         </DockPanel>

重复上面的过程，可以更清楚的看到元素的先后对布局的影响以及DockPanel元素排列的规则

 1  <DockPanel Grid.Row="3" Margin="10">2             <Button Content="左停靠" DockPanel.Dock="Left" MinWidth="80"/>3             <Button Content="右停靠" DockPanel.Dock="Right"/>4             <Button Content="上停靠" DockPanel.Dock="Top"/>5             <Button Content="下停靠" DockPanel.Dock="Bottom"/>6             <Button Content="上停靠" DockPanel.Dock="Top" MinWidth="80"/>7             <Button Content="右停靠" DockPanel.Dock="Right"/>8             <Button Content="左停靠" DockPanel.Dock="Left"/>9             <Button Content="下停靠" DockPanel.Dock="Bottom"/>
10 </DockPanel>

Canvas

Canvas面板，画布面板，它可以通过使用精确的坐标来放置元素。大多数情况下，我们不需要绝对定位来放置元素，因为显示器的大小和分辨率有可能会改变。但是如果需要设计绘图相关的界面，或需要对元素进行动画时，就要用到Canvas面板。

Canvas面板是最轻量级的布局容器，因为它不包含任何复杂的布局逻辑。

通过Canvas.Left附加属性，设置元素左边和Canvas面板左边的单位数。不指定单位时，默认是px。通过Canvas.Top附加属性，设置元素上边和Canvas面板上边的单位数。

也可以设置Canvas.Bottom和Canvas.Right附加属性来指定距离面板底部和右边的单位数（设置无关单位，当将系统DPI指定为96dpi时，设置无关单位恰好等于通常使用的像素）。

说明：

1、不能同时指定Canvas.Left和Canvas.Right，只能选择一种指定。

2、不能同时指定Canvas.Top和Canvas.Bottom，只能选择一种指定。

在Canvas面板中，需要指定元素的大小，即指定Width和Height属性的值 。如果未指定元素宽高，元素的大小就是刚好能展示其全部内容的大小

 1    <Canvas>2         <!--基本使用-->3         <!--未指定宽高-->4         <Button Content="Canvas" Canvas.Left="100" Canvas.Top="200"/>5         <Button Content="Canvas" Canvas.Left="200px" Canvas.Top="200px"/>6         <Button Content="Canvas" Canvas.Left="2in" Canvas.Top="2.5in"/>7         <Button Content="Canvas" Canvas.Right="100" Canvas.Bottom="200"/>8         9         <!--指定宽高 -->
10         <Button Content="Canvas" Canvas.Left="50" Canvas.Top="100" Width="150" Height="28"/>
11     </Canvas>

说明：

当Canvas面板的大小改变时，面板内放置的元素大小不会改变。

元素叠放的顺序Z-Order

如果Canvas面板中有重叠的元素，可以通过设置Canvas.ZIndex附加属性来控制层叠方式。

默认每个元素会有默认的ZIndex值0，具有更高ZIndex值的元素会始终显示在较低ZIndex值元素的上面。ZIndex值可以为负数 

1   <!--指定叠放顺序-->
2         <Button Content="ZIndex=0" Canvas.Left="300" Canvas.Top="190"/>
3         <Button Content="ZIndex=1" Canvas.Left="310" Canvas.Top="200"/>
4         <Button Content="ZIndex=2" Canvas.Left="290" Canvas.Top="200"/>
5 
6         <!--ZIndex值都为0的情况下，后放置的元素会显示在上面-->
7         <Button Content="ZIndex=0-1" Canvas.Left="380" Canvas.Top="190"/>
8         <Button Content="ZIndex=0-2" Canvas.Left="380" Canvas.Top="190"/>

推荐阅读

宽高支持的单位

FrameworkElement.Width Property (System.Windows) | Microsoft Learn

WPF控件库示例

https://github.com/Microsoft/WPF-Samples/tree/master/Getting%20Started/ControlsAndLayout

本文示例代码：

https://github.com/zhaotianff/DotNetCoreWPF/tree/master/五、WPF中的布局容器