Zusammenfassung von Kapitel 17: Arbeiten mit dem Raster
Das Beispiel herunterladenHinweis
Dieses Buch wurde im Frühjahr 2016 veröffentlicht und seitdem nicht aktualisiert. Wenngleich ein großer Teil des Buchs weiterhin relevante Informationen liefert, sind einige Abschnitte veraltet, und einige Themen sind nicht mehr korrekt oder vollständig.
Das Raster (Grid) ist ein leistungsstarker Layoutmechanismus, dessen untergeordnete Elemente in Zeilen und Spalten aus Zellen angeordnet sind. Im Gegensatz zu dem ähnlichen HTML-Element table ist das Grid ausschließlich für Layout- und nicht für Präsentationszwecke gedacht.
Das grundlegende Raster
Grid wird aus Layout<View> abgeleitet, welches eine Children-Eigenschaft definiert, die Grid erbt. Sie können diese Sammlung mit XAML oder Code auffüllen.
Das Raster in XAML
Das Definieren von Grid in XAML beginnt üblicherweise mit dem Auffüllen der Sammlungen RowDefinitions und ColumnDefinitions von Grid mit RowDefinition- und ColumnDefinition-Objekten. Auf diese Weise legen Sie die Anzahl von Zeilen und Spalten von Grid sowie deren Eigenschaften fest.
RowDefinition verfügt über die Eigenschaft Height und ColumnDefinition über die Eigenschaft Width, beide vom Typ GridLength, eine Struktur.
In XAML konvertiert GridLengthTypeConverter einfache Textzeichenfolgen in GridLength-Werte. Im Hintergrund erstellt der GridLength Konstruktor den GridLength Wert basierend auf einer Zahl und einem Wert vom Typ GridUnitType, einer Enumeration mit drei Membern:
Absolute— Die Breite oder Höhe wird in geräteunabhängigen Einheiten angegeben (eine Zahl in XAML).Auto— Die Höhe oder Breite wird basierend auf Zellinhalten ("Auto" in XAML) autosisiert.Star— Resthöhe oder Breite wird proportional zugeordnet (eine Zahl mit "*", in XAML star genannt)
Allen untergeordneten Elementen von Grid muss außerdem eine Zeile und Spalte zugeordnet werden (entweder explizit oder implizit). Zeilen- und Spaltenweite sind optional. Diese werden alle mithilfe angefügter bindungsfähiger Eigenschaften angegeben – Eigenschaften, die Grid vom definiert werden, aber auf untergeordnete Elemente des Gridfestgelegt werden. Grid definiert vier statische angefügte bindbare Eigenschaften:
RowProperty— die nullbasierte Zeile; Standardwert ist 0.ColumnProperty— die nullbasierte Spalte; Standardwert ist 0.RowSpanProperty— die Anzahl der Zeilen, die das untergeordnete Element umfasst; Standardwert ist 1.ColumnSpanProperty— die Anzahl der Spalten, die das untergeordnete Element umfasst; Standardwert ist 1.
Im Code kann ein Programm die folgenden acht statischen Methoden verwenden, um diese Werte festzulegen und abzurufen:
Grid.SetRowundGrid.GetRowGrid.SetColumnundGrid.GetColumnGrid.SetRowSpanundGrid.GetRowSpanGrid.SetColumnSpanundGrid.GetColumnSpan
In XAML werden diese Werte mit den folgenden Attributen festgelegt:
Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpan
Im Beispiel SimpleGridDemo wird gezeigt, wie ein Grid in XAML erstellt und initialisiert wird.
Das Grid erbt die Eigenschaft Padding von Layout und definiert zwei zusätzliche Eigenschaften für Abstand zwischen den Zeilen und Spalten:
RowSpacinghat einen Standardwert von 6.ColumnSpacinghat einen Standardwert von 6.
Die Sammlungen RowDefinitions und ColumnDefinitions sind nicht zwingend erforderlich. Wenn nicht vorhanden, erstellt die Zeilen Grid und Spalten für die Grid untergeordneten Elemente und gibt ihnen den Standardwert GridLength "*" (star).
Das Raster in Code
Im Beispiel GridCodeDemo wird gezeigt, wie ein Grid in Code erstellt und aufgefüllt wird. Sie können die angefügten Eigenschaften für jedes untergeordnete Element direkt oder indirekt festlegen, indem Sie zusätzliche Add Methoden aufrufen, z. BAdd. durch die Grid.IGridList T-Schnittstelle<> definiert.
Das Raster-Balkendiagramm
Im Beispiel GridBarChart wird gezeigt, wie Sie mehrere BoxView-Elemente zu einem Grid hinzufügen, indem Sie die Massenmethode AddHorizontal verwenden. Standardmäßig sind diese BoxView-Elemente gleich breit. Die Höhe jedes BoxView-Elements kann dann so gesteuert werden, dass das Raster einem Balkendiagramm ähnelt.
Das Grid im Beispiel GridBarChart verfügt zusammen mit einem ursprünglich unsichtbaren Frame über ein gemeinsames übergeordnetes Element AbsoluteLayout. Das Programm legt außerdem einen TapGestureRecognizer für jede BoxView fest, um den Frame zum Anzeigen von Informationen über die angetippte Leiste zu verwenden.
Ausrichtung im Raster
Im Beispiel GridAlignment wird gezeigt, wie Sie mit den Eigenschaften VerticalOptions und HorizontalOptions untergeordnete Elemente in einer Grid-Zelle ausrichten.
Im Beispiel SpacingButtons werden gleichmäßige Abstände zwischen in Grid-Zellen zentrierte Button-Elemente gesetzt.
Trennlinien zwischen Zellen und Rahmen
Das Grid verfügt über kein Feature für Trennlinien zwischen Zellen und Rahmen. Sie können diese allerdings selbst erstellen.
In GridCellDividers wird gezeigt, wie Sie zusätzliche Zeilen und Spalten speziell für dünne BoxView-Elemente definieren, um Trennlinien zu imitieren.
Das Programm GridCellBorders erstellt keine zusätzlichen Zellen, sondern richtet BoxView-Elemente in jeder Zelle aus, um einen Zellenrahmen zu imitieren.
Fast aus dem Leben gegriffene Beispiele für Raster
Im Beispiel KeypadGrid wird ein Grid verwendet, um eine Zehnertastatur anzuzeigen:
Reagieren auf Änderung der Ausrichtung
Mit dem Grid kann ein Programm so strukturiert werden, dass es auf eine Änderung der Ausrichtung reagiert. Im Beispiel GridRgbSliders wird eine Technik gezeigt, mit der ein Element von der zweiten Zeile bei einem Telefon im Hochformat in die zweite Spalte bei einem Telefon im Querformat verschoben wird und umgekehrt.
Das Programm initialisiert Slider-Elemente mit einer Spanne von 0 bis 255 und verwendet Datenbindungen, um den Wert der Schieberegler als Hexadezimalzahl anzuzeigen. Da es sich bei den Slider Werten um Gleitkommawerte handelt und die .NET-Formatierungszeichenfolge für Hexadezimalstellen nur mit ganzen Zahlen funktioniert, hilft eine DoubleToIntConvert Klasse in der Xamarin.FormsBook.Toolkit-Bibliothek aus.