Поделиться через

Сетка

  • Статья

Browse sample. Обзор примера

.NET MAUI Grid.

Многоплатформенный пользовательский интерфейс приложения .NET (.NET MAUI) Grid— это макет, который упорядочивает дочерние элементы в строки и столбцы, которые могут иметь пропорциональные или абсолютные размеры. По умолчанию Grid содержит одну строку и один столбец. Кроме того, Grid можно использовать в качестве родительского макета, содержащего другие дочерние макеты.

Не Grid следует путать с таблицами и не предназначен для представления табличных данных. В отличие от HTML-таблиц, Grid он предназначен для размещения содержимого. Для отображения табличных данных рекомендуется использовать ListView или CollectionView.

Класс Grid определяет следующие свойства:

  • ColumnintТип , который является присоединенным свойством, указывающим выравнивание столбцов представления в родительском Gridэлементе. Значение этого свойства по умолчанию равно 0. Обратный вызов проверки гарантирует, что при установке свойства его значение больше или равно 0.
  • ColumnDefinitionsColumnDefinitionCollectionТип — это список объектов, определяющих ColumnDefinition ширину столбцов сетки.
  • ColumnSpacingdoubleТип , указывает расстояние между столбцами сетки. Значение этого свойства по умолчанию равно 0.
  • ColumnSpanintТип , который является присоединенным свойством, указывающим общее количество столбцов, охватывающих представление в родительском объектеGrid. Значение этого свойства по умолчанию равно 1. Обратный вызов проверки гарантирует, что при установке свойства его значение больше или равно 1.
  • RowintТип , который является присоединенным свойством, которое указывает выравнивание строк представления в родительском элементеGrid. Значение этого свойства по умолчанию равно 0. Обратный вызов проверки гарантирует, что при установке свойства его значение больше или равно 0.
  • RowDefinitionsRowDefinitionCollectionТип — это список объектов, определяющих RowDefinition высоту строк сетки.
  • RowSpacingdoubleТип , указывает расстояние между строками сетки. Значение этого свойства по умолчанию равно 0.
  • RowSpanintТип , который является присоединенным свойством, указывающим общее количество строк, охватываемых представлением в родительском объектеGrid. Значение этого свойства по умолчанию равно 1. Обратный вызов проверки гарантирует, что при установке свойства его значение больше или равно 1.

Эти свойства поддерживаются объектами, что означает, что свойства могут быть целевыми BindableProperty объектами привязки данных и стилем.

Строки и столбцы

По умолчанию содержит Grid одну строку и один столбец:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             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>

В этом примере содержит один дочерний элементLabel, Grid который автоматически размещается в одном расположении:

Default .NET MAUI Grid layout.

Поведение макета Grid можно определить с помощью RowDefinitions свойств и ColumnDefinitions коллекций RowDefinition и ColumnDefinition объектов соответственно. Эти коллекции определяют характеристики строк и столбцов Gridи должны содержать один RowDefinition объект для каждой строки в строке Gridи один ColumnDefinition объект для каждого столбца в столбце Grid.

Класс RowDefinition определяет Height свойство, тип GridLengthи ColumnDefinition класс определяет Width свойство типа GridLength. Структуру GridLength задает высоту строки или ширину столбца GridUnitType с точки зрения перечисления, которая содержит три элемента:

  • Absolute — высота строки или ширина столбца — это значение в единицах, независимых от устройства (число в XAML).
  • Auto — высота строки или ширина столбца автоматически определяется с учетом содержимого ячейки (Auto в XAML).
  • Star — слева высота строки или ширина столбца выделяется пропорционально (число, * за которым следует в XAML).

Grid Строка со свойством Height Auto ограничивает высоту представлений в этой строке так же, как вертикальнаяStackLayout. Аналогичным образом столбец со свойством Width Auto работает так же, как горизонтальная StackLayout.

Внимание

Попробуйте убедиться, что для Auto размера задано максимальное количество строк и столбцов. Из-за каждой строки или столбца с автоматическим размером обработчик макета будет выполнять дополнительные вычисления макета. Если возможно, используйте строки и столбцы фиксированного размера. Кроме того, задайте для строк и столбцов пропорциональный объем пространства со GridUnitType.Star значением перечисления.

В следующем XAML показано, как создать Grid с тремя строками и двумя столбцами:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridDemos.Views.XAML.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 , что высота третьей строки составляет 100 единиц, независимых от устройства. Он вычитает высоту из собственной высоты и выделяет оставшуюся высоту пропорционально между первой и второй строками на основе числа перед звездой. В этом примере высота первой строки в два раза превышает высоту второй строки.

Оба ColumnDefinition объекта задают Width *значение , что 1*совпадает с тем, что ширина экрана разделена одинаково под двумя столбцами.

Важно!

Значение RowDefinition.Height свойства по умолчанию — *. Аналогичным образом значение ColumnDefinition.Width свойства по умолчанию равно *. Поэтому не обязательно задавать эти свойства в случаях, когда эти значения по умолчанию допустимы.

