WPF 超入門 〜レイアウト編その弐「グリッド〜その壱」

まえがき

次は WPF の標準的なコンテナであるグリッドについて学びましょう。まずは簡単なアプリケーションを作って、グリッドについて学びたいと思います。
グリッドというと、VB ユーザーならDataGrid や FlexGrid が思い浮かぶ方も多いかも知れませんが、WPF のグリッドは全くの別物です。むしろ WindowsForms の TableLayoutPanel コントロールに近いといった方が、ピンとくる方も多いと思います。では早速実践しながら学んでまいりましょう。


グリッドを使ったプログラムの作成「将棋盤」

まずは Grid を使って「将棋盤」を作ります。もっとも実際に将棋をするわけではありません。9×9 の等間隔のテーブルを作って Grid コントロールの使い方を学習します。

メニューから「ファイル」→「追加」→「新しいプロジェクト」をクリックし、Layout ソリューションにプロジェクトを追加します。プロジェクト名は「Layout02」にしてください。


プロジェクトが作成されたら、ソリューションエクスプローラで Layout02 プロジェクトを選択、スタートアッププロジェクトに設定します。次に Window を選択して、以下のようにプロパティを設定してください。

Window1

プロパティ 設定する値
Title 将棋盤
Width 400
Height 400


Grid を選択し、プロパティウィンドウの「ColumnDefinitions」を選択、右側のボタンをクリックし、「コレクションエディター」を表示します。


図のとおりに追加ボタンを9回クリックしてください。列が9個作成されます。


つぎに Grid を選択したまま、プロパティウィンドウの「RowDefinitions」を選択、右側のボタンをクリックし、「コレクションエディター」を表示します。


先ほどと同様に追加ボタンを9回クリックしてください。今度は行が9個作成されます。デザイナで Window を見ると、グリッドに列と行が9個ずつ追加されているのが判るでしょう。



Grid を選択したまま、ShowGridLines プロパティを True に設定したのち、「F5」キーを押して実行します。以下のように表示されたら完成です。


マウスで画面のサイズを変えてみましょう。すべての行と列に「*」(Star) が設定されているため、行列が均等にサイズ変更されるのが判ると思います。




お次はその参「グリッド〜その弐」に続きます。