Xamarin.Forms のグリッドXamarin.Forms Grid

サンプルのダウンロードサンプルをダウンロードします。Download Sample Download the sample

Grid ビューの行と列に配置をサポートします。Grid supports arranging views into rows and columns. 比例サイズや絶対サイズを持つ行と列を設定できます。Rows and columns can be set to have proportional sizes or absolute sizes. Gridレイアウトは、従来のテーブルに混同しない必要があり、表形式のデータを提示するものではありません。The Grid layout should not be confused with traditional tables and is not intended to present tabular data. Grid 行、列またはセルの書式の概念はありません。Grid does not have the concept of row, column or cell formatting. HTML のテーブルとは異なりGridコンテンツをレイアウトするためのものが純粋です。Unlike HTML tables, Grid is purely intended for laying out content.

この記事では説明します。This article will cover:

  • 目的 –の一般的な使用Gridします。Purpose – common uses for Grid.
  • 使用状況 –を使用するGrid目的の設計を実現するためにします。Usage – how to use Grid to achieve your desired design.
    • 行と列 –行と列の指定、Gridします。Rows and Columns – specify rows and columns for the Grid.
    • ビューを配置する –ビューを特定の行と列のグリッドに追加します。Placing Views – add views to the grid at specific rows and columns.
    • 間隔 –行と列の間のスペースを構成します。Spacing – configure the spaces between rows and columns.
    • スパン –複数の行または列にまたがるように要素を構成します。Spans – configure elements to span across multiple rows or columns.

目的Purpose

Grid グリッド ビューを配置するために使用できます。Grid can be used to arrange views into a grid. これはさまざまなケースで役立ちます。This is useful in a number of cases:

  • 電卓アプリ内のボタンの配置Arranging buttons in a calculator app
  • IOS または Android のホーム画面のように、グリッドに整列ボタン/選択肢Arranging buttons/choices in a grid, like the iOS or Android home screens
  • 1 つのディメンション (一部のツールバーのように) に等しいサイズのように、ビューを配置します。Arranging views so that they are of equal size in one dimension ( like in some toolbars)

使用法Usage

従来のテーブルとは異なりGridコンテンツから行と列のサイズと数を推論することはありません。Unlike traditional tables, Grid does not infer the number and sizes of rows and columns from the content. 代わりに、GridRowDefinitionsColumnDefinitionsコレクション。Instead, Grid has RowDefinitions and ColumnDefinitions collections. これらは、行と列の数がレイアウトの定義を保持します。ビューに追加されますGrid行と列でビューを配置する必要がありますを識別する指定された行および列のインデックスを使用します。These hold definitions of how many rows and columns will be laid out. Views are added to Grid with specified row and column indices, which identify which row and column a view should be placed in.

行と列Rows and Columns

行および列情報が格納されているGridRowDefinitions & ColumnDefinitionsは各コレクションのプロパティの RowDefinition ColumnDefinition オブジェクトをそれぞれします。Row and column information is stored in Grid's RowDefinitions & ColumnDefinitions properties, which are each collections of RowDefinition and ColumnDefinition objects, respectively. RowDefinition 1 つのプロパティを持つHeightColumnDefinition1 つのプロパティを持つWidthします。RowDefinition has a single property, Height, and ColumnDefinition has a single property, Width. 高さと幅のオプションは次のとおりです。The options for height and width are as follows:

  • 自動–行または列の内容に合わせて自動的にサイズ。Auto – automatically sizes to fit content in the row or column. として指定された GridUnitType.Auto (C#) またはとしてAutoXAML でします。Specified as GridUnitType.Auto in C# or as Auto in XAML.
  • Proportional(*) –残りの領域の割合としての列と行のサイズを設定します。Proportional(*) – sizes columns and rows as a proportion of the remaining space. 値として指定し、 GridUnitType.Star (C#) と#*、XAML で#目的の値をされています。Specified as a value and GridUnitType.Star in C# and as #* in XAML, with # being your desired value. 1 つの行/列を指定する*使用可能な領域をいっぱいになるようになります。Specifying one row/column with * will cause it to fill the available space.
  • 絶対–列と、特定の固定の高さと幅の値を持つ行のサイズを設定します。Absolute – sizes columns and rows with specific, fixed height and width values. 値として指定し、 GridUnitType.Absolute (C#) と#、XAML で#目的の値をされています。Specified as a value and GridUnitType.Absolute in C# and as # in XAML, with # being your desired value.

注意

列の幅の値は、既定*ではとして設定されます。これにより、列が使用可能な領域に収まるようになります。The width values for columns are set as * by default in Xamarin.Forms, which ensures that the column will fill the available space. 行の高さの値も、既定で*として設定されます。The height values for rows are also set as * by default.

次の 3 つの行と 2 つの列が必要なアプリケーションを考えてみます。Consider an app that needs three rows and two columns. 一番下の行を正確に 200px (縦) をある必要があり、一番上の行は、中央の行と高さが同じである 2 回必要があります。The bottom row needs to be exactly 200px tall and the top row needs to be twice as tall as the middle row. 左側の列に合わせたコンテンツ幅にする必要があるし、右側の列は、残りのスペースを埋める必要があります。The left column needs to be wide enough to fit the content and the right column needs to fill the remaining space.

で XAML:In XAML:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="2*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="200" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
</Grid>

C# の場合:In C#:

Grid grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});
grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });

グリッド ビューを配置します。Placing Views in a Grid

ビューを配置する、Gridをグリッドに子として追加しに属している行と列を指定する必要があります。To place views in a Grid you'll need to add them as children to the grid, then specify which row and column they belong in.

XAML を使用してGrid.RowGrid.Column配置を指定する各個々 のビュー。In XAML, use Grid.Row and Grid.Column on each individual view to specify placement. なおGrid.RowGrid.Column行と列の 0 から始まるリストに基づく場所を指定します。Note that Grid.Row and Grid.Column specify location based on the zero-based lists of rows and columns. つまり、4 × 4 のグリッドで右下のセルは (3, 3)、左上のセルは (0, 0)。This means that in a 4x4 grid, the top left cell is (0,0) and the bottom right cell is (3,3).

Gridに示す次の 4 つのセルが含まれています。The Grid shown below contains four cells:

で XAML:In XAML:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
  <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
  <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
  <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>

C# の場合:In C#:

var grid = new Grid();

grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star)});
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star)});
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)});
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)});

var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };

grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 1, 0);
grid.Children.Add(bottomLeft, 0, 1);
grid.Children.Add(bottomRight, 1, 1);

上記のコードでは、4 つのラベル、2 つの列では、2 つの行とグリッドを作成します。The above code creates grid with four labels, two columns, and two rows. 各ラベルが同じサイズにあるし、行をすべて使用可能な領域を使用する展開はことに注意してください。Note that each label will have the same size and that the rows will expand to use all available space.

上記の例ではビューに追加されます、 Grid.Children コレクションを使用して、 Add 左と上の引数を指定するオーバー ロードします。In the example above, views are added to the Grid.Children collection using the Add overload that specifies left and top arguments. 使用する場合、 Add left を指定するオーバー ロード、右、上、および、下部にある引数の中に、左と上の引数は、常に内のセルを参照、 Grid右と外部にあるセルを参照する引数の下部にある場合があります、Gridします。When using the Add overload that specifies left, right, top, and bottom arguments, while the left and top arguments will always refer to cells within the Grid, the right and bottom arguments may appear to refer to cells that are outside the Grid. これは、右の引数は、左の引数より大きい必ず下部にある引数を最上位の引数よりも大きい必ずためです。This is because the right argument must always be greater than the left argument, and the bottom argument must always be greater than the top argument. 次の例は、両方を使用して同等のコードを示しています。Addオーバー ロードします。The following example shows equivalent code using both Add overloads:

// left, top
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 1, 0);
grid.Children.Add(bottomLeft, 0, 1);
grid.Children.Add(bottomRight, 1, 1);

// left, right, top, bottom
grid.Children.Add(topLeft, 0, 1, 0, 1);
grid.Children.Add(topRight, 1, 2, 0, 1);
grid.Children.Add(bottomLeft, 0, 1, 1, 2);
grid.Children.Add(bottomRight, 1, 2, 1, 2);

スペースSpacing

Grid 行と列の間隔を制御するプロパティがあります。Grid has properties to control spacing between rows and columns. 次のプロパティをカスタマイズするために使用できる、 Grid:The following properties are available for customizing the Grid:

  • ColumnSpacing –列間のスペース量。ColumnSpacing – the amount of space between columns. このプロパティの既定値は、6 です。The default value of this property is 6.
  • 間隔を広げる–行の間の領域の量。RowSpacing – the amount of space between rows. このプロパティの既定値は、6 です。The default value of this property is 6.

次の XAML を指定します、Gridで 2 つの列、1 行、および 5 px 列間の間隔。The following XAML specifies a Grid with two columns, one row, and 5 px of spacing between columns:

<Grid ColumnSpacing="5">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
</Grid>

C# の場合:In C#:

var grid = new Grid { ColumnSpacing = 5 };
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star)});
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star)});

範囲Spans

グリッドを使用する場合に多くの場合は、要素を 1 つ以上の行または列を占有する必要があります。Often when working with a grid, there is an element that should occupy more than one row or column. 簡単な電卓アプリケーションを検討してください。Consider a simple calculator application:

