Zusammenfassung von Kapitel 17: Optimieren des Rasters
Hinweis
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. Dabei erstellt der GridLength-Konstruktor im Hintergrund den Wert für GridLength auf Grundlage einer Zahl und eines Werts für den Typ GridUnitType, eine Enumeration mit drei Elementen:
Absolute— die Breite oder Höhe wird in geräteunabhängigen Einheiten (eine Zahl in XAML) angegeben.Auto— die Höhe oder Breite wird basierend auf Zellinhalten automatisch ("Auto" in XAML)Star— Die Höhe oder Breite von Links wird proportional zugewiesen (eine Zahl mit "*", die in XAML als Stern bezeichnet wird)
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 aber für untergeordnete Elemente der .Grid Grid definiert vier statische angefügte bindbare Eigenschaften:
RowProperty— die nullbasierte Zeile; Standard ist 0.ColumnProperty— die nullbasierte Spalte; Standard ist 0.RowSpanProperty— die Anzahl der Zeilen, über die sich das untergeordnete Element erstreckt; Standard ist 1ColumnSpanProperty— die Anzahl der Spalten, über die sich das untergeordnete Element erstreckt; Standard 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 sie nicht vorhanden ist, werden die Grid Zeilen und Spalten für die Grid untergeordneten Elemente erstellt und erhalten alle die Standardeinstellung GridLength "*" (Stern).
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 Add . B. 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 Gleitkommazahlen handelt und die .NET-Formatierungszeichenfolge für Hexadezimalzahlen nur mit Zahlen vom Typ Integer funktioniert, wird eine DoubleToIntConvert-Klasse aus der Bibliothek Xamarin.FormsBook.Toolkit verwendet.