トルネード

毛利のメモ書き

UWP 入門 - Gridの分割方法

Gridタグの分割

UWPのXAMLは、Pageタグから始まり[空のページ]ではデフォルトGridのみ記述されています。 このGridタグは、分割する機能があります。

縦に分割 ColumnDefinition

<Grid Background="LightGoldenrodYellow">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
</Grid>

f:id:mojeld:20180726094211p:plain

横に分割 RowDefinitions

<Grid Background="LightGreen">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
</Grid>

f:id:mojeld:20180726094707p:plain

縦横分割

<Grid Background="LightCyan">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
</Grid>

f:id:mojeld:20180726095036p:plain

組み合わせる

    <Grid Background="LightGoldenrodYellow">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid Grid.Column="1" Grid.Row="1" Background="LightBlue">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
        </Grid>
    </Grid>

f:id:mojeld:20180726095317p:plain