Дочерние представления можно размещать в определенных Grid ячейках со Grid.Column свойствами и Grid.Row присоединенными свойствами. Кроме того, чтобы сделать дочерние представления диапазоном между несколькими строками и столбцами, используйте Grid.RowSpan Grid.ColumnSpan и присоединенные свойства.

В следующем коде XAML показано то же Grid определение, а также положение дочерних представлений в определенных Grid ячейках:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridDemos.Views.XAML.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" ссылается на третью строку во время Grid.Column="1" ссылки на второй столбец. Кроме того, оба этих свойства имеют значение по умолчанию 0, поэтому не нужно задавать дочерние представления, которые занимают первую строку или первый столбец Grid.

В этом примере все три Grid строки занимаются представлениямиBoxView.Label Третья строка составляет 100 единиц, независимых от устройства, при этом первые две строки занимают оставшееся пространство (первая строка в два раза выше, чем вторая строка). Два столбца равны по ширине и делятся Grid на половину. В BoxView третьей строке охватываются оба столбца:

Basic .NET MAUI Grid layout.

Кроме того, дочерние Grid представления в ячейках могут совместно использовать. Порядок отображения дочерних элементов в XAML — это порядок, в который помещаются Gridдочерние элементы. В предыдущем примере объекты отображаются только из-за того, Label что они отображаются на вершине BoxView объектов. Объекты Label не будут видны, если BoxView объекты были отрисованы поверх них.

Эквивалентный код на C# выглядит так:

public class BasicGridPage : ContentPage
{
    public BasicGridPage()
    {
        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 need to be added to the
        // Grid to obtain the default row and column settings.
        grid.Add(new BoxView
        {
            Color = Colors.Green
        });
        grid.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.Add(new BoxView
        {
            Color = Colors.Blue
        }, 1, 0);
        grid.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.Add(new BoxView
        {
            Color = Colors.Teal
        }, 0, 1);
        grid.Add(new Label
        {
            Text = "Row 1, Column 0",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        }, 0, 1);

        // This BoxView and Label are in row 1 and column 1, which are specified as arguments
        // to the Add method overload.
        grid.Add(new BoxView
        {
            Color = Colors.Purple
        }, 1, 1);
        grid.Add(new Label
        {
            Text = "Row1, Column 1",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        }, 1, 1);

        // Row 2
        // Alternatively, the BoxView and Label can be positioned in cells with the Grid.SetRow
        // and Grid.SetColumn methods. Here, the Grid.SetColumnSpan method is used to span two columns.
        BoxView boxView = new BoxView { Color = Colors.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.Add(boxView);
        grid.Add(label);

        Title = "Basic Grid demo";
        Content = grid;
    }
}

В коде для указания высоты RowDefinition объекта и ширины ColumnDefinition объекта используются значения GridLength структуры, часто в сочетании с GridUnitType перечислением.

Примечание.

Grid также определяет AddWithSpan метод расширения, который добавляет представление к Grid указанной строке и столбцу с указанными диапазонами строк и столбцов.

Упрощение определений строк и столбцов

В XAML характеристики строки и столбца Grid можно указать с помощью упрощенного синтаксиса, который позволяет избежать необходимости определять и ColumnDefinition объекты RowDefinition для каждой строки и столбца. Вместо этого RowDefinitions ColumnDefinitions можно задать строки, содержащие значения с разделителями-запятыми GridUnitType , из которых преобразователи типов, встроенные в .NET MAUI, создают RowDefinition и ColumnDefinition объекты:

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

В этом примере Grid имеется пять строк и четыре столбца. Третий, четвертый и пятый строки имеют абсолютные высоты, при этом вторая строка автоматически определяет размер содержимого. Оставшаяся высота затем выделяется первой строке.

Четвертый столбец имеет абсолютную ширину с автоматическим изменением размера третьего столбца в его содержимое. Оставшаяся ширина выделяется пропорционально между первым и вторым столбцами на основе числа перед звездой. В этом примере ширина второго столбца в два раза превышает ширину первого столбца (так как * идентична 1*).

Пространство между строками и столбцами

По умолчанию Grid строки и столбцы не имеют места между ними. Это можно изменить, задав RowSpacing ColumnSpacing и свойства соответственно:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridDemos.Views.XAML.GridSpacingPage"
             Title="Grid spacing demo">
    <Grid RowSpacing="6"
          ColumnSpacing="6">
        ...
    </Grid>
</ContentPage>

В этом примере создается Grid строка и столбцы, разделенные на 6 единиц пространства, независимых от устройства:

.NET MAUI Grid with spacing between cells.

Совет

ColumnSpacing Свойства RowSpacing можно задать для отрицательных значений, чтобы сделать содержимое ячейки перекрывающимся.

Эквивалентный код на C# выглядит так:

public class GridSpacingPage : ContentPage
{
    public GridSpacingPage()
    {
        Grid grid = new Grid
        {
            RowSpacing = 6,
            ColumnSpacing = 6,
            ...
        };
        ...

        Content = grid;
    }
}

Точное понимание

Дочерние представления в Grid ячейках могут размещаться по свойствам и VerticalOptions ячейкамHorizontalOptions. Эти свойства можно задать в следующих полях из LayoutOptions структуры:

