Xamarin.Forms Mřížky

Stažení ukázky

Grid" data-linktype="relative-path">Xamarin.Forms Grid" title=" Xamarin.Forms Grid" data-linktype="relative-path"/>

je Grid rozložení, které uspořádá své děti do řádků a sloupců, které mohou mít proporcionální nebo absolutní velikosti. Ve výchozím nastavení obsahuje Grid jeden řádek a jeden sloupec. Kromě toho lze použít jako nadřazené rozložení, Grid které obsahuje další podřízené rozložení.

Rozložení Grid by nemělo být zaměňováno s tabulkami a nemělo by prezentovat tabulková data. Na rozdíl od tabulek Grid HTML je třída určená k rozložení obsahu. Pokud chcete zobrazit tabulková data, zvažte použití ovládacího prvku ListView,CollectionViewnebo TableView.

Třída Grid definuje následující vlastnosti:

• Columntypu , což je připojená vlastnost, která označuje zarovnání sloupce int zobrazení v nadřazeném objektu Grid . Výchozí hodnota této vlastnosti je 0. Zpětné volání ověření zajišťuje, že při nastavení vlastnosti je její hodnota větší nebo rovna 0.
• data-linktype="absolute-path">typu je seznam objektů, které definují šířku sloupců ColumnDefinitionsColumnDefinitionCollectionColumnDefinition mřížky.
• Xamarin_Forms _Grid_ColumnSpacing" data-linktype="absolute-path">typu označuje vzdálenost ColumnSpacing mezi double sloupci mřížky. Výchozí hodnota této vlastnosti je 6 jednotek nezávislých na zařízení.
• ColumnSpan, typu , což je připojená vlastnost, která označuje celkový počet sloupců, které zobrazení int zahrnuje v rámci nadřazeného objektu Grid . Výchozí hodnota této vlastnosti je 1. Zpětné volání ověření zajišťuje, že při nastavení vlastnosti je její hodnota větší nebo rovna 1.
• Rowtypu , což je připojená vlastnost, která označuje zarovnání řádků int zobrazení v rámci nadřazeného objektu Grid . Výchozí hodnota této vlastnosti je 0. Zpětné volání ověření zajišťuje, že při nastavení vlastnosti je její hodnota větší nebo rovna 0.
• Xamarin_Forms _Grid_RowDefinitions" data-linktype="absolute-path">typu je seznam objektů, které definují výšku řádků RowDefinitionsRowDefinitionCollectionRowDefintion mřížky.
• Xamarin_Forms _Grid_RowSpacing" data-linktype="absolute-path">typu označuje vzdálenost mezi řádky RowSpacingdouble mřížky. Výchozí hodnota této vlastnosti je 6 jednotek nezávislých na zařízení.
• RowSpan, typu , což je připojená vlastnost, která označuje celkový počet řádků, které zobrazení int zahrnuje v rámci nadřazeného objektu Grid . Výchozí hodnota této vlastnosti je 1. Zpětné volání ověření zajišťuje, že při nastavení vlastnosti je její hodnota větší nebo rovna 1.

Tyto vlastnosti jsou zálohovány objekty, což znamená, že vlastnosti mohou být cíle datových vazeb a BindableProperty se stylem.

Třída Grid je odvozena z Layout<T> třídy , která definuje vlastnost typu ChildrenIList<T> . Vlastnost je třída , a proto není nutné explicitně ChildrenContentProperty nastavovat z Layout<T> XAML.

Řádky a sloupce

Ve výchozím nastavení obsahuje Grid jeden řádek a jeden sloupec:

<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>

V tomto příkladu obsahuje jeden podřízený objekt, který je automaticky Grid umístěný v jednom Label umístění:

Chování rozložení lze definovat pomocí Xamarin_Forms GridGrid _Grid_RowDefinitions" data-linktype="absolute-path">and RowDefinitions Xamarin_Forms _Grid_ColumnDefinitions" data-linktype="absolute-path">ColumnDefinitions properties, RowDefinitionColumnDefinition což jsou kolekce objektů a . Tyto kolekce definují vlastnosti řádků a sloupců objektu a měly by obsahovat jeden objekt pro každý řádek v objektu a jeden objekt Grid pro každý sloupec v objektu RowDefinitionGridColumnDefinitionGrid .

