WPF 布局控件的使用

一、Grid

1.Grid 元素用于精确定位行和列中的内容。

2.以下代码创建了两行，第一行占 20 像素高，第二行占剩下的所有位置。

• 在 Grid. RowDefinitions 标签中，每一个 RowDefinition 就代表创建了一行，Height 属性指定高度。
• 之后的元素会获得一个 Grid.Row 属性，这个属性指定元素在第几行，从 0 开始。这里指定了 Menu 在第一行，子 Grid 在第二行。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="20"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
        
    <Menu Grid.Row="0">
        ...
    </Menu>
    
    <Grid Grid.Row="1" Background="AliceBlue">
        ...
    </Grid>

</Grid>

3.运行效果如下，Grid. RowDefinitions 和 Grid. ColumnDefinitions 可采用固定、自动、按比例三种方式定义。

• 固定长度：值为一个确定的数字。
• 自动长度：值为 Auto，实际作用就是取实际控件所需的最小值。
• 比例长度：*表示占用剩余的全部宽度；如果有两行都是*，将平分剩余宽度，每行占剩余高度的 1/2。

二、StackPanel

1.StackPanel 元素用于水平或垂直堆叠子元素。

2.Orientation 属性设置为 Horizontal 时，水平排列其中的控件。

• 如果设置 FlowDirection 属性为 RightToLeft，顺序会改编为从右到左。

<StackPanel Orientation="Horizontal" Width="200" Height="200">
    <Button Content="1"></Button>
    <Button Content="2"></Button>
    <Button Content="3"></Button>
</StackPanel>

3.Orientation 属性设置为 Vertical 时，垂直排列其中的控件。

<StackPanel Orientation="Vertical" Width="200" Height="200">
    <Button Content="1"></Button>
    <Button Content="2"></Button>
    <Button Content="3"></Button>
</StackPanel>