WPF

C#WPFの道#3!Gridの使い方をわかりやすく解説!

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

Gridとは?

Gridとは、画面レイアウトを行と列で構成し、柔軟のあるグリッド領域を作り、そこにコントロールを配置することで、キレイな画面レイアウトを作成することができます。

イメージ的にはExcelのセルのような感じで、「何列目の何番目にButtonコントロールを設置する」といった使い方で、コントロールを配置することができます。Excelのセル結合のようなこともできるので、希望のマス構成で、レイアウトを作成することができます。

列の定義の書き方

Grid.ColumnDefinitionsの定義の中に、必要な列の数だけ「ColumnDefinition」を記述します。列のはばはWidthプロパティに絶対値で「100」等のピクセルを指定することもできますが、「*」を指定することで、均等な比率で横幅を調整することができます。例えば3列宣言していて、すべての列の定義が「*」の場合は、均等に3列の幅が作られます。「2*」などと、数字を*の前に記述すると、その列のみ2倍などの指定した値の倍率で確保されます。Widthプロパティに「Auto」を指定すると、設置したコントロールの幅で動的に変動します。

行の定義の書き方

Grid.RowDefinitionsの定義の中に、必要な列の数だけ「RowDefinition」を記述します。列のはばはHeightプロパティに絶対値で「100」等のピクセルを指定することもできますが、「*」を指定することで、均等な比率で高さを調整することができます。例えば6行宣言していて、すべての行の定義が「*」の場合は、均等に6行の幅が作られます。「2*」などと、数字を*の前に記述すると、その行のみ2倍などの指定した値の倍率で確保されます。Heightプロパティに「Auto」を指定すると、設置したコントロールの高さで動的に変動します。

コントロールをグリッドのどのマスに設置するかの指定方法

コントロールをグリッドのマスに設置する場合は、Grid.RowとGrid.Columnで配置する場所を指定します。インデックスは左上から0始まりです。

セルを結合するときは、• Grid.ColumnSpanおよびGrid.RowSpanを使用します。指定した値だけセルを結合します。

サンプルコード

次のサンプルコードでは、電卓イメージのレイアウトを作成しています。最初に値を表示するラベルを設置し、その下に、電卓ボタンを設置しています。各ボタンはMarginを5にすることで、コントロールの周りの余白を5ピクセル確保しています。また上部のラベルと「0」のボタンはColumnSpanでセルの結合をしています。

このXamlを記述したときの画面レイアウトは次のようになります。

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。