Xamarin.FormsNetz Grid

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

[![Xamarin.FormsNetz](grid-images/layouts.png "[! Schel. Raster "NO-LOC (xamarin. Forms)]"")](grid-images/layouts-large.png#lightbox "[! Schel. Raster "NO-LOC (xamarin. Forms)]"")Xamarin.Forms Grid

Bei Grid handelt es sich um ein Layout, das seine untergeordneten Elemente in Zeilen und Spalten organisiert, die eine proportionale oder absolute Größe aufweisen können.The Grid is a layout that organizes its children into rows and columns, which can have proportional or absolute sizes. Standardmäßig enthält eine Grid Zeile und eine Spalte.By default, a Grid contains one row and one column. Außerdem Grid kann ein als übergeordnetes Layout verwendet werden, das andere untergeordnete Layouts enthält.In addition, a Grid can be used as a parent layout that contains other child layouts.

Das Grid Layout sollte nicht mit Tabellen verwechselt werden und ist nicht für die Darstellung von Tabellendaten vorgesehen.The Grid layout should not be confused with tables, and is not intended to present tabular data. Im Gegensatz zu HTML-Tabellen ist ein zum Anordnen Grid von Inhalt vorgesehen.Unlike HTML tables, a Grid is intended for laying out content. Zum Anzeigen von Tabellendaten sollten Sie die Verwendung von ListView, CollectionViewoder TableViewin Erwägung gezogen.For displaying tabular data, consider using a ListView, CollectionView, or TableView.

Die- Grid Klasse definiert die folgenden Eigenschaften:The Grid class defines the following properties:

  • Columnvom Typ int , bei dem es sich um eine angefügte Eigenschaft handelt, die die Spalten Ausrichtung einer Ansicht in einem übergeordneten Element angibt Grid .Column, of type int, which is an attached property that indicates the column alignment of a view within a parent Grid. Der Standardwert dieser Eigenschaft ist 0.The default value of this property is 0. Ein Validierungs Rückruf stellt sicher, dass der Wert, wenn die Eigenschaft festgelegt wird, größer oder gleich 0 ist.A validation callback ensures that when the property is set, its value is greater than or equal to 0.
  • ColumnDefinitionsist vom Typ ColumnDefinitionCollection eine Liste von- ColumnDefinition Objekten, die die Breite der Raster Spalten definieren.ColumnDefinitions, of type ColumnDefinitionCollection, is a list of ColumnDefinition objects that define the width of the grid columns.
  • ColumnSpacingdoublegibt den Abstand zwischen Raster Spalten an.ColumnSpacing, of type double, indicates the distance between grid columns. Der Standardwert dieser Eigenschaft ist 6 geräteunabhängige Einheiten.The default value of this property is 6 device-independent units.
  • ColumnSpanvom Typ int , bei dem es sich um eine angefügte Eigenschaft handelt, die die Gesamtzahl der Spalten angibt, die eine Sicht innerhalb eines übergeordneten Elements umfasst Grid .ColumnSpan, of type int, which is an attached property that indicates the total number of columns that a view spans within a parent Grid. Der Standardwert dieser Eigenschaft ist „1“.The default value of this property is 1. Ein Validierungs Rückruf stellt sicher, dass der Wert, wenn die Eigenschaft festgelegt wird, größer oder gleich 1 ist.A validation callback ensures that when the property is set, its value is greater than or equal to 1.
  • Rowvom Typ int , bei dem es sich um eine angefügte Eigenschaft handelt, die die Zeilen Ausrichtung einer Sicht innerhalb eines übergeordneten Elements angibt Grid .Row, of type int, which is an attached property that indicates the row alignment of a view within a parent Grid. Der Standardwert dieser Eigenschaft ist 0.The default value of this property is 0. Ein Validierungs Rückruf stellt sicher, dass der Wert, wenn die Eigenschaft festgelegt wird, größer oder gleich 0 ist.A validation callback ensures that when the property is set, its value is greater than or equal to 0.
  • RowDefinitionsist vom Typ RowDefinitionCollection eine Liste von- RowDefintion Objekten, die die Höhe der Raster Zeilen definieren.RowDefinitions, of type RowDefinitionCollection, is a list of RowDefintion objects that define the height of the grid rows.
  • RowSpacingdoublegibt den Abstand zwischen Raster Zeilen an.RowSpacing, of type double, indicates the distance between grid rows. Der Standardwert dieser Eigenschaft ist 6 geräteunabhängige Einheiten.The default value of this property is 6 device-independent units.
  • RowSpanvom Typ int , bei dem es sich um eine angefügte Eigenschaft handelt, die die Gesamtzahl der Zeilen angibt, die eine Sicht innerhalb eines übergeordneten Elements umfasst Grid .RowSpan, of type int, which is an attached property that indicates the total number of rows that a view spans within a parent Grid. Der Standardwert dieser Eigenschaft ist „1“.The default value of this property is 1. Ein Validierungs Rückruf stellt sicher, dass der Wert, wenn die Eigenschaft festgelegt wird, größer oder gleich 1 ist.A validation callback ensures that when the property is set, its value is greater than or equal to 1.

Diese Eigenschaften werden von- BindableProperty Objekten unterstützt. Dies bedeutet, dass die Eigenschaften Ziele von Daten Bindungen und formatierten sein können.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings and styled.

Die- Grid Klasse wird von der- Layout<T> Klasse abgeleitet, die eine Children Eigenschaft vom Typ definiert IList<T> .The Grid class derives from the Layout<T> class, which defines a Children property of type IList<T>. Die Children -Eigenschaft ist der der ContentProperty Layout<T> -Klasse und muss daher nicht explizit aus XAML festgelegt werden.The Children property is the ContentProperty of the Layout<T> class, and therefore does not need to be explicitly set from XAML.

Tipp

Um die bestmögliche layoutleistung zu erzielen, befolgen Sie die Richtlinien unter Optimieren der layoutleistung.To obtain the best possible layout performance, follow the guidelines at Optimize layout performance.

Zeilen und SpaltenRows and columns

Standardmäßig enthält eine Grid Zeile und eine Spalte:By default, a Grid contains one row and one column:

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

In diesem Beispiel enthält das Grid ein einzelnes untergeordnetes Element Label , das sich automatisch an einem einzelnen Speicherort befindet:In this example, the Grid contains a single child Label that's automatically positioned in a single location:

Screenshot eines Standard Raster LayoutsScreenshot of a default Grid layout

Das Layoutverhalten eines Grid kann mit der-Eigenschaft und der-Eigenschaft definiert werden, bei denen es sich um Auflistungen RowDefinitions ColumnDefinitions von RowDefinition - ColumnDefinition Objekten bzw.The layout behavior of a Grid can be defined with the RowDefinitions and ColumnDefinitions properties, which are collections of RowDefinition and ColumnDefinition objects, respectively. Diese Auflistungen definieren die Zeilen-und Spalten Eigenschaften eines Grid und sollten ein- RowDefinition Objekt für jede Zeile in der Grid sowie ein- ColumnDefinition Objekt für jede Spalte in der enthalten Grid .These collections define the row and column characteristics of a Grid, and should contain one RowDefinition object for each row in the Grid, and one ColumnDefinition object for each column in the Grid.

Die RowDefinition -Klasse definiert eine Height Eigenschaft vom Typ GridLength , und die- ColumnDefinition Klasse definiert eine Width Eigenschaft vom Typ GridLength .The RowDefinition class defines a Height property, of type GridLength, and the ColumnDefinition class defines a Width property, of type GridLength. Die GridLength Struktur gibt eine Zeilenhöhe oder eine Spaltenbreite in Bezug auf die- GridUnitType Enumeration an, die über drei Member verfügt:The GridLength struct specifies a row height or a column width in terms of the GridUnitType enumeration, which has three members:

  • Absolute– die Zeilenhöhe oder Spaltenbreite ist ein Wert in geräteunabhängigen Einheiten (eine Zahl in XAML).Absolute – the row height or column width is a value in device-independent units (a number in XAML).
  • Auto– die Zeilenhöhe oder Spaltenbreite wird basierend auf dem Zellen Inhalt ( Auto in XAML) automatisch vergrößert.Auto – the row height or column width is autosized based on the cell contents (Auto in XAML).
  • Star– die Zeilenhöhe oder Spaltenbreite wird proportional zugewiesen (eine Zahl, gefolgt von * in XAML).Star – leftover row height or column width is allocated proportionally (a number followed by * in XAML).

Eine Grid Zeile mit Height der-Eigenschaft Auto schränkt die Höhe von Sichten in dieser Zeile auf die gleiche Weise ein, wie ein vertikaler Wert StackLayout .A Grid row with a Height property of Auto constrains the height of views in that row in the same way as a vertical StackLayout. Entsprechend funktioniert eine Spalte mit Width der-Eigenschaft ähnlich Auto wie eine horizontale StackLayout .Similarly, a column with a Width property of Auto works much like a horizontal StackLayout.

Achtung

Stellen Sie sicher, dass so wenige Zeilen und Spalten wie möglich auf Größe festgelegt sind Auto .Try to ensure that as few rows and columns as possible are set to Auto size. Durch jede Zeile oder Spalte, deren Größe automatisch angepasst wird, wird verursacht, dass die Layout-Engine zusätzliche Layoutberechnungen durchführt.Each auto-sized row or column will cause the layout engine to perform additional layout calculations. Verwenden Sie stattdessen wenn möglich Zeilen und Spalten mit festen Größen.Instead, use fixed size rows and columns if possible. Alternativ können Sie Zeilen und Spalten festlegen, um eine proportionale Menge an Speicherplatz mit dem- GridUnitType.Star Enumerationswert zu belegen.Alternatively, set rows and columns to occupy a proportional amount of space with the GridUnitType.Star enumeration value.

Der folgende XAML-Code zeigt, wie Sie eine Grid mit drei Zeilen und zwei Spalten erstellen:The following XAML shows how to create a Grid with three rows and two columns:

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

In diesem Beispiel Grid hat eine Gesamthöhe, die die Höhe der Seite ist.In this example, the Grid has an overall height that is the height of the page. Der Grid weiß, dass die Höhe der dritten Zeile 100 geräteunabhängige Einheiten ist.The Grid knows that the height of the third row is 100 device-independent units. Diese Höhe wird von der eigenen Höhe subtrahiert, und die verbleibende Höhe wird proportional zwischen der ersten und zweiten Zeile basierend auf der Zahl vor dem Stern zugewiesen.It subtracts that height from its own height, and allocates the remaining height proportionally between the first and second rows based on the number before the star. In diesem Beispiel entspricht die Höhe der ersten Zeile zweimal der zweiten Zeile.In this example, the height of the first row is twice that of the second row.

Die beiden- ColumnDefinition Objekte legen Width auf fest * , das entspricht 1* , was bedeutet, dass die Breite des Bildschirms gleich unterhalb der beiden Spalten aufgeteilt ist.The two ColumnDefinition objects both set the Width to *, which is the same as 1*, meaning that the width of the screen is divided equally beneath the two columns.

Wichtig

Der Standardwert der- RowDefinition.Height Eigenschaft ist * .The default value of the RowDefinition.Height property is *. Entsprechend lautet der Standardwert der- ColumnDefinition.Width Eigenschaft * .Similarly, the default value of the ColumnDefinition.Width property is *. Daher ist es nicht erforderlich, diese Eigenschaften in Fällen festzulegen, in denen diese Standardwerte zulässig sind.Therefore, it's not necessary to set these properties in cases where these defaults are acceptable.

Untergeordnete Sichten können Grid mit den Grid.Column angefügten Eigenschaften und in bestimmten Zellen positioniert werden Grid.Row .Child views can be positioned in specific Grid cells with the Grid.Column and Grid.Row attached properties. Verwenden Sie außerdem die Grid.RowSpan angefügten Eigenschaften und, um die untergeordneten Sichten auf mehrere Zeilen und Spalten zu überspannen Grid.ColumnSpan .In addition, to make child views span across multiple rows and columns, use the Grid.RowSpan and Grid.ColumnSpan attached properties.

Der folgende XAML-Code zeigt dieselbe Grid Definition und positioniert auch untergeordnete Sichten in bestimmten Grid Zellen:The following XAML shows the same Grid definition, and also positions child views in specific Grid cells:

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

Hinweis

Die Grid.Row -Eigenschaft und die-Eigenschaft Grid.Column werden beide von 0 indiziert und Grid.Row="2" verweisen auf die dritte Zeile, während Grid.Column="1" auf die zweite Spalte verweist.The Grid.Row and Grid.Column properties are both indexed from 0, and so Grid.Row="2" refers to the third row while Grid.Column="1" refers to the second column. Außerdem haben beide Eigenschaften den Standardwert 0 und müssen daher nicht für untergeordnete Sichten festgelegt werden, die die erste Zeile oder erste Spalte eines belegen Grid .In addition, both of these properties have a default value of 0, and so don't need to be set on child views that occupy the first row or first column of a Grid.

In diesem Beispiel werden alle drei Grid Zeilen von BoxView -und- Label Sichten belegt.In this example, all three Grid rows are occupied by BoxView and Label views. Die dritte Zeile ist 100 geräteunabhängige Einheiten hoch, wobei die ersten beiden Zeilen den verbleibenden Platz belegen (die erste Zeile ist doppelt so hoch wie die zweite Zeile).The third row is 100 device-independent units high, with the first two rows occupying the remaining space (the first row is twice as high as the second row). Die beiden Spalten sind gleich Breite und Dividieren den Grid in der Hälfte.The two columns are equal in width and divide the Grid in half. Die BoxView in der dritten Zeile umfasst beide Spalten.The BoxView in the third row spans both columns.

Screenshot eines grundlegenden Raster LayoutsScreenshot of a basic Grid layout

Darüber hinaus können untergeordnete Sichten in einem Grid Zellen gemeinsam verwenden.In addition, child views in a Grid can share cells. Die Reihenfolge, in der die untergeordneten Elemente im XAML angezeigt werden, ist die Reihenfolge, in der die untergeordneten Elemente abgelegt werden GridThe order that the children appear in the XAML is the order that the children are placed in the Grid. Im vorherigen Beispiel sind die- Label Objekte nur sichtbar, da Sie auf den-Objekten gerendert werden BoxView .In the previous example, the Label objects are only visible because they are rendered on top of the BoxView objects. Die Label Objekte sind nicht sichtbar, wenn die BoxView Objekte darauf gerendert wurden.The Label objects would not be visible if the BoxView objects were rendered on top of them.

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

Wenn Sie im Code die Höhe eines RowDefinition -Objekts und die Breite eines-Objekts angeben möchten, ColumnDefinition verwenden Sie die Werte der- GridLength Struktur, häufig in Kombination mit der- GridUnitType Enumeration.In code, to specify the height of a RowDefinition object, and the width of a ColumnDefinition object, you use values of the GridLength structure, often in combination with the GridUnitType enumeration.

Der obige Beispielcode zeigt auch mehrere verschiedene Ansätze zum Hinzufügen von untergeordneten Elementen zum Grid und zum Angeben der Zellen, in denen Sie sich befinden.The example code above also shows several different approaches to adding children to the Grid, and specifying the cells in which they reside. Wenn Sie die-Überladung verwenden, die die Add Argumente left, right, Topund Bottom angibt, während das linke und das oberste Argument immer auf Zellen innerhalb von verweisen Grid , werden das Rechte und das untere Argument auf Zellen, die sich außerhalb des befinden, angezeigt Grid .When using the Add overload that specifies left, right, top, and bottom arguments, while the left and top arguments will always refer to cells within the Grid, the right and bottom arguments appear to refer to cells that are outside the Grid. Dies liegt daran, dass das Rechte Argument immer größer sein muss als das linke Argument, und das untere Argument muss immer größer sein als das oberste Argument.This is because the right argument must always be greater than the left argument, and the bottom argument must always be greater than the top argument. Im folgenden Beispiel, in dem ein 2 x 2-Element angenommen Grid wird, wird der entsprechende Code mithilfe beider- Add über Ladungen angezeigt:The following example, which assumes a 2x2 Grid, shows equivalent code using both Add overloads:

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

Hinweis

Darüber hinaus können Grid mit den AddHorizontal -und-Methoden, die untergeordnete Sichten zu AddVertical einer einzelnen Zeile oder einzelnen Spalten hinzufügen, eine untergeordnete Ansicht hinzugefügt werden Grid .In addition, child views can be added to a Grid with the AddHorizontal and AddVertical methods, which add children to a single row or single column Grid. Der wird Grid dann in Zeilen oder Spalten erweitert, wenn diese Aufrufe durchgeführt werden, und die untergeordneten Elemente werden automatisch in den richtigen Zellen positioniert.The Grid then expands in rows or columns as these calls are made, as well as automatically positioning children in the correct cells.

Vereinfachen von Zeilen-und SpaltendefinitionenSimplify row and column definitions

In XAML können die Zeilen-und Spalten Eigenschaften von Grid mit einer vereinfachten Syntax angegeben werden, die das definieren RowDefinition von-und- ColumnDefinition Objekten für jede Zeile und Spalte vermeidet.In XAML, the row and column characteristics of a Grid can be specified using a simplified syntax that avoids having to define RowDefinition and ColumnDefinition objects for each row and column. Stattdessen können die RowDefinitions -Eigenschaft und die-Eigenschaft auf Zeichen folgen ColumnDefinitions mit durch Trennzeichen getrennten Werten festgelegt werden GridUnitType , aus denen Typkonverter in Xamarin.Forms Create RowDefinition -und-Objekte integriert werden ColumnDefinition :Instead, the RowDefinitions and ColumnDefinitions properties can be set to strings containing comma-delimited GridUnitType values, from which type converters built into Xamarin.Forms create RowDefinition and ColumnDefinition objects:

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

In diesem Beispiel Grid verfügt über fünf Zeilen und vier Spalten.In this example, the Grid has five rows and four columns. Die Dritten, nächsten und fünften Zeilen werden auf absolute Höhen festgelegt, wobei die automatische Größenanpassung der zweiten Zeile auf ihren Inhalt festgelegt wird.The third, forth, and fifth rows are set to absolute heights, with the second row auto-sizing to its content. Die verbleibende Höhe wird dann der ersten Zeile zugeordnet.The remaining height is then allocated to the first row.

Die Spalte weiter wird auf eine absolute Breite festgelegt, wobei die automatische Größenanpassung der dritten Spalte auf ihren Inhalt festgelegt ist.The forth column is set to an absolute width, with the third column auto-sizing to its content. Die verbleibende Breite wird proportional zwischen der ersten und der zweiten Spalte basierend auf der Zahl vor dem Stern zugewiesen.The remaining width is allocated proportionally between the first and second columns based on the number before the star. In diesem Beispiel ist die Breite der zweiten Spalte zweimal das der ersten Spalte (da * mit identisch ist 1* ).In this example, the width of the second column is twice that of the first column (because * is identical to 1*).

Leerraum zwischen Zeilen und SpaltenSpace between rows and columns

Standardmäßig Grid werden Zeilen durch 6 geräteunabhängige Speichereinheiten getrennt.By default, Grid rows are separated by 6 device-independent units of space. Ebenso Grid sind Spalten durch 6 geräteunabhängige Speichereinheiten voneinander getrennt.Similarly, Grid columns are separated by 6 device-independent units of space. Diese Standardwerte können durch Festlegen der-Eigenschaft und der-Eigenschaft geändert werden RowSpacing ColumnSpacing :These defaults can be changed by setting the RowSpacing and ColumnSpacing properties, respectively:

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

In diesem Beispiel wird ein erstellt Grid , der keinen Abstand zwischen seinen Zeilen und Spalten hat:This example creates a Grid that has no spacing between its rows and columns:

Screenshot des Rasters ohne Abstand zwischen den ZellenScreenshot of Grid with no spacing between cells

Tipp

Die RowSpacing -Eigenschaft und die-Eigenschaft ColumnSpacing können auf negative Werte festgelegt werden, um Zell Inhalte zu überlappen.The RowSpacing and ColumnSpacing properties can be set to negative values to make cell contents overlap.

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

    Content = grid;
}