0 のボタンにまたがって表示される 2 つの列と同じように各プラットフォーム用の組み込みの計算ツールに注目してください。Notice that the 0 button spans two columns, just like on the built-in calculators for each platform. これは、ColumnSpanプロパティで、要素が列の数が占有するを指定します。This is accomplished using the ColumnSpan property, which specifies how many columns an element should occupy. そのボタンの XAML:The XAML for that button:

<Button Text = "0" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" />

および C# の場合。And in C#:

Button zeroButton = new Button { Text = "0" };
controlGrid.Children.Add (zeroButton, 0, 4);
Grid.SetColumnSpan (zeroButton, 2);

静的メソッドのコードを注意してください、Gridクラスへの変更をなどの変更を配置する際に使用ColumnSpanRowSpanします。Note that in code, static methods of the Grid class are used to perform positioning changes including changes to ColumnSpan and RowSpan. また、いつでも設定できるその他のプロパティとは異なりプロパティの静的メソッドを使用して設定する必要が既に、グリッドで前に、変更されました。Also note that, unlike other properties that can be set at any time, properties set using the static methods must already be in the grid before they are changed.

上記の電卓アプリケーションの完全な XAML は次のとおりです。The complete XAML for the above calculator app is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LayoutSamples.CalculatorGridXAML"
Title = "Calculator - XAML"
BackgroundColor="#404040">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="plainButton" TargetType="Button">
                <Setter Property="BackgroundColor" Value="#eee"/>
                <Setter Property="TextColor" Value="Black" />
                <Setter Property="BorderRadius" Value="0"/>
                <Setter Property="FontSize" Value="40" />
            </Style>
            <Style x:Key="darkerButton" TargetType="Button">
                <Setter Property="BackgroundColor" Value="#ddd"/>
                <Setter Property="TextColor" Value="Black" />
                <Setter Property="BorderRadius" Value="0"/>
                <Setter Property="FontSize" Value="40" />
            </Style>
            <Style x:Key="orangeButton" TargetType="Button">
                <Setter Property="BackgroundColor" Value="#E8AD00"/>
                <Setter Property="TextColor" Value="White" />
                <Setter Property="BorderRadius" Value="0"/>
                <Setter Property="FontSize" Value="40" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <Grid x:Name="controlGrid" RowSpacing="1" ColumnSpacing="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="150" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Text="0" Grid.Row="0" HorizontalTextAlignment="End" VerticalTextAlignment="End" TextColor="White"
        FontSize="60" Grid.ColumnSpan="4" />
            <Button Text = "C" Grid.Row="1" Grid.Column="0"
        Style="{StaticResource darkerButton}" />
            <Button Text = "+/-" Grid.Row="1" Grid.Column="1"
        Style="{StaticResource darkerButton}" />
            <Button Text = "%" Grid.Row="1" Grid.Column="2"
        Style="{StaticResource darkerButton}" />
            <Button Text = "div" Grid.Row="1" Grid.Column="3"
        Style="{StaticResource orangeButton}" />
            <Button Text = "7" Grid.Row="2" Grid.Column="0"
        Style="{StaticResource plainButton}" />
            <Button Text = "8" Grid.Row="2" Grid.Column="1"
        Style="{StaticResource plainButton}" />
            <Button Text = "9" Grid.Row="2" Grid.Column="2"
        Style="{StaticResource plainButton}" />
            <Button Text = "X" Grid.Row="2" Grid.Column="3"
        Style="{StaticResource orangeButton}" />
            <Button Text = "4" Grid.Row="3" Grid.Column="0"
        Style="{StaticResource plainButton}" />
            <Button Text = "5" Grid.Row="3" Grid.Column="1"
        Style="{StaticResource plainButton}" />
            <Button Text = "6" Grid.Row="3" Grid.Column="2"
        Style="{StaticResource plainButton}" />
            <Button Text = "-" Grid.Row="3" Grid.Column="3"
        Style="{StaticResource orangeButton}" />
            <Button Text = "1" Grid.Row="4" Grid.Column="0"
        Style="{StaticResource plainButton}" />
            <Button Text = "2" Grid.Row="4" Grid.Column="1"
        Style="{StaticResource plainButton}" />
            <Button Text = "3" Grid.Row="4" Grid.Column="2"
        Style="{StaticResource plainButton}" />
            <Button Text = "+" Grid.Row="4" Grid.Column="3"
        Style="{StaticResource orangeButton}" />
            <Button Text = "0" Grid.ColumnSpan="2"
        Grid.Row="5" Grid.Column="0" Style="{StaticResource plainButton}" />
            <Button Text = "." Grid.Row="5" Grid.Column="2"
        Style="{StaticResource plainButton}" />
            <Button Text = "=" Grid.Row="5" Grid.Column="3"
        Style="{StaticResource orangeButton}" />
        </Grid>
    </ContentPage.Content>
