グリッドは、コントロールを格子状に配置するコントロールだ。

空のUWPプロジェクトを作成する。
こんなMainPage.xamlが作られる。

<Page
    x:Class="TestGrid.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestGrid"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        
    </Grid>
</Page>

まず、行列を追加する。GridのプロパティでColumnDefinitions、RowDefinitionsで追加する。

001
001

1行目全体にボタン、1列2行〜3行にボタン、2列2行と2列3行にそれぞれボタンをドラッグ＆ドロップでおく。

002

xamlのGrid部分はこんなになる。

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Stretch" Margin="10,10,10,10.333" VerticalAlignment="Stretch" RenderTransformOrigin="0.231,0.451" Grid.ColumnSpan="2"/>
        <Button x:Name="button1" Content="Button" HorizontalAlignment="Stretch" Margin="10,9.667,10,10" Grid.Row="1" VerticalAlignment="Stretch" Grid.RowSpan="2"/>
        <Button x:Name="button2" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="10,9.667" Grid.Row="1" VerticalAlignment="Stretch"/>
        <Button x:Name="button3" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="10,10.333,10,10" Grid.Row="2" VerticalAlignment="Stretch"/>
    </Grid>