第 17 章の概要: グリッドのマスター

  • [アーティクル]

Note

この本は 2016 年春に発行されて以降、改訂されていません。 多くの情報はまだ価値がありますが、一部の資料は古くなっており、トピックの中にはまったく正しくないものまたは不完全なものもあります。

Grid は、その子をセルの行と列に配置する優れたレイアウト メカニズムです。 よく似た HTML の table 要素とは異なり、Grid はプレゼンテーションではなく、レイアウトのみを目的としています。

基本のグリッド

Grid は、Grid によって継承される Children プロパティを定義している Layout<View> から派生しています。 XAML またはコードで、このコレクションに入力できます。

XAML でのグリッド

XAML での Grid 定義は一般に、RowDefinition および ColumnDefinition オブジェクトを使って、Grid の RowDefinitions および ColumnDefinitions コレクションに入力することから始まります。 この方法によって、Grid の行および列の数と、それらのプロパティを設定します。

RowDefinition には Height プロパティがあり、ColumnDefinition には Width プロパティがあります。どちらも、GridLength 型の構造体です。

XAML では、GridLengthTypeConverter によって単純なテキスト文字列が GridLength 値に変換されます。 バックグラウンドでは、GridLength コンストラクターによって、数値と 3 つのメンバーを持つ列挙体である GridUnitType 型の値に基づいて、GridLength 値が作成されます。

  • Absolute - 幅または高さは、デバイスに依存しない単位で指定されます (XAML では数値)
  • Auto - 高さまたは幅は、セルのコンテンツに基づいて自動調整されます (XAML では "Auto")
  • Star - 残りの高さと幅が比例的に割り当てられます (XAML では、"スター" と呼ばれる "*" 付きの数値)

また、Grid の各子には、(明示的または暗黙的に) 行と列が割り当てられる必要があります。 行の範囲と列の範囲は、省略可能です。 これらはすべて、アタッチされたバインド可能なプロパティ Grid によって定義されているが Grid の子に対して設定されているプロパティを使用して、指定されます。 Grid では、次の 4 つのアタッチされたバインド可能な静的プロパティを定義しています。

コードでは、プログラムによって 8 つの静的メソッドを使用して、これらの値を設定および取得できます。

XAML では、これらの値を設定するために、次の属性を使用します。

  • Grid.Row
  • Grid.Column
  • Grid.RowSpan
  • Grid.ColumnSpan

SimpleGridDemo サンプルでは、XAML での Grid の作成と初期化を示します。

Grid では、Layout から Padding プロパティを継承し、行と列の間の間隔を指定する 2 つの追加のプロパティを定義しています。

RowDefinitions および ColumnDefinitions コレクションは、厳密には必須ではありません。 省略すると、Grid によって Grid の子の行と列が作成され、それらすべてに既定の "*" (スター) の GridLength が付与されます。

コードでのグリッド

GridCodeDemo サンプルでは、コード上で Grid を作成して入力する方法を示しています。 Grid.IGridList<T> インターフェイスによって定義された Add などの追加の Add メソッドを呼び出すことで、各子にアタッチされたプロパティを直接または間接的に設定できます。

グリッドの棒グラフ

GridBarChart サンプルは、bulk AddHorizontal メソッドを使用して、複数の BoxView 要素を Grid に追加する方法を示しています。 既定では、これらの BoxView 要素の幅は同じです。 各 BoxView の高さは、制御して棒グラフのようにすることができます。

GridBarChart サンプルにある Grid では、AbsoluteLayout の親を初期には表示されない Frame と共有しています。 また、プログラムでは、Frame を使用してタップされた棒に関する情報を表示するために、各 BoxView に TapGestureRecognizer も設定しています。

グリッドでの配置

GridAlignment サンプルでは、VerticalOptions および HorizontalOptions プロパティを使用して Grid セル内の子を配置する方法を示しています。

SpacingButtons サンプルでは、Grid セル内で Button 要素を均等な間隔で中央に配置しています。

セルの区切り線と罫線

Grid には、セルの区切り線または罫線を描画する機能は含まれていません。 ただし、独自に作成することができます。

GridCellDividers では、細い BoxView 要素に対して具体的に追加の行と列を定義して、区切り線のように見立てる方法を示しています。

GridCellBorders プログラムでは、追加のセルは作成しませんが、代わりに各セル内に BoxView 要素を配置してセルの境界線のように見立てています。

実際に近いグリッドの例

KeypadGrid サンプルでは Grid を使用して、以下のようにテンキーを表示します。

Keypad Grid のトリプル スクリーンショット

向きの変化への対応

Grid では、向きの変化に対応するためのプログラムを構成できます。 GridRgbSliders サンプルでは、縦向きのスマートフォンの 2 番目の行と横向きのスマートフォンの 2 番目の列間で要素を移動する技法を示しています。

プログラムでは、Slider 要素を 0 から 255 の範囲に初期化し、データ バインディングを使用して 16 進数でスライダーの値を表示します。 Slider 値は浮動小数点型であり、16 進数用の .NET 書式設定の文字列は整数のみで有効なため、Xamarin.FormsBook.Toolkit ライブラリにある DoubleToIntConvert クラスが利用されます。