Xamarin.Forms グリッド
サンプルをダウンロードします
これは Grid 、その子を行と列に整理するレイアウトであり、比例または絶対サイズを持つことができます。 既定では、Grid には 1 つの行と 1 つの列が含まれます。 さらに、a Grid は、他の子レイアウトを含む親レイアウトとして使用できます。
レイアウトは Grid テーブルと混同しないでください。また、表形式データを表示するためのものではありません。 HTML テーブルとは異なり、a Grid はコンテンツをレイアウトするためのものです。 表形式データを表示する場合は、ListView、CollectionView、または TableView の使用を検討してください。
Grid クラスでは、次のプロパティが定義されます。
Columnの型int。親Grid内のビューの列の配置を示す添付プロパティです。 このプロパティの既定値は 0 です。 検証コールバックにより、プロパティが設定されると、その値が 0 以上であることが保証されます。ColumnDefinitions型ColumnDefinitionCollectionは、グリッド列のColumnDefinition幅を定義するオブジェクトの一覧です。ColumnSpacing(型double) は、グリッド列間の距離を示します。 このプロパティの既定値は、デバイスに依存しない 6 単位です。ColumnSpanの型int。これは、ビューが親Grid内にまたがる列の合計数を示す添付プロパティです。 このプロパティの既定値は 1 です。 検証コールバックにより、プロパティが設定されると、その値が 1 以上になります。Row、親内Gridのビューの行の配置を示す添付プロパティです。intこのプロパティの既定値は 0 です。 検証コールバックにより、プロパティが設定されると、その値が 0 以上であることが保証されます。RowDefinitions型RowDefinitionCollectionは、グリッド行のRowDefintion高さを定義するオブジェクトの一覧です。RowSpacing(typedouble) は、グリッド行間の距離を示します。 このプロパティの既定値は、デバイスに依存しない 6 単位です。RowSpanの種類int。これは、ビューが親Grid内にまたがる行の合計数を示す添付プロパティです。 このプロパティの既定値は 1 です。 検証コールバックにより、プロパティが設定されると、その値が 1 以上になります。
これらのプロパティはオブジェクトによって BindableProperty サポートされます。つまり、プロパティはデータ バインディングとスタイル設定のターゲットにすることができます。
クラスは Grid 、型のプロパティを Layout<T> 定義 Children するクラスから派生します IList<T>。 このプロパティはChildrenContentPropertyクラスのLayout<T>プロパティであるため、XAML から明示的に設定する必要はありません。
ヒント
レイアウトパフォーマンスを最大限に高めるには、「レイアウトパフォーマンスの 最適化」のガイドラインに従ってください。
行と列
既定では、a Grid には 1 つの行と 1 つの列が含まれます。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridTutorial.MainPage">
<Grid Margin="20,35,20,20">
<Label Text="By default, a Grid contains one row and one column." />
</Grid>
</ContentPage>
この例では、 Grid 1 つの場所に自動的に配置される 1 つの子 Label が含まれています。
a のGridレイアウト動作は、それぞれコレクションRowDefinitionとColumnDefinitionsオブジェクトであるプロパティを使用RowDefinitionsしてColumnDefinition定義できます。 これらのコレクションは、行と列の特性を Grid定義し、内の行ごとに 1 つの RowDefinition オブジェクトと、内の Grid列ごとに 1 つの ColumnDefinition オブジェクトを Grid含める必要があります。
クラスは、型GridLengthのプロパティをHeight定義し、クラスはColumnDefinition型のプロパティをWidth定義しますGridLength。RowDefinition 構造体は GridLength 、次の 3 つのメンバーを持つ、列挙体の観点から行の高さまたは列の GridUnitType 幅を指定します。
Absolute– 行の高さまたは列の幅は、デバイスに依存しない単位 (XAML の数値) の値です。Auto– 行の高さまたは列の幅は、セルの内容 (AutoXAML) に基づいて自動化されます。Star– 残った行の高さまたは列の幅は、比例して割り当てられます (数値の後に XAML で続きます*)。
GridプロパティAutoを持Heightつ行は、その行のビューの高さを垂直StackLayoutと同じ方法で制約します。 同様に、プロパティを持つ列はWidthAuto、水平方向StackLayoutとよく似ています。
注意事項
可能な限り少数の行と列がサイズに Auto 設定されていることを確認してください。 自動サイズ調整された行または列はそれぞれ、レイアウト エンジンに追加のレイアウト計算を実行させることになります。 その代わりに可能であれば、固定サイズの行と列を使用してください。 または、列挙値を持つ領域の比例量を占有するように行と列を GridUnitType.Star 設定します。
次の XAML は、3 つの行と 2 つの列で Grid 作成する方法を示しています。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.BasicGridPage"
Title="Basic Grid demo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
...
</Grid>
</ContentPage>
この例では、ページの Grid 高さである全体的な高さがあります。 Grid 3 行目の高さが 100 デバイスに依存しない単位であることを認識します。 その高さを独自の高さから減算し、星の前の数に基づいて、最初と 2 番目の行の間に残りの高さを比例して割り当てます。 この例では、最初の行の高さは 2 行目の 2 倍です。
2 つのColumnDefinitionオブジェクトはどちらも、画面の幅が 2 つの列の下で均等に分割されることを意味し、同じ1*に設定Width*されます。
重要
プロパティの RowDefinition.Height 既定値は *. 同様に、プロパティの ColumnDefinition.Width 既定値は *. したがって、これらの既定値が許容される場合は、これらのプロパティを設定する必要はありません。
子ビューは、プロパティとGrid.Row添付プロパティを持つ特定GridのセルにGrid.Column配置できます。 さらに、子ビューを複数の行と列にまたがるようにするには、プロパティとGrid.ColumnSpan添付プロパティをGrid.RowSpan使用します。
次の XAML は、同じ Grid 定義を示し、子ビューを特定 Grid のセルに配置します。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.BasicGridPage"
Title="Basic Grid demo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Color="Green" />
<Label Text="Row 0, Column 0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Column="1"
Color="Blue" />
<Label Grid.Column="1"
Text="Row 0, Column 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Color="Teal" />
<Label Grid.Row="1"
Text="Row 1, Column 0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="1"
Color="Purple" />
<Label Grid.Row="1"
Grid.Column="1"
Text="Row1, Column 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Grid.ColumnSpan="2"
Color="Red" />
<Label Grid.Row="2"
Grid.ColumnSpan="2"
Text="Row 2, Columns 0 and 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</ContentPage>
注意
Grid.RowプロパティとGrid.Columnプロパティはどちらも 0 からインデックスが作成されるためGrid.Row="2"、3 行目を参照しGrid.Column="1"、2 番目の列を参照します。 さらに、これらのプロパティの既定値は 0 なので、最初の行または最初の列 Gridを占める子ビューに設定する必要はありません。
この例では、3 行GridすべてがビューによってBoxViewLabel占有されます。 3 行目はデバイスに依存しない単位が 100 単位で、最初の 2 行が残りの領域を占めています (最初の行の高さは 2 行目の 2 倍です)。 2 つの列は幅が等しく、半分に分割されます Grid 。 BoxView 3 行目は両方の列にまたがっています。
さらに、ある子ビューでセルを Grid 共有することもできます。 子が XAML に表示される順序は、子が Grid. 前の例では、オブジェクトはオブジェクトのLabelBoxView上にレンダリングされるため、表示されるだけです。 オブジェクトが Label それらの上に BoxView レンダリングされた場合、オブジェクトは表示されません。
これに相当する C# コードを次に示します。
public class BasicGridPageCS : ContentPage
{
public BasicGridPageCS()
{
Grid grid = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(2, GridUnitType.Star) },
new RowDefinition(),
new RowDefinition { Height = new GridLength(100) }
},
ColumnDefinitions =
{
new ColumnDefinition(),
new ColumnDefinition()
}
};
// Row 0
// The BoxView and Label are in row 0 and column 0, and so only needs to be added to the
// Grid.Children collection to get default row and column settings.
grid.Children.Add(new BoxView
{
Color = Color.Green
});
grid.Children.Add(new Label
{
Text = "Row 0, Column 0",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
});
// This BoxView and Label are in row 0 and column 1, which are specified as arguments
// to the Add method.
grid.Children.Add(new BoxView
{
Color = Color.Blue
}, 1, 0);
grid.Children.Add(new Label
{
Text = "Row 0, Column 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 0);
// Row 1
// This BoxView and Label are in row 1 and column 0, which are specified as arguments
// to the Add method overload.
grid.Children.Add(new BoxView
{
Color = Color.Teal
}, 0, 1, 1, 2);
grid.Children.Add(new Label
{
Text = "Row 1, Column 0",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 0, 1, 1, 2); // These arguments indicate that that the child element goes in the column starting at 0 but ending before 1.
// They also indicate that the child element goes in the row starting at 1 but ending before 2.
grid.Children.Add(new BoxView
{
Color = Color.Purple
}, 1, 2, 1, 2);
grid.Children.Add(new Label
{
Text = "Row1, Column 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 2, 1, 2);
// Row 2
// Alternatively, the BoxView and Label can be positioned in cells with the Grid.SetRow
// and Grid.SetColumn methods.
BoxView boxView = new BoxView { Color = Color.Red };
Grid.SetRow(boxView, 2);
Grid.SetColumnSpan(boxView, 2);
Label label = new Label
{
Text = "Row 2, Column 0 and 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
Grid.SetRow(label, 2);
Grid.SetColumnSpan(label, 2);
grid.Children.Add(boxView);
grid.Children.Add(label);
Title = "Basic Grid demo";
Content = grid;
}
}
コードでは、オブジェクトの高さとオブジェクトの RowDefinition 幅を指定するには、構造体の ColumnDefinition 値を GridLength 使用します。多くの場合、列挙型と GridUnitType 組み合わせて使用します。
上記のコード例では、子を Grid追加し、そのセルが存在するセルを指定するためのいくつかの異なる方法も示しています。 左、右、上、および下の引数を指定するオーバーロードを使用Addする場合、左引数と上引数は常にセルGridを参照し、右と下の引数は外側Gridのセルを参照するように見えます。 これは、 右 引数は常に 左 引数より大きく、 下 の引数は常に 最上位 の引数より大きくする必要があるためです。 2x2 Gridを前提とする次の例では、両方 Add のオーバーロードを使用する同等のコードを示しています。
// left, top
grid.Children.Add(topLeft, 0, 0); // first column, first row
grid.Children.Add(topRight, 1, 0); // second column, first tow
grid.Children.Add(bottomLeft, 0, 1); // first column, second row
grid.Children.Add(bottomRight, 1, 1); // second column, second row
// left, right, top, bottom
grid.Children.Add(topLeft, 0, 1, 0, 1); // first column, first row
grid.Children.Add(topRight, 1, 2, 0, 1); // second column, first tow
grid.Children.Add(bottomLeft, 0, 1, 1, 2); // first column, second row
grid.Children.Add(bottomRight, 1, 2, 1, 2); // second column, second row
注意
さらに、子ビューは、1 つの行または 1 つの列GridにGridAddHorizontal子を追加する with and AddVertical メソッドに追加できます。 これらの Grid 呼び出しが行われると、行または列が展開され、子が正しいセルに自動的に配置されます。
行と列の定義を簡略化する
XAML では、各行と列の定義RowDefinitionとオブジェクトをGrid回避する簡略化された構文を使用して、a の行とColumnDefinition列の特性を指定できます。 代わりに、RowDefinitionsプロパティをColumnDefinitionsコンマ区切GridUnitTypeりの値を含む文字列に設定できます。この文字列には、作成RowDefinitionとColumnDefinitionオブジェクトに組み込Xamarin.Formsまれている型コンバーターがあります。
<Grid RowDefinitions="1*, Auto, 25, 14, 20"
ColumnDefinitions="*, 2*, Auto, 300">
...
</Grid>
この例では、 Grid 5 つの行と 4 つの列があります。 3 行目、4 行目、5 行目は絶対高さに設定され、2 行目はコンテンツに自動的にサイズ変更されます。 残りの高さは、最初の行に割り当てられます。
4 番目の列は絶対幅に設定され、3 番目の列はその内容に自動的にサイズ設定されます。 残りの幅は、星の前の数に基づいて、最初と 2 番目の列の間に比例して割り当てられます。 この例では、2 番目の列の幅は最初の列の幅の 2 倍です (同じ1*であるため*)。
行と列の間のスペース
既定では、 Grid 行はデバイスに依存しない 6 つの領域で区切られます。 同様に、 Grid 列はデバイスに依存しない 6 つの領域で区切られます。 これらの既定値は、それぞれ、およびColumnSpacingプロパティをRowSpacing設定することで変更できます。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.GridSpacingPage"
Title="Grid spacing demo">
<Grid RowSpacing="0"
ColumnSpacing="0">
..
</Grid>
</ContentPage>
次の使用例は、 Grid 行と列の間にスペースがない文字列を作成します。
ヒント
セルの RowSpacing 内容を重ね合わせるために、プロパティと ColumnSpacing プロパティを負の値に設定できます。
これに相当する C# コードを次に示します。
public GridSpacingPageCS()
{
Grid grid = new Grid
{
RowSpacing = 0,
ColumnSpacing = 0,
// ...
};
// ...
Content = grid;
}
アラインメント
a 内のGrid子ビューは、プロパティによってVerticalOptionsセル内にHorizontalOptions配置できます。 これらのプロパティは、構造体から次のフィールドに LayoutOptions 設定できます。
重要
構造体内のフィールドはAndExpands、オブジェクトにのみ適用できますStackLayout。LayoutOptions
次の XAML では、 Grid 9 つの等しいサイズのセルを作成し、異なる配置を持つ各セルに a を配置 Label します。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.GridAlignmentPage"
Title="Grid alignment demo">
<Grid RowSpacing="0"
ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Color="AliceBlue" />
<Label Text="Upper left"
HorizontalOptions="Start"
VerticalOptions="Start" />
<BoxView Grid.Column="1"
Color="LightSkyBlue" />
<Label Grid.Column="1"
Text="Upper center"
HorizontalOptions="Center"
VerticalOptions="Start"/>
<BoxView Grid.Column="2"
Color="CadetBlue" />
<Label Grid.Column="2"
Text="Upper right"
HorizontalOptions="End"
VerticalOptions="Start" />
<BoxView Grid.Row="1"
Color="CornflowerBlue" />
<Label Grid.Row="1"
Text="Center left"
HorizontalOptions="Start"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="1"
Color="DodgerBlue" />
<Label Grid.Row="1"
Grid.Column="1"
Text="Center center"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="2"
Color="DarkSlateBlue" />
<Label Grid.Row="1"
Grid.Column="2"
Text="Center right"
HorizontalOptions="End"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Color="SteelBlue" />
<Label Grid.Row="2"
Text="Lower left"
HorizontalOptions="Start"
VerticalOptions="End" />
<BoxView Grid.Row="2"
Grid.Column="1"
Color="LightBlue" />
<Label Grid.Row="2"
Grid.Column="1"
Text="Lower center"
HorizontalOptions="Center"
VerticalOptions="End" />
<BoxView Grid.Row="2"
Grid.Column="2"
Color="BlueViolet" />
<Label Grid.Row="2"
Grid.Column="2"
Text="Lower right"
HorizontalOptions="End"
VerticalOptions="End" />
</Grid>
</ContentPage>
この例では、各行の Label オブジェクトはすべて同じ垂直方向に配置されますが、水平方向の配置は異なります。 または、これは、各列内のオブジェクトが Label 同じように水平方向に配置されているが、異なる垂直方向の配置を使用すると考えることができます。
これに相当する C# コードを次に示します。
public class GridAlignmentPageCS : ContentPage
{
public GridAlignmentPageCS()
{
Grid grid = new Grid
{
RowSpacing = 0,
ColumnSpacing = 0,
RowDefinitions =
{
new RowDefinition(),
new RowDefinition(),
new RowDefinition()
},
ColumnDefinitions =
{
new ColumnDefinition(),
new ColumnDefinition(),
new ColumnDefinition()
}
};
// Row 0
grid.Children.Add(new BoxView
{
Color = Color.AliceBlue
});
grid.Children.Add(new Label
{
Text = "Upper left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start
});
grid.Children.Add(new BoxView
{
Color = Color.LightSkyBlue
}, 1, 0);
grid.Children.Add(new Label
{
Text = "Upper center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Start
}, 1, 0);
grid.Children.Add(new BoxView
{
Color = Color.CadetBlue
}, 2, 0);
grid.Children.Add(new Label
{
Text = "Upper right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Start
}, 2, 0);
// Row 1
grid.Children.Add(new BoxView
{
Color = Color.CornflowerBlue
}, 0, 1);
grid.Children.Add(new Label
{
Text = "Center left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center
}, 0, 1);
grid.Children.Add(new BoxView
{
Color = Color.DodgerBlue
}, 1, 1);
grid.Children.Add(new Label
{
Text = "Center center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 1);
grid.Children.Add(new BoxView
{
Color = Color.DarkSlateBlue
}, 2, 1);
grid.Children.Add(new Label
{
Text = "Center right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center
}, 2, 1);
// Row 2
grid.Children.Add(new BoxView
{
Color = Color.SteelBlue
}, 0, 2);
grid.Children.Add(new Label
{
Text = "Lower left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.End
}, 0, 2);
grid.Children.Add(new BoxView
{
Color = Color.LightBlue
}, 1, 2);
grid.Children.Add(new Label
{
Text = "Lower center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.End
}, 1, 2);
grid.Children.Add(new BoxView
{
Color = Color.BlueViolet
}, 2, 2);
grid.Children.Add(new Label
{
Text = "Lower right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.End
}, 2, 2);
Title = "Grid alignment demo";
Content = grid;
}
}
入れ子になった Grid オブジェクト
A Grid は、入れ子になった子オブジェクトまたはその他の子 Grid レイアウトを含む親レイアウトとして使用できます。 オブジェクトを Grid 入れ子にすると、 Grid.Rowプロパティ 、 Grid.Column、 Grid.RowSpanおよび Grid.ColumnSpan アタッチされたプロパティは、常に親 Grid内のビューの位置を参照します。
次の XAML は、オブジェクトの入れ子の例を Grid 示しています。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:GridDemos.Converters"
x:Class="GridDemos.Views.ColorSlidersGridPage"
Title="Nested Grids demo">
<ContentPage.Resources>
<converters:DoubleToIntConverter x:Key="doubleToInt" />
<Style TargetType="Label">
<Setter Property="HorizontalTextAlignment"
Value="Center" />
</Style>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView x:Name="boxView"
Color="Black" />
<Grid Grid.Row="1"
Margin="20">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Slider x:Name="redSlider"
ValueChanged="OnSliderValueChanged" />
<Label Grid.Row="1"
Text="{Binding Source={x:Reference redSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Red = {0}'}" />
<Slider x:Name="greenSlider"
Grid.Row="2"
ValueChanged="OnSliderValueChanged" />
<Label Grid.Row="3"
Text="{Binding Source={x:Reference greenSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Green = {0}'}" />
<Slider x:Name="blueSlider"
Grid.Row="4"
ValueChanged="OnSliderValueChanged" />
<Label Grid.Row="5"
Text="{Binding Source={x:Reference blueSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Blue = {0}'}" />
</Grid>
</Grid>
</ContentPage>
この例では、ルート Grid レイアウトには最初の行に 1 BoxView 行、2 行目に子 Grid が含まれています。 子 Grid には、 Slider によって表示される BoxView色を操作するオブジェクトと、 Label それぞれの Slider値を表示するオブジェクトが含まれています。
重要
オブジェクトやその他のレイアウトを入れ子 Grid にするほど、入れ子になったレイアウトがパフォーマンスに影響します。 詳細については、「 正しいレイアウトを選択する」を参照してください。
これに相当する C# コードを次に示します。
public class ColorSlidersGridPageCS : ContentPage
{
BoxView boxView;
Slider redSlider;
Slider greenSlider;
Slider blueSlider;
public ColorSlidersGridPageCS()
{
// Create an implicit style for the Labels
Style labelStyle = new Style(typeof(Label))
{
Setters =
{
new Setter { Property = Label.HorizontalTextAlignmentProperty, Value = TextAlignment.Center }
}
};
Resources.Add(labelStyle);
// Root page layout
Grid rootGrid = new Grid
{
RowDefinitions =
{
new RowDefinition(),
new RowDefinition()
}
};
boxView = new BoxView { Color = Color.Black };
rootGrid.Children.Add(boxView);
// Child page layout
Grid childGrid = new Grid
{
Margin = new Thickness(20),
RowDefinitions =
{
new RowDefinition(),
new RowDefinition(),
new RowDefinition(),
new RowDefinition(),
new RowDefinition(),
new RowDefinition()
}
};
DoubleToIntConverter doubleToInt = new DoubleToIntConverter();
redSlider = new Slider();
redSlider.ValueChanged += OnSliderValueChanged;
childGrid.Children.Add(redSlider);
Label redLabel = new Label();
redLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Red = {0}", source: redSlider));
Grid.SetRow(redLabel, 1);
childGrid.Children.Add(redLabel);
greenSlider = new Slider();
greenSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(greenSlider, 2);
childGrid.Children.Add(greenSlider);
Label greenLabel = new Label();
greenLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Green = {0}", source: greenSlider));
Grid.SetRow(greenLabel, 3);
childGrid.Children.Add(greenLabel);
blueSlider = new Slider();
blueSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(blueSlider, 4);
childGrid.Children.Add(blueSlider);
Label blueLabel = new Label();
blueLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Blue = {0}", source: blueSlider));
Grid.SetRow(blueLabel, 5);
childGrid.Children.Add(blueLabel);
// Place the child Grid in the root Grid
rootGrid.Children.Add(childGrid, 0, 1);
Title = "Nested Grids demo";
Content = rootGrid;
}
void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
{
boxView.Color = new Color(redSlider.Value, greenSlider.Value, blueSlider.Value);
}
}