TechBooster

前回のWP7の記事ではStackPanelの使用方法を紹介しました。

今回はGridについて紹介します。

Gridは表のようにコントロールを配置できるレイアウトです。

GridはVisualStudioでWP7プロジェクトを作成した場合にデフォルトで使用されているパネルです。

詳細は以下から

Gridを使用するためには、列と行の定義をし、配置するコントロール内にGridへの配置用の属性を不可する必要があります。

Gridの列を定義する

列に対しては<Grid.ColumnDefinitions>タグを使用して詳細を定義していきます。

定義できる属性は以下の表のとおりです。

<Grid.ColumnDefinitions>
    <ColumnDefinition MaxWidth="100"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

2行目では横幅を200pxに設定しています。

3行目では表示されている残りの幅を全て使用するように設定しています。

上記のサンプルの2行目は1列目、3行目は2列目のカラムに適用されます。

Gridの行を定義する

行に対しては<Grid.RowDefinitions>タグを使用して詳細を定義していきます。

定義できる属性は以下の表のとおりです。

<Grid.RowDefinitions>
    <RowDefinition Height="200"/>
    <RowDefinition Height="auto"/>
</Grid.RowDefinitions>

2行目では高さを200pxに設定しています。

3行目は列の高さが自動で変化するように設定しています。基本的には内包するコントロールの高さにあわせて表示されます。

上記のサンプルの2行目は1行目、3行目は2行目の行に適用されます。

コントロールを配置する

Gridにコントロールを配置するにはGrid.Column属性とGrid.Row属性を配置したいコントロールに設定します。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition MaxWidth="100"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="200"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
        <TextBlock Text="aaa" Grid.Column="0" Grid.Row="0"/>
        <Button Grid.Column="1" Grid.Row="0">aaa</Button>
        <TextBox Grid.Column="0" Grid.Row="1"/>
        <Button Grid.Column="1" Grid.Row="1">bbb</Button>
</Grid>

10行目では1行、1列目(下図①)にTextBlockを配置しています。

11行目では1行、2列目(下図②)にButtonを配置しています。

12行目では2行、1列目(下図③)にTextBoxを配置しています。

13行目では2行、2列目(下図④)にTextBlockを配置しています。

代表的なコントロールの種類

WP7プラットフォームではパネル内にコントロールを配置していくことで、アプリケーションのUIを構築していきます。

以下に代表的なコントロールを紹介します。