2013年01月18日

[C# WPF]Grid

今回はレイアウト用のコントロールであるGridについて解説します。

Gridは縦横を格子状に区切って、
Grid上のコントロールにどこからどこまでの領域に配置するかを
指定してレイアウトするコントロールです。

扱いやすく非常に強力なレイアウトコントロールです。

Gridの定義はxamlに以下のような形式で記述します。

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=高さ指定/>
<RowDefinition/>



</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=幅指定/>
<ColumnDefinition/>



</Grid.ColumnDefinitions>
<Grid上に配置するコントロール Grid.Row=配置する行
                 Grid.Column=配置する列
                 Grid.RowSpan=コントロールの占める行数
                 Grid.ColumnSpan=コントロールの占める列数 />



</Grid>


Grid.RowDefinitionsの中に行の定義を記述します。
Grid.ColumnDefinitionsの中に列の定義を記述します。
それぞれ行、列の数だけ記述します。

RowDefinitionのHeightには行の高さを指定します。
数値を指定した場合は、その値の高さが割り当てられます。
数値と*(スター)を指定した場合は数値を比率として扱い、
対象領域を指定値の割合で分割した高さが割り当てられます。
数値を指定せず*だけの場合は1*と同義になります。
Autoを指定した場合は内部に配置するコントロールのサイズを元に自動的に割り当てられます。
Heightを指定しなかった場合は*になります。

ColumnDifinitionのWidthには列の幅を指定します。
指定方法はRowDefinitionのHeightと同じです。

Grid内に配置するコントロールには
Grid.Row、Grid.Column、Grid.RowSpan、Grid.ColumnSpanを設定できます。
それぞれ配置する行、列、コントロールの占める行数、列数です。
Row、ColumのマスからRowSpan、ColumnSpanの数の領域をコントロールに割り当てます。
指定しない場合はRow、Columnは0、RowSpan、ColumnSpanは1が設定されます。

サンプルを見てみましょう。

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" Grid.ColumnSpan="3"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue"/>
<TextBox Grid.Row="3" Grid.Column="1" Grid.RowSpan="2"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Red"/>
</Grid>


レイアウトのされ方を見るためだけのものなので何の意味もないコードです。
わかりやすいようにTextBoxの背景を青、赤にして配置しています。

レイアウトのイメージを見てみましょう。
1.jpg

これはデザイナ画面で見たイメージです。
行、列の幅、高さを指定していない為、領域を同じ比率の幅、高さで分割します。
内部のTextBoxはRow、Column、RowSpan、ColumnSpanで指定した領域を占めています。

次のサンプルを見てみます。

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="1" Grid.Column="1" Background="Blue"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>


水平方向を2:1:1、垂直方向を1:2:1の比率で3行3列に分割しています。

配置のイメージです。
1.jpg

複数の行や列の幅、高さに数値、Auto、*を混合して指定した場合は、
まず数値、Autoで指定した行、列の領域を割り当て、
残りの領域を*で指定した比率で分割して割り当てます。


posted by cw at 19:30| Comment(0) | レイアウト | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。