【WPF学习】01 布局基础
布局基础
.1 根据格网划分行列--Grid,Grid.RowDefinition,Grid.ColumnDefinition
格网
<Grid></Grid>
多行
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinition>
多列
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<Grid.ColumnDefinitions>
代码描述：
将面板划分为两行/两列
PS:可以通过Grid.Row和Grid.Column参数来基于行列索引设置对应区块参数，但需要注意行列索引都是从0开始的
.2 背景--Background
边界划分
<Border>
</Border>
背景颜色
<Border Background="Red"/>
代码描述：
目标区块的背景颜色设置为红
综合使用关键字设置第i行第j列区块的背景颜色
<Border Grid.Row="i" Grid.Column="j" Background="Green"/>
.3 边框--Margin
在Border参数内除了使用Background参数能设置该框架的背景颜色外，还可以使用Margin参数可以设置一个空白边框，数值代表边框尺寸
<Border Background="blue" Margin="5">
.4 尺寸--Height,Width
.4.1 自适应：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition />
<Grid.RowDefinitions>
</Grid>
代码描述：
将面板分为两行，第一行的高度自适应
PS:当区块内没有元素的时候，使用自适应可能会直接覆盖该区块
.4.2 绝对尺寸（固定值）
<Grid>
<Grid.RowDefinitions>
<RowDefinition>
<Button Width=“100” Height="10"/>
</RowDefinition>
<RowDefinition/>
<Grid.RowDefinitions>
</Grid>
代码描述：
行1里有新建一个button元素控件，尺寸为固定的100宽度和10高度
.4.3 相对尺寸（比例）
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
代码描述：
行1的高度是行2的两倍（a倍就是a*）
.5 参数设置所影响的空间范围--Grid.RowSpan,Grid.ColumnSpan
占据行列数
<Border Background="Red" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
代码描述：“背景为红”这一设置影响前两行两列的四个区块
.6 局部容器--StackPanel,WrapPanel,DockPanel,UniformGrid
代码实例：
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<Button Width="100" Height="40"/>
<Button Width="100" Height="40"/>
<Button Width="100" Height="40"/>
<Button Width="100" Height="40"/>
</StackPanel>
<WrapPanel Grid.Row="1">
<Button Width="100" Height="40"/>
<Button Width="100" Height="40"/>
<Button Width="100" Height="40"/>
<Button Width="100" Height="40"/>
</WrapPanel>
</Grid>
代码描述：
在StackPanel对应的局部范围内（这里对应的是两行两列划分出的四区块中的第一区块），此范围内生成四个button元素控件
在第二行第一列（注意对应关系，这里初始划分了两行两列，行列索引从0开始）区块生成四个button元素控件
.6.1 排列方向
StackPane对应局部l范围内的元素默认情况下是自上而下紧密排列的
在StackPanel标签中我们可以通过Orientation参数选择其他类型的排列方向
<StackPanel Orientation="Horizontal">
</StackPanel>
水平方向（自左向右） Horizontal
垂直方向（自上向下） Vertical
而WrapPanel默认情况下对应局部范围内的元素是水平排列的，同样可以通过Orientation参数改变元素排列方向
但WrapPanel相对于StackPanel的最大区别是，前者会保证每一个元素控件在范围内的完整可视性（在水平方向排列时，同样遭遇剩余空间不足以显示完整元素控件的情况，WrapPanel会换行，而StackPanel则是硬排哪怕元素控件被部分遮挡）
.6.2 停靠方式
除了上述两种局部容器之外还有一个 DockPanel，使用过winform的应该知道Dock一般为元素在位置上设置停靠属性（靠左，靠右，靠上，靠下）这里也是一样的
默认情况下，DockPanel内的元素不设置具体尺寸值默认尺寸会填满对应区域
默认情况下，DockPanel内的元素停靠方式为靠左排列
通过DockPanel.Dock参数可以修改元素停靠方式
<DockPanel>
<Button Width=" 100" Height="40" DockPanel.Dock="Left"/>
<Button Width=" 100" Height="40" DockPanel.Dock="Right"/>
<Button Width=" 100" Height="40" DockPanel.Dock="Top"/>
<Button Width=" 100" Height="40" DockPanel.Dock="Right"/>
</DockPanel>
通过LastChildFill参数可以设置最后一个元素是否填充满DockPanel的剩余空间
<DockPanel LastChildFill=“False”>或者<DockPanel LastChildFill="True">
元素
</DockPanel>
.6.3 均分空间排布
使用UniformGrid可以实现把有限的空间均分给空间内的元素
例如让一块3*3的格网被9个Button元素控件均分
<Grid>
<UniformGrid Columns="3" Rows="3">
<Button/>
<Button/>
<Button/>
<Button/>
<Button/>
<Button/>
<Button/>
<Button/>
<Button/>
//注意，这里的每三个Button代表一行自左向右里的一组
</UniformGrid>
</Grid>