Třída definuje vlastnost RowDefinition Xamarin_Forms RowDefinition _RowDefinition_Height" data-linktype="absolute-path">typu a třída definuje Height vlastnost Xamarin_Forms GridLengthColumnDefinition _ColumnDefinition_Width" data-linktype="absolute-path">Width typu GridLength . Struktura určuje výšku řádku nebo šířku sloupce z hlediska výčtu, který GridLengthGridUnitType má tři členy:

• Absolute – výška řádku nebo šířka sloupce je hodnota v jednotkách nezávislých na zařízení (číslo v jazyce XAML).
• Auto – výška řádku nebo šířka sloupce se automaticky velikostí na základě obsahu buňky ( Auto v jazyce XAML).
• Star – Výška levého řádku nebo šířka sloupce je přidělena proporcionálně (číslo následované v * jazyce XAML).

Řádek s vlastností omezuje výšku zobrazení v tomto řádku stejným GridHeight způsobem jako Auto svisle StackLayout . Podobně sloupec s vlastností funguje WidthAuto podobně jako vodorovný objekt StackLayout .

Následující kód XAML ukazuje, jak vytvořit objekt se třemi řádky a Grid dvěma sloupci:

<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>

V tomto příkladu Grid má objekt celkovou výšku, která je výška stránky. Ví, Grid že výška třetího řádku je 100 jednotek nezávislých na zařízení. Odečte výšku od vlastní výšky a přidělí zbývající výšku úměrně mezi prvním a druhým řádem na základě čísla před hvězdičkou. V tomto příkladu je výška prvního řádku dvojnásobná než výška druhého řádku.

Oba objekty nastaví ColumnDefinition Xamarin_Forms ColumnDefinition _ColumnDefinition_Width" data-linktype="absolute-path">na , Width* což 1* je stejné jako , což znamená, že šířka obrazovky je rozdělena stejně pod dva sloupce.

Podřízené zobrazení může být umístěno v konkrétních Grid buňkách s Grid.Column připojenými Grid.Row vlastnostmi a . Kromě toho použijte vlastnosti a připojené k podřízeným zobrazením napříč více řádky a Grid.RowSpanGrid.ColumnSpan sloupci.

Následující kód XAML ukazuje stejnou definici a také Grid umístí podřízené zobrazení do konkrétních Grid buněk:

<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>

V tomto příkladu jsou všechny Grid tři řádky zabírána BoxViewLabel zobrazeními a . Třetí řádek je 100 jednotek nezávislých na zařízeních. První dva řádky zabírají zbývající místo (první řádek je dvakrát vyšší než druhý řádek). Oba sloupce mají stejnou šířku a dělí na Grid polovinu. Na BoxView třetím řádku jsou oba sloupce.

Kromě toho mohou podřízené zobrazení v Grid objektech sdílet buňky. Pořadí, ve které se v jazyce XAML zobrazují děti, je pořadí, ve které jsou tyto děti umístěné v Grid . V předchozím příkladu jsou Label objekty viditelné pouze proto, že jsou vykresleny nad BoxView objekty. Objekty Label by nebyly viditelné, pokud BoxView by byly objekty vykresleny nad nimi.

Ekvivalentní kód jazyka C# je:

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;
    }
}

Pokud chcete v kódu určit výšku objektu a šířku objektu, použijte hodnoty struktury, často v kombinaci s RowDefinitionColumnDefinitionGridLengthGridUnitType výčtem.

Výše uvedený příklad kódu také ukazuje několik různých přístupů k přidávání dětí do a určení buněk, ve kterých Grid se nacházejí. Při použití přetížení, které určuje argumenty AddAdd, right , topa bottom, zatímco argumenty vlevo a nahoře budou vždy odkazovat na buňky v rámci objektu , zobrazí se pravé a dolní argumenty odkazovat na buňky, které jsou mimo . Je to proto, že pravý argument musí být vždy větší než levý argument a dolní argument musí být vždy větší než hlavní argument. Následující příklad, který předpokládá 2x2 Grid , zobrazuje ekvivalentní kód s použitím obou Add přetížení:

// 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

Zjednodušení definic řádků a sloupců

