Xamarin.Forms Raster
Das Beispiel herunterladen
Ist Grid ein Layout, das seine untergeordneten Elemente in Zeilen und Spalten organisiert, die proportionale oder absolute Größen aufweisen können. Standardmäßig enthält ein Grid eine Zeile und eine Spalte. Darüber hinaus kann ein Grid als übergeordnetes Layout verwendet werden, das andere untergeordnete Layouts enthält.
Das Grid Layout sollte nicht mit Tabellen verwechselt werden und ist nicht für tabellarische Daten vorgesehen. Im Gegensatz zu HTML-Tabellen dient ein Grid zum Anordnen von Inhalten. Zum Anzeigen tabellarischer Daten sollten Sie eine ListView, CollectionView oder TableView verwenden.
Die Grid-Klasse definiert die folgenden Eigenschaften:
Columnvom Typint, die eine angefügte Eigenschaft ist, die die Spaltenausrichtung einer Ansicht innerhalb eines übergeordnetenGridangibt. Der Standardwert dieser Eigenschaft ist 0. Ein Überprüfungsrückruf stellt sicher, dass der Wert der Eigenschaft größer oder gleich 0 ist, wenn die Eigenschaft festgelegt wird.ColumnDefinitionsvom TypColumnDefinitionCollectionist eine Liste vonColumnDefinition-Objekten, die die Breite der Rasterspalten definieren.ColumnSpacingvom Typdoublegibt den Abstand zwischen Rasterspalten an. Der Standardwert dieser Eigenschaft ist 6 geräteunabhängige Einheiten.ColumnSpanvom Typint, die eine angefügte Eigenschaft ist, die die Gesamtanzahl der Spalten angibt, die eine Ansicht innerhalb eines übergeordnetenGridumfasst. Der Standardwert dieser Eigenschaft ist „1“. Ein Überprüfungsrückruf stellt sicher, dass der Wert der Eigenschaft größer oder gleich 1 ist, wenn die Eigenschaft festgelegt wird.Rowvom Typint, die eine angefügte Eigenschaft ist, die die Zeilenausrichtung einer Ansicht innerhalb eines übergeordnetenGridangibt. Der Standardwert dieser Eigenschaft ist 0. Ein Überprüfungsrückruf stellt sicher, dass der Wert der Eigenschaft größer oder gleich 0 ist, wenn die Eigenschaft festgelegt wird.RowDefinitionsvom TypRowDefinitionCollectionist eine Liste vonRowDefintionObjekten, die die Höhe der Rasterzeilen definieren.RowSpacingvom Typdoublegibt den Abstand zwischen Rasterzeilen an. Der Standardwert dieser Eigenschaft ist 6 geräteunabhängige Einheiten.RowSpanvom Typint, die eine angefügte Eigenschaft ist, die die Gesamtanzahl der Zeilen angibt, die eine Ansicht innerhalb eines übergeordnetenGridumfasst. Der Standardwert dieser Eigenschaft ist „1“. Ein Überprüfungsrückruf stellt sicher, dass der Wert der Eigenschaft größer oder gleich 1 ist, wenn die Eigenschaft festgelegt wird.
Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen und stilisiert sein können.
Die Grid -Klasse wird von der Layout<T> -Klasse abgeleitet, die eine Children Eigenschaft vom Typ IList<T>definiert. Die Children -Eigenschaft ist die ContentProperty der Layout<T> -Klasse und muss daher nicht explizit über XAML festgelegt werden.
Tipp
Befolgen Sie die Richtlinien unter Optimieren der Layoutleistung, um die bestmögliche Layoutleistung zu erzielen.
Zeilen und Spalten
Standardmäßig enthält ein eine Grid Zeile und eine Spalte:
<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 ein Grid einzelnes untergeordnetes Label Element, das automatisch an einem einzelnen Speicherort positioniert wird:
Das Layoutverhalten eines Grid kann mit den RowDefinitions Eigenschaften und ColumnDefinitions definiert werden, bei denen es sich um Auflistungen von RowDefinition - bzw ColumnDefinition . -Objekten handelt. Diese Auflistungen definieren die Zeilen- und Spaltenmerkmale eines Gridund sollten ein RowDefinition -Objekt für jede Zeile im Gridund ein ColumnDefinition -Objekt für jede Spalte im Gridenthalten.
Die RowDefinition -Klasse definiert eine Height -Eigenschaft vom Typ GridLength, und die ColumnDefinition -Klasse definiert eine Width -Eigenschaft vom Typ GridLength. Die GridLength -Struktur gibt eine Zeilenhöhe oder spaltenbreite im Sinne der GridUnitType -Enumeration an, die über drei Member verfügt:
Absolute– Die Zeilenhöhe oder Spaltenbreite ist ein Wert in geräteunabhängigen Einheiten (eine Zahl in XAML).Auto– Die Zeilenhöhe oder Spaltenbreite wird basierend auf dem Zellinhalt (Autoin XAML) automatisch festgelegt.Star– Die Höhe der zurückgelassenen Zeilen oder die Spaltenbreite wird proportional zugeordnet (eine Zahl gefolgt von*in XAML).
Eine Grid Zeile mit der Height -Eigenschaft Auto schränkt die Höhe von Ansichten in dieser Zeile auf die gleiche Weise ein wie eine vertikale StackLayout. Auf ähnliche Weise funktioniert eine Spalte mit einer Width -Eigenschaft von Auto ähnlich wie eine horizontale StackLayout.
Achtung
Stellen Sie sicher, dass so wenige Zeilen und Spalten wie möglich auf die Auto Größe festgelegt sind. Durch jede Zeile oder Spalte, deren Größe automatisch angepasst wird, wird verursacht, dass die Layout-Engine zusätzliche Layoutberechnungen durchführt. Verwenden Sie stattdessen wenn möglich Zeilen und Spalten mit festen Größen. Alternativ können Sie Zeilen und Spalten so festlegen, dass sie einen proportionalen Speicherplatz mit dem GridUnitType.Star Enumerationswert belegen.
Der folgende XAML-Code zeigt, wie sie mit Grid drei Zeilen und zwei Spalten erstellt werden:
<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 weist eine Grid Gesamthöhe auf, die der Höhe der Seite entspricht. Die Grid weiß, dass die Höhe der dritten Zeile 100 geräteunabhängige Einheiten beträgt. Sie subtrahiert diese Höhe von ihrer eigenen Höhe und ordnet die verbleibende Höhe proportional zwischen der ersten und der zweiten Zeile zu, basierend auf der Zahl vor dem star. In diesem Beispiel ist die Höhe der ersten Zeile doppelt so hoch wie die der zweiten Zeile.
Die beiden ColumnDefinition -Objekte legen beide auf *festWidth, was identisch 1*mit ist, was bedeutet, dass die Breite des Bildschirms gleichmäßig unter den beiden Spalten geteilt wird.
Wichtig
Der Standardwert der RowDefinition.Height -Eigenschaft ist *. Entsprechend ist *der Standardwert der ColumnDefinition.Width -Eigenschaft . Daher ist es nicht erforderlich, diese Eigenschaften in Fällen festzulegen, in denen diese Standardwerte akzeptabel sind.
Untergeordnete Ansichten können in bestimmten Grid Zellen mit den Grid.Column angefügten Eigenschaften und Grid.Row positioniert werden. Um untergeordnete Ansichten über mehrere Zeilen und Spalten zu erstrecken, verwenden Sie außerdem die Grid.RowSpan angefügten Eigenschaften und Grid.ColumnSpan .
Der folgende XAML-Code zeigt dieselbe Grid Definition an und positioniert auch untergeordnete Ansichten in bestimmten Grid Zellen:
<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 Eigenschaften und Grid.Column sind beide von 0 indiziert und beziehen sich daher Grid.Row="2" auf die dritte Zeile, während Grid.Column="1" auf die zweite Spalte verweist. Darüber hinaus weisen beide Eigenschaften den Standardwert 0 auf und müssen daher nicht für untergeordnete Ansichten festgelegt werden, die die erste Zeile oder erste Spalte eines Grideinnehmen.
In diesem Beispiel werden alle drei Grid Zeilen von BoxView - und Label -Ansichten belegt. 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). Die beiden Spalten sind gleich breit und teilen sich in Grid zwei Spalten. Der BoxView in der dritten Zeile umfasst beide Spalten.
Darüber hinaus können untergeordnete Ansichten in einem Grid Zellen gemeinsam nutzen. Die Reihenfolge, in der die untergeordneten Elemente im XAML-Code angezeigt werden, ist die Reihenfolge, in der die untergeordneten Elemente in platziert Gridwerden. Im vorherigen Beispiel sind die Label Objekte nur sichtbar, da sie über den BoxView -Objekten gerendert werden. Die Label Objekte wären nicht sichtbar, wenn die BoxView Objekte darüber gerendert würden.
Der entsprechende C#-Code lautet:
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;
}
}
Um im Code die Höhe eines RowDefinition Objekts und die Breite eines ColumnDefinition Objekts anzugeben, verwenden Sie Werte der GridLength -Struktur, häufig in Kombination mit der GridUnitType -Enumeration.
Der obige Beispielcode zeigt auch verschiedene Ansätze zum Hinzufügen von untergeordneten Elementen zu Gridund zum Angeben der Zellen, in denen sie sich befinden. Bei Verwendung der Add Überladung, die linke, rechte, obere und untere Argumente angibt, während die Argumente links und oben immer auf Zellen innerhalb der Gridverweisen, scheinen die argumente rechts und unten auf Zellen zu verweisen, die sich außerhalb von Gridbefinden. Dies liegt daran, dass das rechte Argument immer größer sein muss als das linke Argument, und das untere Argument muss immer größer als das obere Argument sein. Im folgenden Beispiel, das von einem 2x2 Grid-Wert ausgeht, wird äquivalenter Code mit beiden Add Überladungen angezeigt:
// 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 untergeordnete Ansichten mit den AddHorizontal Methoden und AddVertical hinzugefügt Grid werden, die einer einzelnen Zeile oder einer einzelnen Spalte Griduntergeordnete Elemente hinzufügen. Der Grid wird dann in Zeilen oder Spalten erweitert, während diese Aufrufe ausgeführt werden, sowie automatisch untergeordnete Elemente in den richtigen Zellen positioniert.
Vereinfachen von Zeilen- und Spaltendefinitionen
In XAML können die Zeilen- und Spaltenmerkmale eines Grid mithilfe einer vereinfachten Syntax angegeben werden, die verhindert, dass und ColumnDefinition -Objekte für jede Zeile und Spalte definiert RowDefinition werden müssen. Stattdessen können die Eigenschaften und auf Zeichenfolgen festgelegt werden, die RowDefinitions durch Trennzeichen getrennte GridUnitType Werte enthalten, aus denen typkonvertierte Xamarin.Forms Konverter und Objekte erstellen RowDefinitionColumnDefinition:ColumnDefinitions
<Grid RowDefinitions="1*, Auto, 25, 14, 20"
ColumnDefinitions="*, 2*, Auto, 300">
...
</Grid>
In diesem Beispiel hat die Grid fünf Zeilen und vier Spalten. Die dritte, die vierte und die fünfte Zeile sind auf absolute Höhen festgelegt, wobei die zweite Zeile automatisch auf den Inhalt skaliert wird. Die verbleibende Höhe wird dann der ersten Zeile zugeordnet.
Die vierte Spalte wird auf eine absolute Breite festgelegt, wobei die größe der dritten Spalte automatisch auf den Inhalt festgelegt wird. Die verbleibende Breite wird proportional zwischen der ersten und der zweiten Spalte basierend auf der Zahl vor dem star zugeordnet. In diesem Beispiel ist die Breite der zweiten Spalte doppelt so breit wie die der ersten Spalte (da * identisch mit 1*ist).
Abstand zwischen Zeilen und Spalten
Standardmäßig Grid werden Zeilen durch 6 geräteunabhängige Raumeinheiten getrennt. Grid Ebenso werden Spalten durch 6 geräteunabhängige Raumeinheiten getrennt. Diese Standardwerte können durch Festlegen der RowSpacing Eigenschaften und ColumnSpacing geändert werden:
<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 Grid erstellt, das keinen Abstand zwischen seinen Zeilen und Spalten aufweist:
Tipp
Die RowSpacing Eigenschaften und ColumnSpacing können auf negative Werte festgelegt werden, damit sich der Zellinhalt überlappt.
Der entsprechende C#-Code lautet:
public GridSpacingPageCS()
{
Grid grid = new Grid
{
RowSpacing = 0,
ColumnSpacing = 0,
// ...
};
// ...
Content = grid;
}
Ausrichtung
Untergeordnete Ansichten in einem Grid können in ihren Zellen durch die HorizontalOptions Eigenschaften und VerticalOptions positioniert werden. Diese Eigenschaften können in der Struktur auf die LayoutOptions folgenden Felder festgelegt werden:
Wichtig
Die AndExpands Felder in der LayoutOptions Struktur gelten nur für StackLayout Objekte.
Der folgende XAML-Code erstellt eine Grid mit neun Zellen gleicher Größe und platziert in jeder Zelle eine Label mit einer anderen Ausrichtung:
<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 sind die Label Objekte in jeder Zeile alle identisch vertikal ausgerichtet, verwenden jedoch unterschiedliche horizontale Ausrichtungen. Alternativ kann dies als die Objekte in jeder Spalte betrachtet werden, die Label identisch horizontal ausgerichtet sind, aber unterschiedliche vertikale Ausrichtungen verwenden:
Der entsprechende C#-Code lautet:
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;
}
}
Geschachtelte Grid-Objekte
Ein Grid kann als übergeordnetes Layout verwendet werden, das geschachtelte untergeordnete Grid Objekte oder andere untergeordnete Layouts enthält. Beim Schachteln von Grid Objekten verweisen die Grid.Rowangefügten Eigenschaften , Grid.Column, Grid.RowSpanund Grid.ColumnSpan immer auf die Position von Ansichten innerhalb des übergeordneten Grid.
Der folgende XAML-Code zeigt ein Beispiel für Schachtelungsobjekte Grid :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:GridDemos.Converters"
x:Class="GridDemos.Views.ColorSlidersGridPage"
Title="Nested Grids demo">
<ContentPage.Resources>
<converters:DoubleToIntConverter x:Key="doubleToInt" />
<Style TargetType="Label">
<Setter Property="HorizontalTextAlignment"
Value="Center" />
</Style>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView x:Name="boxView"
Color="Black" />
<Grid Grid.Row="1"
Margin="20">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Slider x:Name="redSlider"
ValueChanged="OnSliderValueChanged" />
<Label Grid.Row="1"
Text="{Binding Source={x:Reference redSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Red = {0}'}" />
<Slider x:Name="greenSlider"
Grid.Row="2"
ValueChanged="OnSliderValueChanged" />
<Label Grid.Row="3"
Text="{Binding Source={x:Reference greenSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Green = {0}'}" />
<Slider x:Name="blueSlider"
Grid.Row="4"
ValueChanged="OnSliderValueChanged" />
<Label Grid.Row="5"
Text="{Binding Source={x:Reference blueSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Blue = {0}'}" />
</Grid>
</Grid>
</ContentPage>
In diesem Beispiel enthält das Stammlayout Grid in BoxView der ersten Zeile und in der zweiten Zeile ein untergeordnetes Grid Element. Das untergeordnete Grid Objekt enthält Slider -Objekte, die die farbe bearbeiten, die BoxViewvon - und Label -Objekten angezeigt wird, die den Wert der einzelnen Slideranzeigen:
Wichtig
Je tiefer Sie Objekte und andere Layouts verschachteln Grid , desto stärker wirken sich die geschachtelten Layouts auf die Leistung aus. Weitere Informationen finden Sie unter Auswählen des richtigen Layouts.
Der entsprechende C#-Code lautet:
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);
}
}