3. 布局控件

1. Grid

　　Grid 就像一个网格，其它控件可以被放置在 Grid 中的某个格子或某些格子当中。

　　Grid 可以通过 RowDefinitions 和 ColumnDefinitions 来进行划分：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="200"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
</Grid>

　　以上 XAML 代码即将 Grid 分为了 5 行和 3 列。其中，固定的数字如 200 和 100 表明该行或该列的高度或宽度就固定为 200 或 100；而 2* 和 3* 则表示他们占比为 2：3；Auto 则是根据格子内的控件大小自行调整。

　　当要将某个控件放置时使用 Grid.Row 和 Grid.Column 来设置：

<TextBlock Grid.ColumnSpan="2" FontSize="48" Margin="10">ACME Sales Crop</TextBlock>
        
<TextBlock Grid.Row="1" VerticalAlignment="Center" Margin="10">First Name:</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1" Margin="0,10"/>

　　不设置时默认为 0，即第一行第一列。Grid.ColumnSpan 表示该控件可跨越的列数量，同样的也有 Grid.RowSpan 属性。

2. StackPanel

　　StackPanel 可将控件依次排列，其中 Orientation 属性可设置水平排列或垂直排列，默认为垂直排列。

3. RelativePanel（Windows 10 新控件）

　　RelativePanel 内的控件可设置他们之间的相对关系，比如 A 在 RelativePanel 的右边，B 在 A 的下边，等等。

<RelativePanel Grid.Row="1">
            <Rectangle Name="redRect" Fill="Red" RelativePanel.AlignRightWithPanel="True" Width="100" Height="100"/>
            <Rectangle Name="blackRect" Fill="Black"
　　　　　　　　　　　　　 RelativePanel.AlignLeftWith="redRect" RelativePanel.AlignVerticalCenterWithPanel="True" Width="50" Height="50"/>
            <Rectangle Fill="Blue" 
　　　　　　　　　　　　　　RelativePanel.Above="blackRect" RelativePanel.AlignHorizontalCenterWithPanel="True" Width="150" Height="10"/>
</RelativePanel>

　　重要的属性即 RelativePanel.AlignRightWithPanel, RelativePanel.Below 等。

4. SplitView（Windows 10 新控件）

　　SplitView 即类似汉堡包控件，点击之后可弹出窗格。

　　SplitView 主要包含 SplitView.Pane 和 SplitView.Content 两大部分，默认显示 Content 和隐藏 Pane，可通过设置属性 IsPaneOpen 控制 Pane 是否弹出，以及 DisplayMode 控制 Pane 弹出的形式：

<SplitView Name="splitView" IsPaneOpen="True" DisplayMode="Inline"
    <SplitView.Pane>
        <StackPanel>
            <TextBlock>1</TextBlock>
            <TextBlock>2</TextBlock>
            <TextBlock>3</TextBlock>
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <StackPanel>
            <TextBlock>4</TextBlock>
            <TextBlock>5</TextBlock>
            <TextBlock>6</TextBlock>
        </StackPanel>
    </SplitView.Content>
</SplitView>

原视频链接：

UWP-008 - XAML Layout with Grids

UWP-009 - XAML Layout with StackPanel

UWP-017 - XAML Layout with RelativePanel

UWP-018 - XAML Layout with the SplitPanel