【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>