ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【学习笔记】WPF快速入门：布局 [打印本页]
作者: 民工心事    时间: 2022-8-31 13:41
标题: 【学习笔记】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"/>
复制代码
四种行列高宽设置

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>
复制代码


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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4