【上位机——WPF】布局控件

常用布局控件

• Grid：网格，根据自定义行和列来设置控件的布局
  
• StackPanel：栈式面板，包含的元素在竖直或水平方向排成一条直线
  
• WrapPanel：主动折行面板，包含的元素在排满一行后，主动换行
  
• DockPanel：泊靠式面板，内部的元素可以选择泊靠方向
  
• UniformGrid：网格，UniformGrid就是Grid的简化版，每个单元格的巨细相同
  
• Canvas：画布，内部元素根据像素为单位绝对坐标进行定位。
  
• Border：装饰的控件，此控件用于绘制边框及配景，在Border中只能有一个子控件
  

这里除了Border控件，其他控件都继承于Panel基类。
Panel基类

所有Panel元素都支持FrameworkElement定义的根本巨细调整和定位属性，包括Height、Width、HorizontalAlignment、VerticalAlignment、Margin和LayoutTransform。Panel公开对相识和使用布局至关重要的其他属性。Background属性用于借助Brush填充派生面板元素的界限之间的地区。Children表示构成Panel的子元素聚集。InternalChildren表示Children聚集的内容以及由数据绑定天生的成员。两者均由父Panel内承载的子元素的UIElementCollection构成。
Panel提供了附加属性，ZIndex。假如一个单行单列的Grid布局控件中有两个Button，正常情况下，这两个Button都会以撑满Grid中，那么到底哪一个Button在上面，哪一个在下面。就看这两个Button的Panel.ZIndex附加属性的值，值越大的在上面，而值较小的那个Button将被上面的Button遮盖，从而在视觉上，用户只能看到一个Button。

1.     <Grid Background="AliceBlue" PreviewMouseUp="Grid_PreviewMouseUp">
2.         <Button Panel.ZIndex="2" Content="按钮1"   />
3.         <Button Panel.ZIndex="0" Content="按钮2"  />
5.     </Grid>

复制代码

Grid(网格)

Grid控件是WPF中所有布局控件中最好用的一个，因为它是自顺应屏幕的宽度，最关键的一点是，它在呈现时，其ActuaWidth实际宽度和ActualHeight实际高度会有一个计算值，我们在业务开辟中，偶然间要根据父控件的实际宽度和高度来计算子控件的呈现位置和巨细。

1. <Window x:Class="WpfApp1.MyGrid"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.         xmlns:local="clr-namespace:WpfApp1"
7.         mc:Ignorable="d"
8.         Title="MyGrid"  >
9.     <!--展示线条-->
10.     <Grid ShowGridLines="True">
11.         
12.         <!--三行-->
13.         <Grid.RowDefinitions>
14.             <RowDefinition  /> <!-- 固定高度-->
15.             <RowDefinition /> <!-- 等比例的高度-->
16.             <RowDefinition /> <!-- 跟随文本的高度-->
17.         </Grid.RowDefinitions>
19.         <!--两列-->
20.         <Grid.ColumnDefinitions>
21.             <ColumnDefinition/>
22.             <ColumnDefinition /> <!-- 跟随文本的宽度-->
23.         </Grid.ColumnDefinitions>
25.         <!--第一行第一列-->
26.         <!--Grid.RowSpan="2" 合并单元格行-->
27.         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.RowSpan="2" Text="文本1" Grid.Row="0" Grid.Column="0" FontSize="30"/>
28.         <!--第一行第二列-->
29.         <TextBlock Text="文本2" Grid.Row="0" Grid.Column="1" FontSize="30"/>
31.         <!--<TextBlock Text="文本3" Grid.Row="1" Grid.Column="0" FontSize="30"/>-->
32.         <TextBlock Text="文本4" Grid.Row="1" Grid.Column="1" FontSize="30"/>
34.         <!--Grid.ColumnSpan="2" 合并单元格列-->
35.         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
36.                    Grid.ColumnSpan="2"
37.                    Text="文本5" Grid.Row="2" Grid.Column="0" FontSize="30"/>
38.         <!--<TextBlock Text="文本6" Grid.Row="2" Grid.Column="1" FontSize="30"/>

复制代码