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

  • 【学习笔记】WPF快速入门：布局已关闭评论
  • 304 次浏览
  • A+
所属分类：.NET技术
摘要

WPF布局使用的是Panel族布局控件，它们均派生自Panel抽象类，主要用于控制UI布局。
便宜好用的国外VPS推荐

布局（Panel族）

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

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

WPF布局容器

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

Grid

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

Grid的使用思路

- 声明Grid容器 	<Grid></Grid> - 定义行列属性     <Grid.ColumnDefinitions>	     	<ColumnDefinition> 	</Grid.ColumnDefinitions>     <Grid.RowDefinitions>		     	<RowDefinition>     </Grid.RowDefinitions> - 使用网格单元 	<ControlName Grid.Column="0" Grid.Row="0"/>

四种行列高宽设置

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

Gird布局练习

<!--#region Gird布局练习--> <Grid>     <!--定义行列数及相关属性-->     <Grid.ColumnDefinitions>         <!--四种行列高宽设置方式-->         <ColumnDefinition Width="Auto"/>         <ColumnDefinition Width="200"/>         <ColumnDefinition/>         <ColumnDefinition Width="1*"/>         <ColumnDefinition Width="2*"/>     </Grid.ColumnDefinitions>     <Grid.RowDefinitions>         <RowDefinition Height="Auto"/>         <RowDefinition Height="100"/>         <RowDefinition/>         <RowDefinition Height="1*"/>         <RowDefinition Height="2*"/>     </Grid.RowDefinitions>     <!--使用Grid网格单元-->     <Button Grid.Column="0" Grid.Row="0" Content="我是Button" Width="100" Height="100"/>     <Border Grid.Column="1" Grid.Row="1" Background="Red"/>     <Border Grid.Column="2" Grid.Row="2" Background="Yellow"/>     <Border Grid.Column="3" Grid.Row="3" Grid.ColumnSpan="6" Grid.RowSpan="2" Background="Green"/> </Grid> <!--#endregion-->

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

备注：WPF的分辨率无关性

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

StackPanel

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

StackPanel的使用思路

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

StackPanel布局练习

<!--#region StackPanel布局练习--> <GroupBox Header="请选择正确的成语" BorderBrush="Black" Margin="5">     <StackPanel Orientation="Vertical" Margin="10" VerticalAlignment="Center">         <CheckBox Content="A.迫不及待"/>         <CheckBox Content="B.首屈一指"/>         <CheckBox Content="C.陈词滥调"/>         <CheckBox Content="D.唉声叹气"/>         <CheckBox Content="E.不可理喻"/>         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">             <Button Content="清空" Width="60" Margin="5"/>             <Button Content="确定" Width="60" Margin="5"/>         </StackPanel>     </StackPanel> </GroupBox> <!--#endregion-->

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

WrapPanel

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

WrapPanel的使用思路

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

WrapPanel布局练习

<!--#region WrapPanel布局练习--> <WrapPanel Width="400" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">     <Button Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/> </WrapPanel> <!--#endregion-->

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

DockPanel

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

DockPanel的使用思路

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

DockPanel布局练习

<!--#region DockPanel布局练习-->     <DockPanel Width="700" HorizontalAlignment="Center">     <Button DockPanel.Dock="Top" Width="100" Height="50" Content="Button" Margin="5"/>     <Button DockPanel.Dock="Bottom" Width="100" Height="50" Content="Button" Margin="5"/>     <Button DockPanel.Dock="Left" Width="100" Height="50" Content="Button" Margin="5"/>     <Button DockPanel.Dock="Right" Width="100" Height="50" Content="Button" Margin="5"/>     <!--默认位置在四个dock方向上的元素边界的中间位置-->     <Button Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/>     </DockPanel> <!--#endregion-->

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

<!--设置LastChildFill="False"--> <DockPanel Width="700" HorizontalAlignment="Center" LastChildFill="False">     <Button DockPanel.Dock="Top" Width="100" Height="50" Content="Button" Margin="5"/>     <Button DockPanel.Dock="Bottom" Width="100" Height="50" Content="Button" Margin="5"/>     <Button DockPanel.Dock="Left" Width="100" Height="50" Content="Button" Margin="5"/>     <Button DockPanel.Dock="Right" Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/>     <Button Width="100" Height="50" Content="Button" Margin="5"/> </DockPanel>

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

Canvas

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

Canvas适用场合

●　一经设计基本上不会再有改动的小型布局（如图标）。

●　艺术性比较强的布局。

●　需要大量使用横纵坐标进行绝对点定位的布局。

●　依赖于横纵坐标的动画。

Canvas的使用思路

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

Canvas布局练习

<!--#region Canvas布局练习--> <Canvas>     <TextBlock Text="用户名: " Canvas.Left="12" Canvas.Top="12"/>     <TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left="66" Canvas.Top="9"/>     <TextBlock Text="密码: " Canvas.Left="12" Canvas.Top="40.72" Height="16" Width="36"/>     <TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left ="66" Canvas.Top ="38"/>     <Button Content="确定" Width="80" Height="22" Canvas.Left ="100" Canvas.Top="87" />     <Button Content ="清除" Width="80" Height="22" Canvas.Left="186" Canvas.Top="87" /> </Canvas> <!--#endregion-->

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

便宜好用的国外VPS推荐