Siatka

Przeglądaj przykład. Przeglądanie przykładu

Siatka .NET MAUI.

Interfejs użytkownika aplikacji wieloplatformowej (.NET MAUI) Grid .NET to układ, który organizuje elementy podrzędne w wiersze i kolumny, które mogą mieć rozmiary proporcjonalne lub bezwzględne. Domyślnie element Grid zawiera jeden wiersz i jedną kolumnę. Ponadto Grid element może służyć jako układ nadrzędny zawierający inne układy podrzędne.

Nie należy mylić z Grid tabelami i nie ma na celu prezentowania danych tabelarycznych. W przeciwieństwie do tabel HTML, Grid element jest przeznaczony do układania zawartości. W przypadku wyświetlania danych tabelarycznych rozważ użycie elementu ListView lub CollectionView.

Klasa Grid definiuje następujące właściwości:

  • Column, typu int, który jest dołączoną właściwością wskazującą wyrównanie kolumny widoku w obiekcie nadrzędnym Grid. Wartość domyślna tej właściwości to 0. Wywołanie zwrotne weryfikacji gwarantuje, że po ustawieniu właściwości jego wartość jest większa lub równa 0.
  • ColumnDefinitions, typu ColumnDefinitionCollection, to lista ColumnDefinition obiektów definiujących szerokość kolumn siatki.
  • ColumnSpacing, typu double, wskazuje odległość między kolumnami siatki. Wartość domyślna tej właściwości to 0.
  • ColumnSpan, typu int, to dołączona właściwość wskazująca całkowitą liczbę kolumn, jakie widok obejmuje w elemencie nadrzędnym Grid. Wartość domyślna tej właściwości to 1. Funkcja weryfikacyjna gwarantuje, że gdy właściwość jest ustawiana, jej wartość jest większa lub równa 1.
  • Row, typu int, który jest dołączoną właściwością wskazującą wyrównanie wiersza widoku w obiekcie nadrzędnym Grid. Wartość domyślna tej właściwości to 0. Wywołanie zwrotne weryfikacji gwarantuje, że po ustawieniu właściwości jego wartość jest większa lub równa 0.
  • RowDefinitions, typu RowDefinitionCollection, to lista RowDefinition obiektów, które definiują wysokość wierszy siatki.
  • RowSpacing, typu double, wskazuje odległość między wierszami siatki. Wartość domyślna tej właściwości to 0.
  • RowSpan, typu int, jest właściwością dołączoną, wskazującą całkowitą liczbę wierszy, które widok obejmuje w obiekcie nadrzędnym Grid. Wartość domyślna tej właściwości to 1. Funkcja weryfikacyjna gwarantuje, że gdy właściwość jest ustawiana, jej wartość jest większa lub równa 1.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że właściwości mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Wiersze i kolumny

Domyślnie element Grid zawiera jeden wiersz i jedną kolumnę:

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

W tym przykładzie element Grid zawiera jedno dziecko Label , które jest automatycznie umieszczone w jednej lokalizacji:

Domyślny układ siatki MAUI platformy .NET.

Zachowanie układu Grid można zdefiniować za pomocą właściwości RowDefinitions i ColumnDefinitions, które są odpowiednio kolekcjami obiektów RowDefinition i ColumnDefinition. Te kolekcje definiują charakterystykę wierszy i kolumn Grid, i powinny zawierać jeden obiekt RowDefinition dla każdego wiersza w Grid oraz jeden obiekt ColumnDefinition dla każdej kolumny w Grid.

Klasa RowDefinition definiuje Height właściwość typu GridLength, a ColumnDefinition klasa definiuje Width właściwość typu GridLength. Struktura GridLength określa wysokość wiersza lub szerokość kolumny w oparciu o wyliczenie GridUnitType, które ma trzy członki:

  • Absolute — wysokość wiersza lub szerokość kolumny jest wartością w jednostkach niezależnych od urządzenia (liczba w języku XAML).
  • Auto — wysokość wiersza lub szerokość kolumny jest autoskalowana na podstawie zawartości komórki (Auto w języku XAML).
  • Star — pozostała wysokość wiersza lub szerokość kolumny jest przydzielana proporcjonalnie (liczba następuje po * w XAML).

Wiersz Grid z właściwością HeightAuto ogranicza wysokość widoków w tym wierszu w taki sam sposób jak pionowy StackLayout. Podobnie kolumna z właściwością WidthAuto działa tak jak pozioma StackLayout.

