サイト移転のお知らせ:http://techbooster.org/に移転しました

XAMLを使用してパネルを定義する~3.Grid~

10月 4, 2011   //   by kei_i_t   //   Android, WindowsPhone7  //  No Comments

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

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

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

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

詳細は以下から

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

Gridの列を定義する

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

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

属性名概要
Widthカラムの横幅を設定します。
MaxWidthカラムが表示できる最大の横幅を設定します。Widthに"*"を指定した場合にMaxWidthを超えるサイズのコントロールを配置すると、超えている部分は不可視になります。
MinWidthカラムが表示できる最小の横幅を設定します。Widthに"*"を指定した場合にMinWidthをより小さいサイズのコントロールを配置すると、差分だけ余白が表示されます。
<Grid.ColumnDefinitions>
    <ColumnDefinition MaxWidth="100"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

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

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

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

Gridの行を定義する

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

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

属性名概要
Height列の高さを設定します。
MaxHeight列の最大の高さを設定します。Heightに"auto"を指定した場合にMaxHeightを超えるサイズのコントロールを配置すると、超えている部分は不可視になります。
MinHeight列の最小の高さを設定します。Heightに"auto"を指定した場合にMinHeightより小さいサイズのコントロールを配置すると、差分だけ余白が表示されます。
<Grid.RowDefinitions>
    <RowDefinition Height="200"/>
    <RowDefinition Height="auto"/>
</Grid.RowDefinitions>

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

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

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

コントロールを配置する

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

属性名概要
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を構築していきます。

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

名称概要
Button標準的なボタンの機能を提供します。
CheckBox項目のON/OFFをチェックされているかどうかで判断する場合に使用します。
Image画像のを表示する場合に使用します。
TextBlock文字列を出力する場合に使用します。
ListBoxリスト形式で項目を表示する場合に使用します。
RadioButton一つの項目に対して排他的に選択をさせたい場合に使用します。
MediaElementビデオやオーディオの再生などの機能を提供します。
PasswordBoxパスワード入力に使用するテキストボックスです。
ProgressBar処理の進行を通知する場合に使用します。
Rectangle短形描画(直線やだ円など)を表示する場合に使用します。
RichTextBox書式を反映させることのできるテキストボックスです。
Sliderつまみを左右に動かすことで、値の増減の入力を行う機能を提供します。
TextBox文字入力の機能を提供します。

関連する記事:

Sponsored Link

Comments are closed.

技術書新刊 発売中

アンドロイドアカデミアには、CIやテスト、互換検証など実務に生きるノウハウをあつめています

技術書新刊 発売中

Android Next!はAndroid 7.0に対応したはじめての技術書です!


The Web Explorer 2はCSSの中央寄せやWebAudioなど未来を読み解く一冊です


Revised TypeScript in DefinitelylandはTypeScript 2.0(β)に対応した解説書です。インストールから型定義まで幅広くサポートしています


技術書をかこう!はエンジニアらしい執筆環境を構築、HowTo本です