V jazyce XAML je možné zadat vlastnosti řádků a sloupců pomocí zjednodušené syntaxe, která zabraňuje definování objektů a pro každý Grid řádek a RowDefinitionColumnDefinition sloupec. Místo toho lze vlastnosti Xamarin_Forms _Grid_RowDefinitions" data-linktype="absolute-path">a RowDefinitions Xamarin_Forms RowDefinitions _Grid_ColumnDefinitions" data-linktype="absolute-path">ColumnDefinitionsGridUnitTypeXamarin.FormsRowDefinition nastavit na ColumnDefinition řetězce obsahující hodnoty oddělené čárkami, ze kterých se konvertory typů integrované do objektů a vytvářejí:

<Grid RowDefinitions="1*, Auto, 25, 14, 20"
      ColumnDefinitions="*, 2*, Auto, 300">
    ...
</Grid>

V tomto příkladu má Grid tabulka pět řádků a čtyři sloupce. Třetí, dopředné a páté řádky jsou nastaveny na absolutní výšku a druhý řádek automaticky nastaví velikost obsahu. Zbývající výška se pak přidělí k prvnímu řádku.

Sloupec forth je nastavený na absolutní šířku a třetí sloupec automaticky nastaví velikost obsahu. Zbývající šířka je přidělena proporcionálně mezi prvním a druhým sloupcem na základě čísla před hvězdičkou. V tomto příkladu je šířka druhého sloupce dvojnásobná než šířka prvního sloupce (protože je * stejná jako 1* ).

Mezera mezi řádky a sloupci

Ve výchozím nastavení Grid jsou řádky oddělené 6 jednotkami místa nezávislými na zařízení. Podobně jsou Grid sloupce oddělené 6 jednotkami místa nezávislými na zařízení. Tyto výchozí hodnoty můžete změnit nastavením Xamarin_Forms _Grid_RowSpacing" data-linktype="absolute-path">and RowSpacing Xamarin_Forms RowSpacing _Grid_ColumnSpacing" data-linktype="absolute-path">ColumnSpacing properties:

<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>

Tento příklad vytvoří Grid , který nemá žádné mezery mezi jeho řádky a sloupci:

mřížce, mezer mezi buňkami

Ekvivalentní kód jazyka C#:

public GridSpacingPageCS()
{
    Grid grid = new Grid
    {
        RowSpacing = 0,
        ColumnSpacing = 0,
        // ...
    };
    // ...

    Content = grid;
}

Zarovnání

Podřízená zobrazení v objektu Grid lze umístit do svých buněk pomocí Xamarin_Forms Grid _View_HorizontalOptions "data-LINKTYPE =" absolutní cesta ">HorizontalOptions a Xamarin_Forms _View_VerticalOptions" data-LINKTYPE = "absolutní cesta" >VerticalOptions Vlastnosti. Tyto vlastnosti lze nastavit na následující pole z LayoutOptions struktury:

• Start
• Center
• End
• Fill

Následující kód XAML vytvoří Grid s devíti buňkami se stejnou velikostí a umístí Label do každé buňky jiné zarovnání:

<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>

V tomto příkladu Label jsou objekty v každém řádku stejně zarovnané svisle, ale používají jiné vodorovné zarovnání. Alternativně lze to představit jako Label objekty v jednotlivých sloupcích, které jsou stejně zarovnané vodorovně, ale s použitím různých svislých zarovnání:

mřížce

Ekvivalentní kód jazyka 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;
    }
}

Vnořené objekty mřížky

GridLze použít jako nadřazené rozložení, které obsahuje vnořené podřízené Grid objekty nebo jiná podřízená rozložení. Při vnořování Grid objektů Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpan vždy odkazují na umístění zobrazení v rámci své nadřazené položky Grid .

Následující kód XAML ukazuje příklad vnoření Grid objektů:

<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>

V tomto příkladu kořenové Grid rozložení obsahuje BoxView v prvním řádku a podřízenou položku Grid ve druhém řádku. Podřízená položka Grid obsahuje Slider objekty, které pracují s barvou zobrazenými BoxViewLabel objekty a objekty, které zobrazují hodnotu každé Slider :

vnořených mřížky vnořené mřížky

Ekvivalentní kód jazyka 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);
    }
}

Související odkazy

• Ukázky mřížky (ukázka)
• Layout Options in Xamarin.Forms
• Choose a Xamarin.Forms Layout
• Improve Xamarin.Forms App Performance