WPF使用Grid布局
WPF布局
WPF布局基础
-
布局原则
- 一个窗口中只能包含一个元素
- 不应显示设置元素尺寸
- 不应使用坐标设置元素的位置
- 可以嵌套布局容器
-
布局容器
- StackPanel: 水平或垂直排列元素、Orientation属性分别: Horizontal / Vertical.
- WrapPanel : 水平或垂直排列元素、针对剩余空间不足会进行换行或换列进行排列.
- DockPanel : 根据容器的边界、元素进行Dock.Top、Left、Right、Bottom设置.
- Grid : 类似table表格、可灵活设置行列并放置控件元素、比较常用.
- Canvas : 使用固定的坐标设置元素的位置、不具备锚定停靠等功能.
- UniformGrid : 指定行和列的数量, 均分有限的容器空间.
布局容器详解
-
StackPanal
StackPanel主要用于垂直或水平排列元素、在容器的可用尺寸内放置有限个元素
超过界限无法看见
-
WrapPannel
WrapPanel默认排列方向与StackPanel相反、WrapPanel的Orientation默认为Horizontal。
当里面控件超过容器的时候会自动换行。
-
DockPanel
默认DockPanel中的元素具备DockPanel.Dock属性, 该属性为枚举具备: Top、Left、Right、Bottom.默认是Left
与Winform中的Panel类似。
DockPanel有一个LastChildFill属性, 该属性默认为true, 该属性作用为, 当容器中的最后一个元素时, 默认该元素填充DockPanel所有空间。
-
Grid
类似于表格划分空间
其中:2*表示是上一 行/列 的 Height/Width 的两倍;Auto表示自适应;
创建一个控件默认是0行0列,想要选择,则需自己定义行数和列数,比如Grid.Row="1" Grid.Column="2";
如果一个控件或者容器想要跨列,则使用Grid.Column属性;
现在以一个例子来进行布局,遵循布局原则:
分析:可以用Grid分割区域。1.直接全部分割2.逐步分割(优先)
首先2个Grid.Row,第2个Grid.Row里面分两列,然后再在第二列里面分三行五列,用GridRow.Span跨行,用GridCloumn.Span跨列。
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="#7671D8"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="190"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="Blue"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="#7671DB" Margin="5"/>
<Border Grid.Column="1" Background="Red" Margin="5"/>
<Border Grid.Column="2" Background="Pink" Margin="5"/>
<Border Grid.Column="3" Background="Blue" Margin="5"/>
<Border Grid.Column="4" Background="Green" Margin="5"/>
<Border Grid.Row="1" Grid.ColumnSpan="3" Background="SkyBlue" Margin="5"/>
<Border Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" Background="YellowGreen" Margin="5"/>
<Border Grid.Row="2" Grid.ColumnSpan="3" Background="Orange" Margin="5"/>
<Border Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2" Background="Purple" Margin="5"/>
</Grid>
</Grid>
</Grid>
最终结果如下:
![QQ截图20240816155938](https://img2023.cnblogs.com/blog/3267782/202408/3267782-20240816160002911-383579063.png)
- 注意:在Grid内部有一些字段或者显示的数据等,可以在里面再嵌入一个容器,比如:StackPanl、DockPanl。