Zusammenfassung von Kapitel 4. Scrollen im Stapel
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.
In diesem Kapitel wird in erster Linie das Konzept des Layouts eingeführt, wobei es sich um den allgemeinen Begriff für die Klassen und Methoden handelt, die von Xamarin.Forms zum Organisieren der visuellen Darstellung mehrerer Ansichten auf der Seite verwendet werden.
Layout umfasst mehrere Klassen, die von Layout und Layout<T>abgeleitet werden. Dieses Kapitel konzentriert sich auf StackLayout.
Hinweis
Das in Xamarin.Forms 3.0 eingeführte FlexLayout-Element kann auf ähnliche Weise wie StackLayout verwendet werden, aber es ist flexibler.
In diesem Kapitel werden außerdem die Klassen ScrollView, Frame und BoxView eingeführt.
Stapel von Ansichten
StackLayout wird von Layout<View> abgeleitet und erbt eine Children-Eigenschaft vom Typ IList<View>. Sie fügen dieser Sammlung mehrere Ansichtselemente hinzu, und StackLayout zeigt diese in einem horizontalen oder vertikalen Stapel an.
Legen Sie die Orientation-Eigenschaft von StackLayout auf einen Member der StackOrientation-Enumeration fest, entweder Vertical oder Horizontal. Der Standardwert ist Vertical.
Legen Sie die Spacing-Eigenschaft von StackLayout auf einen double-Wert fest, um einen Abstand zwischen den untergeordneten Elementen anzugeben. Der Standardwert ist 6.
In Code können Sie der Children-Sammlung von StackLayout in einer for- oder foreach-Schleife Elemente hinzufügen, wie im ColorLoop-Beispiel veranschaulicht, oder Sie können die Children-Sammlung mit einer Liste der einzelnen Ansichten initialisieren, wie in ColorList gezeigt. Die untergeordneten Elemente müssen von View abgeleitet werden, können aber andere StackLayout-Objekte enthalten.
Scrollen von Inhalt
Wenn ein StackLayout zu viele untergeordnete Elemente enthält, um sie auf einer Seite anzuzeigen, können Sie das StackLayout in einer ScrollView platzieren, um Scrollen zuzulassen.
Legen Sie die Content-Eigenschaft von ScrollView auf die Ansicht fest, die gescrollt werden können soll. Dies ist häufig ein StackLayout, kann aber jede beliebige Ansicht sein.
Legen Sie die Orientation -Eigenschaft von ScrollView auf ein Element der ScrollOrientation -Eigenschaft , VerticalHorizontaloder Bothfest. Der Standardwert ist Vertical. Wenn der Inhalt einer ScrollView ein StackLayout ist, sollten die beiden Ausrichtungen konsistent sein.
Das ReflectedColors-Beispiel veranschaulicht die Verwendung von ScrollView und StackLayout, um die verfügbaren Farben anzuzeigen. In dem Beispiel wird ebenfalls gezeigt, wie .NET-Reflexion verwendet wird, um alle öffentlichen, statischen Eigenschaften und Felder der Color-Struktur abzurufen, ohne diese explizit auflisten zu müssen.
Die Option „Expands“
Wenn ein StackLayout seine untergeordneten Elemente stapelt, belegt jedes untergeordnete Element einen bestimmten Slot innerhalb der Gesamthöhe des StackLayout, der von der Größe des untergeordneten Elements und den Einstellungen seiner HorizontalOptions- und VerticalOptions-Eigenschaften abhängt. Diesen Eigenschaften werden Werte vom Typ LayoutOptions zugewiesen.
Die LayoutOptions-Struktur definiert zwei Eigenschaften:
Alignmentdes EnumerationstypsLayoutAlignmentmit vier Membern,Start,Center,EndundFillExpandsvom Typbool
Zu Ihrer Bequemlichkeit definiert die LayoutOptions-Struktur definiert auch acht statische, schreibgeschützte Felder vom Typ LayoutOptions, die alle Kombinationen der beiden Instanzeigenschaften umfassen:
LayoutOptions.StartLayoutOptions.CenterLayoutOptions.EndLayoutOptions.FillLayoutOptions.StartAndExpandLayoutOptions.CenterAndExpandLayoutOptions.EndAndExpandLayoutOptions.FillAndExpand
Die folgende Erörterung umfasst ein StackLayout mit einer vertikalen Standardausrichtung. Das horizontale StackLayout ist analog.
Bei einem vertikalen StackLayout bestimmt die HorizontalOptions-Einstellung, wie ein untergeordnetes Element innerhalb der Breite des StackLayout horizontal positioniert wird. Eine Alignment-Einstellung von Start, Center oder End bewirkt, dass das untergeordnete Element horizontal uneingeschränkt ist. Das untergeordnete Element bestimmt seine eigene Breite und wird links, zentriert oder rechts vom StackLayout positioniert. Die Option Fill sorgt dafür, dass das untergeordnete Element horizontal eingeschränkt ist und die Breite des StackLayout ausfüllt.
Bei einem vertikalen StackLayout ist jedes untergeordnete Element vertikal uneingeschränkt und erhält einen vertikalen Slot, der von der Höhe des untergeordneten Elements abhängig ist, sodass in diesem Fall die Einstellung VerticalOptions irrelevant ist.
Wenn die Vertikale StackLayout selbst nicht eingeschränkt ist, d. h. wenn ihre VerticalOptions Einstellung Start, Centeroder Endlautet, dann ist die Höhe der StackLayout die Gesamthöhe ihrer untergeordneten Elemente.
Wenn die Vertikale StackLayout jedoch vertikal eingeschränkt ist – wenn ihre VerticalOptions Einstellung ist –, dann ist Filldie Höhe des StackLayout Containers die Höhe des Containers, die größer sein kann als die Gesamthöhe ihrer untergeordneten Elemente. Wenn dies der Fall ist und mindestens ein untergeordnetes Element über eine VerticalOptions-Einstellung mit einem Expands-Flag von true verfügt, wird der zusätzliche Platz im StackLayout gleichmäßig allen diesen untergeordneten Elementen mit einem Expands-Flag von true zugeordnet. Die Gesamthöhe der untergeordneten Elemente entspricht dann der Höhe des StackLayout, und der Alignment-Teil der VerticalOptions-Einstellung bestimmt, wie das untergeordnete Element vertikal im Slot positioniert wird.
Dies wird im VerticalOptionsDemo-Beispiel veranschaulicht.
„Frame“ und „BoxView“
Diese beiden rechteckigen Ansichten werden häufig zu Präsentationszwecken verwendet.
Die Frame-Ansicht zeigt einen rechteckigen Rahmen um eine weitere Ansicht an, bei der es sich um ein Layout wie StackLayout handeln kann. Frame erbt eine Content-Eigenschaft von ContentView, die Sie auf die Ansicht festlegen, die im Frame angezeigt werden soll. Der Frame ist standardmäßig transparent. Legen Sie die folgenden drei Eigenschaften fest, um die Darstellung des Frames anzupassen:
- Die
OutlineColor-Eigenschaft, um ihn sichtbar zu machen. Es ist üblich,OutlineColoraufColor.Accentfestzulegen, wenn Sie das zugrunde liegende Farbschema nicht kennen. - Die
HasShadow-Eigenschaft kann auftruefestgelegt werden, um einen schwarzen Schatten auf iOS-Geräten anzuzeigen. - Legen Sie die
Padding-Eigenschaft auf einenThickness-Wert fest, um zwischen dem Frame und seinem Inhalt Platz zu lassen. Der Standardwert beträgt 20 Einheiten auf allen Seiten.
Der Frame verfügt über Standardwerte für HorizontalOptions und VerticalOptions von LayoutOptions.Fill, was bedeutet, dass der Frame seinen Container ausfüllt. Bei anderen Einstellungen basiert die Größe des Frame auf der Größe seines Inhalts.
Der Frame wird im FramedText-Beispiel demonstriert.
Die BoxView zeigt einen rechteckigen Bereich mit einer Farbe an, die durch ihre Color-Eigenschaft bestimmt wird.
Wenn die BoxView eingeschränkt ist (die Standardeinstellungen ihrer Eigenschaften HorizontalOptions und VerticalOptions sind LayoutOptions.Fill), füllt die BoxView den für sie verfügbaren Platz aus. Wenn die BoxView uneingeschränkt ist (mit HorizontalOptions- und LayoutOptions-Einstellungen von Start, Center oder End), hat sie eine Standarddimension von 40 Einheiten im Quadrat. Eine BoxView kann in einer Dimension eingeschränkt und in einer anderen uneingeschränkt sein.
Häufig legen Sie die Eigenschaften WidthRequest und HeightRequest von BoxView fest, um eine bestimmte Größe für sie festzulegen. Dies wird im SizedBoxView-Beispiel illustriert.
Sie können mehrere Instanzen von StackLayout verwenden, um eine BoxView und mehrere Label-Instanzen in einem Frame zu kombinieren, um eine bestimmte Farbe anzuzeigen. Anschließend platzieren Sie jede dieser Ansichten in einem StackLayout in einer ScrollView, um die attraktive Liste mit Farben zu erstellen, die im ColorBlocks-Beispiel zu sehen ist:
Eine „ScrollView“ in einem „StackLayout“?
Es ist gängig, ein StackLayout in eine ScrollView einzufügen, aber auch das Einfügen einer ScrollView in ein StackLayout kann manchmal praktisch sein. Theoretisch sollte dies nicht möglich sein, da die untergeordneten Elemente eines vertikalen StackLayout vertikal uneingeschränkt sind. Eine ScrollView muss jedoch vertikal eingeschränkt sein. Ihr muss eine bestimmte Höhe zugewiesen werden, damit dann die Größe ihres untergeordneten Elements für das Scrollen bestimmt werden kann.
Der Trick besteht darin, eine VerticalOptions-Einstellung des untergeordneten ScrollView-Elements von StackLayout auf FillAndExpand festzulegen. Dies wird im BlackCat-Beispiel demonstriert.
Im BlackCat-Beispiel wird außerdem veranschaulicht, wie Sie Programmressourcen, die in die freigegebene Bibliothek eingebettet sind, definieren und auf diese zugreifen können. Dies kann auch mit Shared Asset Projects (SAPs) erreicht werden, aber der Prozess ist etwas komplexer, wie im BlackCatSap-Beispiel zu sehen ist.