Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#09 Gridの使い方

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

Gridとは?

Gridとは,Excelのセルのように,縦横のマスを作って,そのマスの中にコントロールを配置することのできるコンテナです。「縦2行,横3列」みたいな感じで,任意の行数と列数を指定して,コントロールを配置することができます。

行と列の定義

Gridの行と列は任意の数を指定できます。行はRowDefinitionsの中に必要な行数をRowDefinitionで定義していきます。列はColumnDefinitionsの中に必要な列数をColumnDefinitionで定義していきます。

行と列の幅

行と列の幅は「固定値」「Auto」「比率」という3つの指定の仕方があります。それぞれの動きを見ていきましょう。

固定値

固定値は必要なピクセルを数値で指定します。100ピクセルと指定すると,そのまま100ピクセルで幅がとられます。

Auto

Autoは必要な幅が割り当てられます。必要な幅とは,そのマスに乗っているコントロールによって変わります。乗っているコントロールに必要な幅が割り当てられます。「Label」が乗っている場合はそのラベルの「Text」の幅で調整されます。「Text」が「AAAAAAAAAA」という感じで長い場合は長くなり,「AAA」のように短ければ短くなります。

比率

比率は,「数値」と「*」で記述します。「1*」や「2*」などです。例えば3列目に「1*」と設定し,4列目に「2*」と設定された場合は3列目と4列目は「1対2」の比率で割り当てられます。

割り当てられる順番は固定値とAutoに割りあてた後に,残った部分を「比率」の行または列が分け合って調整されます。

コントロールを配置する方法

Gridの各マスにコントロールを設置するには,RowとColumnを指定します。一番左上を0行目の0列目スタートとしてインデックスを指定します。

余白

Gridにはセルとセルの間に余白があります。不要な場合はゼロにしたり,必要なピクセル数を指定したりすることで,余白を確保することができます。余白の指定は,行の場合は「RowSpacing」で指定し,列の場合は「ColumnSpacing」で指定します。

セル結合

Gridは,Excelのセル結合のようなことができます。例えば1行目と2行目を結合したい場合は「RowSpan=”2”」とすることで,2行分のスペースが割り当てられます。

列のセル結合は同じ要領でColumnSpanを指定します。

サンプルコード全体

  • 行は2行定義していて1行目は100ピクセル固定。2行目Autoなので,2行目にあるコントロールの最大サイズが2行目の高さになる。
  • 2行目はラベルの「BBBBBBBBBBBB」「CCC」「DDD」「EEE」が存在するが,どれも同じ高さなので,ラベルの文字の高さとなる。
  • 1列目100ピクセル固定。
  • 2列目は「Auto」なので「BBBBBBBB」が表示できる幅になる。
  • 3列目は「Auto」なので「CCC」が表示できる幅になる。
  • 4列目と5列目は比率で1:2なので,余ったスペースを1:2で分け合った幅になる。
  • 1列目の1行目の「AAA」はRowSpan=2となっているので,2行分のセル結合で表示される。

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