AusrichtungAlignment

Untergeordnete Sichten in einer Grid können mithilfe der-Eigenschaft und der-Eigenschaft in ihren Zellen positioniert werden HorizontalOptions VerticalOptions .Child views in a Grid can be positioned within their cells by the HorizontalOptions and VerticalOptions properties. Diese Eigenschaften können auf die folgenden Felder aus der Struktur festgelegt werden LayoutOptions :These properties can be set to the following fields from the LayoutOptions struct:

Wichtig

Die AndExpands Felder in der LayoutOptions Struktur können nur auf Objekte angewendet werden StackLayout .The AndExpands fields in the LayoutOptions struct are only applicable to StackLayout objects.

Der folgende XAML-Code erstellt eine Grid mit neun Zellen gleicher Größe und platziert eine Label in jeder Zelle mit einer anderen Ausrichtung:The following XAML creates a Grid with nine equal-size cells, and places a Label in each cell with a different alignment:

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

In diesem Beispiel werden die Label Objekte in jeder Zeile alle vertikal, aber unterschiedliche horizontale Ausrichtungen verwendet.In this example, the Label objects in each row are all identically aligned vertically, but use different horizontal alignments. Sie können sich auch vorstellen, wenn die Label Objekte in jeder Spalte gleichmäßig horizontal ausgerichtet sind, aber unterschiedliche vertikale Ausrichtungen verwenden:Alternatively, this can be thought of as the Label objects in each column being identically aligned horizontally, but using different vertical alignments:

