一、WPF排版
WPF中的基本控制面板类控件都是从 Panel 类中派生出来的， Panel 本身是 UIElement。Panel(Abstract)排成出来的排版控件：
- StackPanel
- WrapPanel
- UniformGrid
- DockPanel
- Grid
- Canvas
二、堆积面板 (StackPanel)
StackPanel 将其中的 UI 按横向或纵向堆积排列。
StackPanel
例子：
<StackPanel>
<TextBox Text="StackPanel"/>
<TextBox Text="StackPanel"/>
</StackPanel>
效果
三、换行面板 (WrapPanel)
WrapPanel 可根据其中 UI 的尺寸和其自身的大小自动把其中的 UI 排列到下一行或下一列，相当于自动换行。
WrapPanel
例子：
<WrapPanel>
<Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/>
<Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/>
<Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/>
<Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/>
<Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/>
<Rectangle Margin="2" Width="200" Height="50" Fill="LightGreen"/>
</WrapPanel>
效果
四、停靠面板 (DockPanel)
DockPanel 可以设定 UI 边缘的停靠位置。
DockPanel
例子：
<DockPanel>
<Rectangle DockPanel.Dock="Bottom" Width="200" Height="50" Fill="LightGray"/>
<Rectangle DockPanel.Dock="Top" Width="200" Height="50" Fill="LightCoral"/>
<Rectangle DockPanel.Dock="Right" Width="200" Height="50" Fill="LightBlue"/>
<Rectangle DockPanel.Dock="Left" Width="200" Height="50" Fill="LightGreen"/>
<Rectangle Width="50" Height="50" Fill="LightPink"/>
</DockPanel>
效果
五、表格式面板 (Grid)
5.1 Grid 将 UI 按表格式进行排列，需要自定义排列规则。
例子：
<Grid>
<Grid.RowDefinitions> //RowDefinitions 设置行
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions> //ColumnDefinitions 设置列
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="White" /> //Row 的值表示行坐标
<Rectangle Grid.Row="1" Grid.Column="0" Fill="Black" /> //Column 的值表示列坐标
<Rectangle Grid.Row="2" Grid.Column="0" Fill="Blue" />
<Rectangle Grid.Row="0" Grid.Column="1" Fill="Red" />
<Rectangle Grid.Row="0" Grid.Column="2" Fill="Yellow"/>
<Rectangle Grid.Row="1" Grid.Column="1" Fill="Green" />
<Rectangle Grid.Row="1" Grid.Column="2" Fill="Orange"/>
<Rectangle Grid.Row="2" Grid.Column="1" Fill="Pink" />
<Rectangle Grid.Row="2" Grid.Column="2" Fill="violet"/>
</Grid>
效果
Grid 类中含有 行容器 (RowDefinitions) 和 列容器 (ColumnDefinitions)。RowDefinitions 设置行，Row 的值表示行坐标，ColumnDefinitions 设置列，Column 的值表示列坐标。
5.2 设定 Grid 行或列的尺寸
RowDefinition 类和 ColumnDefinition 类中相应的属性的类型是System.Window.GridLength 。Grid 调整 Grid 行列尺寸的方法有如下三种：
-
绝对尺寸，把 Grid 行列大小尺寸设为一个数值，Grid 的行列尺寸就 不会 随着其中 UI 的大小进行自动调整。
-
自动尺寸，把 Grid 的 Height 和 Width 设为 Auto 。Grid 中的 UI 会自动调整 其行列的高度或宽度。
-
按比例分割行列尺寸，把有限的平面大小 按照一定的比例 划分宽高比，其比例的数值可以是浮点数。
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/> //绝对尺寸
<RowDefinition Height="1*"/> //按比例尺寸
<RowDefinition Height="Auto" MinHeight="20"/> //自动尺寸,如果控件中无内容，就会被压缩成0，所以这里设置一个最少值
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="LightBlue"/>
<Rectangle Grid.Row="1" Fill="LightGreen"/>
<Rectangle Grid.Row="2" Fill="LightCoral"/>
</Grid>
效果
5.3 元素跨行设置 (RowSpan/ColumnSpan)
- RowSpan（跨行设置）
- ColumnSpan（ 跨列设置）
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Fill="White" /> //跨两行
<Rectangle Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Fill="Red" /> //跨两列
<Rectangle Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Yellow" /> //跨两行和两列
</Grid>
效果
5.4 设置多行或多列保持大小一致性 (SharedSizedGroup)
<Grid Grid.IsSharedSizeScope="True"> //首先在 Grid 层面设置了一个 IsSharedSizeScope 属性为 True
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" SharedSizeGroup="g1"/> //将需要保持大小一致的元素设置尺寸分组
<ColumnDefinition Width="100" SharedSizeGroup="g2"/>
<ColumnDefinition Width="50" SharedSizeGroup="g1"/>
<ColumnDefinition Width="100" SharedSizeGroup="g2"/>
</Grid.ColumnDefinitions>
<Rectangle MinWidth="20" Height="100" Fill="White"/>
<Rectangle MinWidth="20" Height="100" Grid.Column="1" Fill="Red"/>
<GridSplitter Grid.Column="1" Width="5"/>
<Rectangle MinWidth="20" Height="100" Grid.Column="2" Fill="Yellow"/>
<Rectangle MinWidth="20" Height="100" Grid.Column="3" Fill="Green"/>
</Grid>
效果
六、统一面板 (UniformGrid)
UniformGrid 将其内部所有元素按当前面板大小进行统一尺寸，自动排列。
<UniformGrid>
<TextBox Margin="5" Text="1"/>
<TextBox Margin="5" Text="2"/>
<TextBox Margin="5" Text="3"/>
<TextBox Margin="5" Text="4"/>
<TextBox Margin="5" Text="5"/>
<TextBox Margin="5" Text="6"/>
<TextBox Margin="5" Text="7"/>
<TextBox Margin="5" Text="8"/>
<TextBox Margin="5" Text="9"/>
</UniformGrid>
效果
七、画布面板 (Canvas)
Canvas 可对其内部元素设定边界值，其作用类似于（Margin），默认为停靠左上角。
<Canvas>
<TextBox Text="左上角" Width="100" Height="100" Canvas.Top="0" Canvas.Left="0"/>
<TextBox Text="右上角" Width="100" Height="100" Canvas.Top="0" Canvas.Right="0"/>
<TextBox Text="右下角" Width="100" Height="100" Canvas.Bottom="0" Canvas.Right="0"/>
<TextBox Text="左下角" Width="100" Height="100" Canvas.Bottom="0" Canvas.Left="0"/>
</Canvas>
效果
八、关于窗口大小调整
有时候需要把视窗的大小根据其中的内容来自动调整，方法是设置视窗的 SizeToContent 属性 SizeToContent 是枚举类型。WPF提供 ScrollBar 和 ScrollViewer 来实现屏幕滚动。
ScrollViewer 有两个控制滚动条显示方式的相关属性：
- HorizontalScrollBarVisibility (控制水平滚动条)
- VerticalScrollBarVisibility (控制竖直滚动条)
ScrollViewer 提供8个控制滚动范围的方法（这些方法可以在程序中模拟人工操作滚动条）：
LineUp、LineDown、LineLeft、LineRight、PageUp、PageDown、PageLeft、PageRight
网友评论