Zusammenfassung von Kapitel 4. „Scrollen im Stapel“
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.
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 einen Member der ScrollOrientation
-Eigenschaft fest, Vertical
, Horizontal
oder Both
. 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:
Alignment
des EnumerationstypsLayoutAlignment
mit vier Membern,Start
,Center
,End
undFill
.Expands
vom 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.Start
LayoutOptions.Center
LayoutOptions.End
LayoutOptions.Fill
LayoutOptions.StartAndExpand
LayoutOptions.CenterAndExpand
LayoutOptions.EndAndExpand
LayoutOptions.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 die VerticalOptions
Einstellung Start
, Center
oder End
die Höhe der StackLayout
zugehörigen Untergeordneten ist, ist die Höhe der untergeordneten Elemente.
Wenn die Vertikale StackLayout
jedoch vertikal eingeschränkt ist – wenn die VerticalOptions
Einstellung der Einstellung ist Fill
– dann ist die Höhe des StackLayout
Containers die Höhe des Containers, der größer als die Gesamthöhe seiner untergeordneten Elemente sein kann. 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,OutlineColor
aufColor.Accent
festzulegen, wenn Sie das zugrunde liegende Farbschema nicht kennen. - Die
HasShadow
-Eigenschaft kann auftrue
festgelegt 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.