【学习笔记】WPF快速入门：布局

布局（Panel族）

WPF布局使用的是Panel族布局控件，它们均派生自Panel抽象类，主要用于控制UI布局。

WPF布局容器

WPF常用的布局容器及使用方法如下：
Grid

网格，类似table表格，可灵活设置行列并放置控件元素，比较常用
Grid的使用思路

1. - 声明Grid容器
2.         <Grid></Grid>
3. - 定义行列属性
4.     <Grid.ColumnDefinitions>       
5.             <ColumnDefinition>
6.         </Grid.ColumnDefinitions>
7.     <Grid.RowDefinitions>               
8.             <RowDefinition>
9.     </Grid.RowDefinitions>
10. - 使用网格单元
11.         <ControlName Grid.Column="0" Grid.Row="0"/>

复制代码

四种行列高宽设置

• Auto：根据网格单元内容自动设置大小
  
• 数值：直接设置网格单元大小
  
• 数值*：剩余部分按比例分配大小
  
• 默认值：默认为1*
  

Gird布局练习

1. <Grid>
2.    
3.     <Grid.ColumnDefinitions>
4.         
5.         <ColumnDefinition Width="Auto"/>
6.         <ColumnDefinition Width="200"/>
7.         <ColumnDefinition/>
8.         <ColumnDefinition Width="1*"/>
9.         <ColumnDefinition Width="2*"/>
10.     </Grid.ColumnDefinitions>
11.     <Grid.RowDefinitions>
12.         <RowDefinition Height="Auto"/>
13.         <RowDefinition Height="100"/>
14.         <RowDefinition/>
15.         <RowDefinition Height="1*"/>
16.         <RowDefinition Height="2*"/>
17.     </Grid.RowDefinitions>
18.    
19.     <Button Grid.Column="0" Grid.Row="0" Content="我是Button" Width="100" Height="100"/>
20.     <Border Grid.Column="1" Grid.Row="1" Background="Red"/>
21.     <Border Grid.Column="2" Grid.Row="2" Background="Yellow"/>
22.     <Border Grid.Column="3" Grid.Row="3" Grid.ColumnSpan="6" Grid.RowSpan="2" Background="Green"/>
23. </Grid>

复制代码

备注：WPF的分辨率无关性
​                WPF程序中的单位是与设备无关的单位，每个单位是1/96英寸，如果电脑的DPI设置为96（每个英寸96个像素），那么此时每个WPF单位对应一个像素，不过如果电脑的DPI设备为120（每个英寸120个像素），那此时每个WPF单位对应应该是120/96=1.25个像素，也就是说WPF中的控件在不同分辨率的情况下会自动调整，使用不同的像素点渲染，以适应屏幕显示。
StackPanel

栈式面板，水平或垂直排列元素，移除一个元素后，后面的元素自动向前填补空缺，Orientation属性: Horizontal / Vertical
StackPanel的使用思路

1. - 确定是否需要堆栈式布局，确定布局采用横排还是竖排
2. - 声明StackPanel容器
3. - 设置StackPanel属性，Orientation横排还是竖排，HorizontalAlignment、VerticalAlignment对齐方式
4. - 填充StackPanel容器内容

复制代码

StackPanel布局练习

1. <GroupBox Header="请选择正确的成语" BorderBrush="Black" Margin="5">
2.     <StackPanel Orientation="Vertical" Margin="10" VerticalAlignment="Center">
3.         <CheckBox Content="A.迫不及待"/>
4.         <CheckBox Content="B.首屈一指"/>
5.         <CheckBox Content="C.陈词滥调"/>
6.         <CheckBox Content="D.唉声叹气"/>
7.         <CheckBox Content="E.不可理喻"/>
8.         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
9.             <Button Content="清空" Width="60" Margin="5"/>
10.             <Button Content="确定" Width="60" Margin="5"/>
11.         </StackPanel>
12.     </StackPanel>
13. </GroupBox>

复制代码

WrapPanel

自动折行面板，水平或垂直排列元素、如果剩余空间不足，排不下的控件会自动换行或换列进行排列，新起一行或一列继续排列
WrapPanel的使用思路

1. - 确定是否需要流式布局，确定布局采用横排还是竖排
2. - 声明WrapPanel容器
3. - 设置WrapPanel属性，Orientation横排还是竖排，HorizontalAlignment、VerticalAlignment对齐方式
4. - 填充WrapPanel容器内容

复制代码

WrapPanel布局练习

1. <WrapPanel Width="400" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
2.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
3.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
4.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
5.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
6.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
7.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
8.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
9.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
10. </WrapPanel>

复制代码

DockPanel

泊靠式面板， 根据容器的边界、元素进行Dock.Top、Left、Right、Bottom锚定设置
DockPanel的使用思路

1. - 确定是否需要流式布局，确定布局采用横排还是竖排
2. - 声明DockPanel容器
3. - 设置DockPanel属性，HorizontalAlignment、VerticalAlignment对齐方式
4. - 填充DockPanel容器内容

复制代码

DockPanel布局练习

1. <WrapPanel Width="400" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
2.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
3.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
4.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
5.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
6.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
7.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
8.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
9.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
10. </WrapPanel>   

复制代码

1. <DockPanel Width="700" HorizontalAlignment="Center" LastChildFill="False">
2.     <Button DockPanel.Dock="Top" Width="100" Height="50" Content="Button" Margin="5"/>
3.     <Button DockPanel.Dock="Bottom" Width="100" Height="50" Content="Button" Margin="5"/>
4.     <Button DockPanel.Dock="Left" Width="100" Height="50" Content="Button" Margin="5"/>
5.     <Button DockPanel.Dock="Right" Width="100" Height="50" Content="Button" Margin="5"/>
6.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
7.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
8. </DockPanel>

复制代码

Canvas

画布，内部元素可使用以像素为单位的绝对坐标进行定位，使用固定的坐标设置元素的位置、不具备锚定停靠等功能。
Canvas适用场合

●　一经设计基本上不会再有改动的小型布局（如图标）。
●　艺术性比较强的布局。
●　需要大量使用横纵坐标进行绝对点定位的布局。
●　依赖于横纵坐标的动画。
Canvas的使用思路

1. - 确定是否需要Canvas画布布局
2. - 声明Canvas容器
3. - 填充Canvas容器内容
4. - 设置内容属性，Canvas.Left、Canvas.Top

复制代码

Canvas布局练习

1. <DockPanel Width="700" HorizontalAlignment="Center" LastChildFill="False">
2.     <Button DockPanel.Dock="Top" Width="100" Height="50" Content="Button" Margin="5"/>
3.     <Button DockPanel.Dock="Bottom" Width="100" Height="50" Content="Button" Margin="5"/>
4.     <Button DockPanel.Dock="Left" Width="100" Height="50" Content="Button" Margin="5"/>
5.     <Button DockPanel.Dock="Right" Width="100" Height="50" Content="Button" Margin="5"/>
6.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
7.     <Button Width="100" Height="50" Content="Button" Margin="5"/>
8. </DockPanel>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！