</ContentPage>

両方のグリッドの上部にあるラベルと 0 個、ボタンが occuping 複数の列があることを確認します。Notice that both the label at the top of the grid and the zero button are occuping more than one column. 入れ子になったグリッドを使用して同様のレイアウトを達成できるが、 ColumnSpan & RowSpanアプローチの方が簡単です。Although a similar layout could be achieved using nested grids, the ColumnSpan & RowSpan approach is simpler.

C# で実装します。The C# implementation:

public CalculatorGridCode ()
{
  Title = "Calculator - C#";
  BackgroundColor = Color.FromHex ("#404040");

  var plainButton = new Style (typeof(Button)) {
    Setters = {
      new Setter { Property = Button.BackgroundColorProperty, Value = Color.FromHex ("#eee") },
      new Setter { Property = Button.TextColorProperty, Value = Color.Black },
      new Setter { Property = Button.BorderRadiusProperty, Value = 0 },
      new Setter { Property = Button.FontSizeProperty, Value = 40 }
    }
  };
  var darkerButton = new Style (typeof(Button)) {
    Setters = {
      new Setter { Property = Button.BackgroundColorProperty, Value = Color.FromHex ("#ddd") },
      new Setter { Property = Button.TextColorProperty, Value = Color.Black },
      new Setter { Property = Button.BorderRadiusProperty, Value = 0 },
      new Setter { Property = Button.FontSizeProperty, Value = 40 }
    }
  };
  var orangeButton = new Style (typeof(Button)) {
    Setters = {
      new Setter { Property = Button.BackgroundColorProperty, Value = Color.FromHex ("#E8AD00") },
      new Setter { Property = Button.TextColorProperty, Value = Color.White },
      new Setter { Property = Button.BorderRadiusProperty, Value = 0 },
      new Setter { Property = Button.FontSizeProperty, Value = 40 }
    }
  };

  var controlGrid = new Grid { RowSpacing = 1, ColumnSpacing = 1 };
  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (150) });
  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });

  controlGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });
  controlGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });
  controlGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });
  controlGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });

  var label = new Label {
    Text = "0",
    HorizontalTextAlignment = TextAlignment.End,
    VerticalTextAlignment = TextAlignment.End,
    TextColor = Color.White,
    FontSize = 60
  };
  controlGrid.Children.Add (label, 0, 0);

  Grid.SetColumnSpan (label, 4);

  controlGrid.Children.Add (new Button { Text = "C", Style = darkerButton }, 0, 1);
  controlGrid.Children.Add (new Button { Text = "+/-", Style = darkerButton }, 1, 1);
  controlGrid.Children.Add (new Button { Text = "%", Style = darkerButton }, 2, 1);
  controlGrid.Children.Add (new Button { Text = "div", Style = orangeButton }, 3, 1);
  controlGrid.Children.Add (new Button { Text = "7", Style = plainButton }, 0, 2);
  controlGrid.Children.Add (new Button { Text = "8", Style = plainButton }, 1, 2);
  controlGrid.Children.Add (new Button { Text = "9", Style = plainButton }, 2, 2);
  controlGrid.Children.Add (new Button { Text = "X", Style = orangeButton }, 3, 2);
  controlGrid.Children.Add (new Button { Text = "4", Style = plainButton }, 0, 3);
  controlGrid.Children.Add (new Button { Text = "5", Style = plainButton }, 1, 3);
  controlGrid.Children.Add (new Button { Text = "6", Style = plainButton }, 2, 3);
  controlGrid.Children.Add (new Button { Text = "-", Style = orangeButton }, 3, 3);
  controlGrid.Children.Add (new Button { Text = "1", Style = plainButton }, 0, 4);
  controlGrid.Children.Add (new Button { Text = "2", Style = plainButton }, 1, 4);
  controlGrid.Children.Add (new Button { Text = "3", Style = plainButton }, 2, 4);
  controlGrid.Children.Add (new Button { Text = "+", Style = orangeButton }, 3, 4);
  controlGrid.Children.Add (new Button { Text = ".", Style = plainButton }, 2, 5);
  controlGrid.Children.Add (new Button { Text = "=", Style = orangeButton }, 3, 5);

  var zeroButton = new Button { Text = "0", Style = plainButton };
  controlGrid.Children.Add (zeroButton, 0, 5);
  Grid.SetColumnSpan (zeroButton, 2);

  Content = controlGrid;
}