  • Start
  • Center
  • End
  • Fill

Следующий XAML создает Grid с девятью равными размерами ячеек и помещает Label в каждую ячейку другую выравнивание:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridDemos.Views.XAML.GridAlignmentPage"
             Title="Grid alignment demo">
    <Grid>
        <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 объектами в каждом столбце одинаково выровнены по горизонтали, но с использованием разных вертикальных выравниваний:

Cell alignment in a .NET MAUI Grid.

Эквивалентный код на C# выглядит так:

public class GridAlignmentPage : ContentPage
{
    public GridAlignmentPage()
    {
        Grid grid = new Grid
        {
            RowDefinitions =
            {
                new RowDefinition(),
                new RowDefinition(),
                new RowDefinition()
            },
            ColumnDefinitions =
            {
                new ColumnDefinition(),
                new ColumnDefinition(),
                new ColumnDefinition()
            }
        };

        // Row 0
        grid.Add(new BoxView
        {
            Color = Colors.AliceBlue
        });
        grid.Add(new Label
        {
            Text = "Upper left",
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.Start
        });

        grid.Add(new BoxView
        {
            Color = Colors.LightSkyBlue
        }, 1, 0);
        grid.Add(new Label
        {
            Text = "Upper center",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Start
        }, 1, 0);

        grid.Add(new BoxView
        {
            Color = Colors.CadetBlue
        }, 2, 0);
        grid.Add(new Label
        {
            Text = "Upper right",
            HorizontalOptions = LayoutOptions.End,
            VerticalOptions = LayoutOptions.Start
        }, 2, 0);

        // Row 1
        grid.Add(new BoxView
        {
            Color = Colors.CornflowerBlue
        }, 0, 1);
        grid.Add(new Label
        {
            Text = "Center left",
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.Center
        }, 0, 1);

        grid.Add(new BoxView
        {
            Color = Colors.DodgerBlue
        }, 1, 1);
        grid.Add(new Label
        {
            Text = "Center center",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        }, 1, 1);

        grid.Add(new BoxView
        {
            Color = Colors.DarkSlateBlue
        }, 2, 1);
        grid.Add(new Label
        {
            Text = "Center right",
            HorizontalOptions = LayoutOptions.End,
            VerticalOptions = LayoutOptions.Center
        }, 2, 1);

        // Row 2
        grid.Add(new BoxView
        {
            Color = Colors.SteelBlue
        }, 0, 2);
        grid.Add(new Label
        {
            Text = "Lower left",
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.End
        }, 0, 2);

        grid.Add(new BoxView
        {
            Color = Colors.LightBlue
        }, 1, 2);
        grid.Add(new Label
        {
            Text = "Lower center",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.End
        }, 1, 2);

        grid.Add(new BoxView
        {
            Color = Colors.BlueViolet
        }, 2, 2);
        grid.Add(new Label
        {
            Text = "Lower right",
            HorizontalOptions = LayoutOptions.End,
            VerticalOptions = LayoutOptions.End
        }, 2, 2);

        Title = "Grid alignment demo";
        Content = grid;
    }
}

Вложенные объекты Сетки

Можно Grid использовать в качестве родительского макета, содержащего вложенные дочерние Grid объекты или другие дочерние макеты. При вложении объектов, Grid.Rowсвойств , Grid.RowSpanGrid.Columnи Grid.ColumnSpan вложенных свойств всегда ссылаются на положение представлений в родительском объектеGrid.Grid

В следующем XAML показан пример вложенных Grid объектов:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converters="clr-namespace:GridDemos.Converters"
             x:Class="GridDemos.Views.XAML.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 Height="500" />
            <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 содержит BoxView в первой строке и дочерний Grid элемент во второй строке. Дочерний Grid элемент содержит Slider объекты, которые управляют цветом BoxView, отображаемым элементом, и Label объекты, отображающие значение каждого Slider:

Nested .NET MAUI Grid objects.

Важно!

Чем глубже вы вложены Grid объекты и другие макеты, тем больше вычислений макета будет выполняться, что может повлиять на производительность. Дополнительные сведения см. в разделе "Выбор правильного макета".

Эквивалентный код на C# выглядит так:

public class ColorSlidersGridPage : ContentPage
{
    BoxView boxView;
    Slider redSlider;
    Slider greenSlider;
    Slider blueSlider;

    public ColorSlidersGridPage()
    {
        // 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 { HeightRequest = 500 },
                new RowDefinition()
            }
        };

        boxView = new BoxView { Color = Colors.Black };
        rootGrid.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.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.Add(redLabel);

        greenSlider = new Slider();
        greenSlider.ValueChanged += OnSliderValueChanged;
        Grid.SetRow(greenSlider, 2);
        childGrid.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.Add(greenLabel);

        blueSlider = new Slider();
        blueSlider.ValueChanged += OnSliderValueChanged;
        Grid.SetRow(blueSlider, 4);
        childGrid.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.Add(blueLabel);

        // Place the child Grid in the root Grid
        rootGrid.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);
    }
}