Ostrzeżenie

Spróbuj upewnić się, że jak najmniej wierszy i kolumn jest ustawionych na Auto rozmiar. Każdy wiersz lub kolumna o automatycznym rozmiarze spowoduje, że silnik układu wykona dodatkowe obliczenia dotyczące układu. Zamiast tego należy użyć wierszy i kolumn o stałym rozmiarze, jeśli to możliwe. Możesz też ustawić wiersze i kolumny, aby zajmowały proporcjonalną ilość miejsca z wartością wyliczeniową GridUnitType.Star.

Poniższy kod XAML pokazuje, jak utworzyć obiekt z trzema Grid wierszami i dwiema kolumnami:

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

W tym przykładzie obiekt Grid ma ogólną wysokość, która jest wysokością strony. Wie Grid, że wysokość trzeciego wiersza wynosi 100 jednostek niezależnych od urządzenia. Odejmuje tę wysokość od swojej własnej i przydziela pozostałą wysokość proporcjonalnie na pierwszy i drugi wiersz, w oparciu o liczbę przed gwiazdką. W tym przykładzie wysokość pierwszego wiersza jest dwukrotnie większa niż w drugim wierszu.

ColumnDefinition Oba obiekty ustawiają Width na *, która jest taka sama jak 1*, co oznacza, że szerokość ekranu jest podzielona równo między dwie kolumny.

Ważna

Wartość domyślna RowDefinition.Height właściwości to *. Podobnie domyślna wartość właściwości ColumnDefinition.Width to *. W związku z tym nie jest konieczne ustawienie tych właściwości w przypadkach, gdy te wartości domyślne są akceptowalne.

Widoki podrzędne można umieścić w określonych Grid komórkach za pomocą dołączonych właściwości Grid.Column i Grid.Row. Ponadto, aby widoki podrzędne obejmowały wiele wierszy i kolumn, użyj właściwości dołączonych Grid.RowSpan i Grid.ColumnSpan.

Poniższy kod XAML pokazuje tę samą Grid definicję, a także umieszcza widoki podrzędne w określonych Grid komórkach:

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

Uwaga / Notatka

Właściwości Grid.Row i Grid.Column są indeksowane od 0, co oznacza, że Grid.Row="2" odnosi się do trzeciego wiersza, a Grid.Column="1" do drugiej kolumny. Ponadto obie te właściwości mają wartość domyślną 0, dlatego nie trzeba ustawiać ich w widokach podrzędnych, które zajmują pierwszy wiersz lub pierwszą kolumnę obiektu Grid.

W tym przykładzie wszystkie trzy Grid wiersze są zajmowane przez widoki BoxView oraz Label. Trzeci wiersz ma 100 jednostek wysokości niezależnych od urządzenia, a dwa pierwsze wiersze zajmują pozostałe miejsce (pierwszy wiersz jest dwa razy wyższy niż drugi wiersz). Dwie kolumny mają równą szerokość i dzielą Grid w połowie. Element BoxView w trzecim wierszu rozciąga się na obie kolumny.

Podstawowy układ siatki MAUI platformy .NET.

Ponadto widoki podrzędne w obiekcie Grid mogą współdzielić komórki. Kolejność, w jakiej elementy podrzędne pojawiają się w języku XAML, jest kolejnością, w jakiej są umieszczane w obiekcie Grid. W poprzednim przykładzie obiekty Label są widoczne tylko dlatego, że są renderowane nad obiektami BoxView. Jeśli obiekty Label byłyby renderowane na nich, obiekty BoxView nie byłyby widoczne.

Równoważny kod języka C# to:

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

W kodzie, aby określić wysokość RowDefinition obiektu i szerokość ColumnDefinition obiektu, należy użyć wartości GridLength struktury, często w połączeniu z wyliczeniem GridUnitType .

Uwaga / Notatka

Grid definiuje również metodę rozszerzenia AddWithSpan, która dodaje widok do Grid w określonym wierszu i kolumnie, z określonymi zakresami wierszy i kolumn.

Uprość definicje wierszy i kolumn

W języku XAML można określić charakterystykę wierszy i kolumn elementu Grid przy użyciu uproszczonej składni, która pozwala uniknąć konieczności definiowania obiektów RowDefinition dla każdego wiersza i ColumnDefinition dla każdej kolumny. Zamiast tego właściwości RowDefinitions i ColumnDefinitions można ustawić na ciągi zawierające wartości rozdzielane przecinkami GridUnitType, z których konwertery typów wbudowane w .NET MAUI tworzą obiekty RowDefinition i ColumnDefinition.

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