Screenshot der Zellen Ausrichtung innerhalb eines RastersScreenshot of cell alignment within a Grid

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

Gitter Raster ObjekteNested Grid objects

Ein- Grid Objekt kann als übergeordnetes Layout verwendet werden, das Grid untergeordnete Objekte oder andere untergeordnete Layouts enthält.A Grid can be used as a parent layout that contains nested child Grid objects, or other child layouts. Beim Schachteln Grid Grid.Row von Objekten verweisen die Grid.Column Grid.RowSpan angefügten Eigenschaften,, und Grid.ColumnSpan immer auf die Position von Sichten innerhalb ihres übergeordneten Elements Grid .When nesting Grid objects, the Grid.Row, Grid.Column, Grid.RowSpan, and Grid.ColumnSpan attached properties always refer to the position of views within their parent Grid.

Der folgende XAML-Code zeigt ein Beispiel für die Schachtelung von Grid Objekten:The following XAML shows an example of nesting Grid objects:

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

In diesem Beispiel enthält das Stamm Grid Layout eine BoxView in der ersten Zeile und ein untergeordnetes Element Grid in der zweiten Zeile.In this example, the root Grid layout contains a BoxView in its first row, and a child Grid in its second row. Das untergeordnete Element Grid enthält Slider -Objekte, die die vom BoxView -Objekt angezeigte Farbe und Objekte, die Label den Wert der einzelnen anzeigen, bearbeiten Slider :The child Grid contains Slider objects that manipulate the color displayed by the BoxView, and Label objects that display the value of each Slider:

Screenshot der Raster RasterScreenshot of nested Grids

Wichtig

Wenn Sie Grid Objekte und andere Layouts verschachteln, desto stärker wirkt sich das geschachtelte Layout auf die Leistung aus.The deeper you nest Grid objects and other layouts, the more the nested layouts will impact performance. Weitere Informationen finden Sie unter auswählen des richtigen Layouts.For more information, see Choose the correct layout.

Der entsprechende C#-Code lautet:The equivalent C# code is:

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