Windowsストアアプリの画面構成部品、コントロール

速習 Windowsストアアプリケーション 第3回

レイアウト系コントロール

　レイアウト系コントロールは、他のコントロールを配置する際、レイアウトしやすいように補助してくれるコントロールです。例えば、Gridコントロールを使うと、格子状に画面を分割してグリッド表示を行うことができます。

Grid

　Gridは画面を格子状に区切って、レイアウトを行うことができるコントロールです。画面をいくつかの区切りに分割して、コントロールを配置したいような場合に便利です。

　サンプルコードを見ながらGridコントロールの仕組みを確認しましょう。

Gridコントロールのサンプル

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="140"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Canvas Grid.Row="0" Grid.Column="0" Background="Red" />
    <Canvas Grid.Row="0" Grid.Column="1" Background="Green" />
    <Canvas Grid.Row="1" Grid.Column="0" Background="Blue" />
    <Canvas Grid.Row="1" Grid.Column="1" Background="Yellow" />
    <Canvas Grid.Row="2" Grid.ColumnSpan="2" Height="60" Background="Violet" />
    <Canvas Grid.Row="3" Grid.ColumnSpan="2" Background="Chocolate" />
</Grid>

　コードの実行結果は以下です。

サンプルの実行結果

　Gridコントロールの縦横の分割は、RowDefinitions（縦の分割）、ColumnDefinitions（横の分割）で定義します。

　今回の定義では横に2列、縦に4行のグリッドとなります。

Gridコントロールのサンプル

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="140"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

　縦の分割は上から「140」「*（スター）」「Auto」「140」と定義されています。

　「140」は140ピクセル、「*」は残りのスペース、「Auto」は下の要素によって自動で拡張するという意味です。

　横の分割は「2*」「*」と定義されています。これは全体を左から2対1で分割するという意味です。

　GridにはいくつかのCanvasが配置されています。これらのCanvasはプロパティに「Grid.Row」「Grid.Column」を持つことでGridのレイアウトのどの位置に配置されるかを指定しています。

　Canvasコントロールについては以降で説明します。

Gridコントロールのサンプル

<Canvas Grid.Row="0" Grid.Column="0" Background="Red" />
<Canvas Grid.Row="0" Grid.Column="1" Background="Green" />
<Canvas Grid.Row="1" Grid.Column="0" Background="Blue" />
<Canvas Grid.Row="1" Grid.Column="1" Background="Yellow" />
<Canvas Grid.Row="2" Grid.ColumnSpan="2" Height="60" Background="Violet" />
<Canvas Grid.Row="3" Grid.ColumnSpan="2" Background="Chocolate" />

注意

　RowDefinitionにAutoを指定した段のCanvasには、高さ（Height）を設定します。設定しない場合、高さの指定なし=0と判定され表示されません。

Canvas

　Canvasは、子要素を自由に配置できるコントロールです。

　Canvasコントロールの中に配置されたコントロールは、Canvas.TopでY座標を、Canvas.LeftでX座標の位置を指定できます。Canvasの重なりはCanvas.ZIndexで制御できます。

Canvasコントロールのサンプル

<Canvas Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Canvas Canvas.Top="10" Canvas.Left="10" Canvas.ZIndex="1" Height="100" Width="100" Background="Red" />
    <Canvas Canvas.Top="60" Canvas.Left="60" Canvas.ZIndex="2" Height="100" Width="100" Background="Green" />
    <Canvas Canvas.Top="110" Canvas.Left="110" Canvas.ZIndex="3" Height="100" Width="100" Background="Blue" />
    <Canvas Canvas.Top="160" Canvas.Left="160" Canvas.ZIndex="5" Height="100" Width="100" Background="Yellow" />
    <Canvas Canvas.Top="210" Canvas.Left="210" Canvas.ZIndex="4" Height="100" Width="100" Background="Violet" />
    <Canvas Canvas.Top="260" Canvas.Left="260" Canvas.ZIndex="6" Height="100" Width="100" Background="Chocolate" />
</Canvas>

　記事に付属のサンプル（CanvasControllSample.zip）を実行した結果は、次のとおりです。

Canvasサンプルの実行結果