W tym przykładzie obiekt Grid ma pięć wierszy i cztery kolumny. Trzeci, czwarty i piąty wiersz mają ustawioną wysokość bezwzględną, a wysokość drugiego wiersza jest automatycznie dopasowywana do jego zawartości. Pozostała wysokość jest następnie przydzielana do pierwszego wiersza.

Czwarta kolumna ma ustawioną stałą szerokość, a szerokość trzeciej kolumny jest automatycznie dopasowywana do jej zawartości. Pozostała szerokość jest przydzielana proporcjonalnie między pierwszą i drugą kolumną na podstawie liczby przed gwiazdką. W tym przykładzie szerokość drugiej kolumny jest dwa razy większa niż w pierwszej kolumnie (ponieważ * jest taka sama jak 1*).

Odstęp między wierszami i kolumnami

Domyślnie Grid wiersze i kolumny nie mają spacji między nimi. Można to zmienić, odpowiednio ustawiając właściwości RowSpacing i 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>

W tym przykładzie tworzony jest Grid, którego wiersze i kolumny są rozdzielone 6 jednostkami niezależnymi od urządzenia.

Siatka MAUI platformy .NET z odstępami między komórkami.

Wskazówka

Właściwości RowSpacing i ColumnSpacing można ustawić na wartości ujemne, aby zawartość komórki nakładała się na siebie.

Równoważny kod języka C# to:

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

        Content = grid;
    }
}

Wyrównanie

Widoki podrzędne w obiekcie Grid można umieścić w ich komórkach za pomocą właściwości HorizontalOptions i VerticalOptions. Te właściwości można ustawić na następujące pola z LayoutOptions struktury:

  • Start
  • Center
  • End
  • Fill

Poniższy kod XAML tworzy obiekt Grid z dziewięcioma komórkami o równym rozmiarze i umieszcza obiekt Label w każdej komórce z innym wyrównaniem:

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

W tym przykładzie Label obiekty w każdym wierszu są identycznie wyrównane w pionie, ale mają różne wyrównania poziome. Alternatywnie można to traktować jako Label obiekty w każdej kolumnie, które są identycznie wyrównane w poziomie, ale przy użyciu różnych wyrównań pionowych:

Wyrównanie komórek w siatce MAUI platformy .NET.

Równoważny kod języka C# to:

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

Zagnieżdżone elementy siatki

Element Grid może służyć jako układ nadrzędny zawierający zagnieżdżone obiekty podrzędne Grid lub inne układy podrzędne. Podczas zagnieżdżania Grid obiektów, właściwości dołączone Grid.Row, Grid.Column, Grid.RowSpan i Grid.ColumnSpan zawsze odnoszą się do pozycji widoków w ich nadrzędnym Grid.

Poniższy kod XAML przedstawia przykład zagnieżdżania obiektów 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 x:DataType="Slider"
                   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 x:DataType="Slider"
                   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 x:DataType="Slider"
                   Grid.Row="5"
                   Text="{Binding Source={x:Reference blueSlider},
                                  Path=Value,
                                  Converter={StaticResource doubleToInt},
                                  ConverterParameter=255,
                                  StringFormat='Blue = {0}'}" />
        </Grid>
    </Grid>
</ContentPage>

W tym przykładzie korzeń Grid zawiera element BoxView w pierwszym wierszu i element podrzędny Grid w drugim wierszu. Element podrzędny Grid zawiera obiekty Slider, które manipulują kolorem wyświetlanym przez BoxView, oraz obiekty Label, które wyświetlają wartość każdego Slider elementu:

Zagnieżdżone obiekty siatki MAUI platformy .NET.

Ważna

Im głębiej zagnieżdżasz Grid obiekty i inne układy, tym więcej obliczeń układu zostanie wykonanych, co może mieć wpływ na wydajność. Aby uzyskać więcej informacji, zobacz Wybieranie poprawnego układu.

Równoważny kod języka C# to:

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, Binding.Create(static (Slider slider) => slider.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, Binding.Create(static (Slider slider) => slider.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, Binding.Create(static (Slider slider) => slider.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);
    }
}
  • Ostatnia aktualizacja o