スポンサーリンク

WPFのGridについて理解を深める

今回はWPFのGridについて書いていきます。

Gridには本当に様々な仕様があるため、基本的な部分だけを記載していきたいと思います。

今回は以下の3行4列となるGridを表示させてみます。

MainWindow.xamlの定義

まずはVisualStudioでWPFのプロジェクトを作成し、「MainWindow.xaml」の内容を以下のようにします。

上記の内容を解説していくとこのようになります。

Gridの列を定義する

Gridの列を定義するときは「ColumnDefinition」を使用します。以下のようにするとGridを4列にすることができ、また「Width」で列幅を指定することができます。列幅を均等にしたいときは「Width=”*”」のように指定します。列幅を固定値にしたいときは「Width=”280″」のように指定します。

Gridの行を定義する

Gridの行を定義するときは「RowDefinition」を使用します。以下のようにするとGridを3行にすることができ、また「Height」で行高さを指定することができます。行高さを均等にしたいときは「Height=”*”」のように指定します。行高さを2倍にしたいときは「Height=”2*”」のように指定します。

ボタンの表示位置(行と列)を指定する

Gridに配置するボタンの位置を指定するには「Grid.Column=”0″」、「Grid.Row=”1″」のように定義します。この場合、「Grid.Column=”0″」は0列目、「Grid.Row=”1″」は1行目ということになります。

Gridの行と列を連結させる

Gridの行と列を連結させたい場合があります。その場合は「Grid.ColumnSpan=”2″」のように定義することで連結することができます。この場合は2列分を連結することになるので、連結して不要になった要素の定義は必要なくなるので削除しておきます。上記の例では4列のGridが用意されていますが、ラベルを2列ずつで連結しているため2列として表示されるようになっています。

上記まで記載して実行するとこのように表示することができます。

MainWindow.xaml.csの定義

次に「MainWindow.xaml.cs」の内容はこのようになります。Gボタンを押下するとメッセージボックスを表示します。Dボタンを押下するとDataContextとMainViewModeが紐づくようになっています。

MainViewMode.csの定義

次に「MainViewMode.cs」を追加してバインディングさせる文字を指定します。

ボタンDを押下するとラベルの部分に「バインディング値」と表示されるようになります。また、Gボタンを押下すると右下のようなメッセージボックスが表示されます。

以上、今回はWPFのGridについて簡単に解説してみました。