Xamarin.Forms: Tutorial zu StackLayout

Artikel
Developer (Anfänger)
10 Minuten bis zum Abschluss

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zunächst Folgendes erfolgreich abgeschlossen haben:

Schnellstartanleitung Erstellen Ihrer ersten Xamarin.Forms-App

In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:

Erstellen eines Xamarin.FormsStackLayout-Elements in XAML
Angeben der Ausrichtung des StackLayout-Elements
Steuern der Ausrichtung und Erweiterung der untergeordneten Ansicht innerhalb des StackLayout-Elements

Sie verwenden Visual Studio 2019 oder Visual Studio für Mac, um eine einfache Anwendung zu erstellen, die zeigt, wie Sie die Ausrichtungssteuerelemente innerhalb eines StackLayout anpassen können. Die folgenden Screenshots zeigen die finale Anwendung:

Außerdem verwenden Sie XAML Hot Reload für Xamarin.Forms, um Änderungen an der Benutzeroberfläche anzuzeigen, ohne die Anwendung neu zu erstellen.

Erstellen eines StackLayout-Elements

9 Minuten verbleibend

Bei einem StackLayout handelt es sich um ein Layout, das untergeordnete Elemente in einem eindimensionalen Stapel entweder horizontal oder vertikal anordnet. Standardmäßig ist ein StackLayout vertikal ausgerichtet.

Visual Studio
Visual Studio für Mac

Für dieses Tutorial benötigen Sie das neueste Release von Visual Studio 2019 und die Workload Mobile-Entwicklung mit .NET. Außerdem müssen Sie über einen gekoppelten Mac verfügen, um die Tutorial-App unter iOS zu kompilieren. Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin. Informationen zum Verbinden von Visual Studio 2019 mit einem Mac-Buildhost finden Sie unter Durchführen einer Kopplung mit einem Mac für die Xamarin.iOS-Entwicklung.

Starten Sie Visual Studio, und erstellen Sie eine neue leere Xamarin.Forms-App namens StackLayoutTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe StackLayoutTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.

Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Doppelklicken Sie im Projektmappen-Explorer im Projekt StackLayoutTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die aus drei Label-Instanzen in einer StackLayout-Klasse besteht. Die StackLayout-Klasse positioniert ihre untergeordneten Ansichten (die Label-Instanzen) in einer einzelnen Zeile, die standardmäßig vertikal ausgerichtet wird. Darüber hinaus gibt die Margin-Eigenschaft die Renderingposition der StackLayout-Klasse innerhalb von ContentPage an.

Hinweis

Neben der Margin-Eigenschaft können auch die Eigenschaften Padding und Spacing auf eine StackLayout-Klasse festgelegt werden. Der Padding-Eigenschaftswert gibt den Abstand zwischen Ansichten in der StackLayout-Klasse an, und der Spacing-Eigenschaftswert gibt den Abstand zwischen den einzelnen untergeordneten Elementen in der StackLayout-Klasse an. Weitere Informationen finden Sie unter Ränder und Abstände.
Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Weitere Informationen zur StackLayout-Klasse finden Sie unter Xamarin.Forms StackLayout.

Für dieses Tutorial benötigen Sie Visual Studio für Mac (neuestes Release) mit Plattformunterstützung für iOS und Android. Zudem ist Xcode (neuestes Release) erforderlich. Weitere Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin.

Starten Sie Visual Studio für Mac, und erstellen Sie eine neue leere Xamarin.Forms-App namens StackLayoutTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe StackLayoutTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.

Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Doppelklicken Sie im Lösungspad im Projekt StackLayoutTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die aus drei Label-Instanzen in einer StackLayout-Klasse besteht. Die StackLayout-Klasse positioniert ihre untergeordneten Ansichten (die Label-Instanzen) in einer einzelnen Zeile, die standardmäßig vertikal ausgerichtet wird. Darüber hinaus gibt die Margin-Eigenschaft die Renderingposition der StackLayout-Klasse innerhalb von ContentPage an.

Hinweis

Neben der Margin-Eigenschaft können auch die Eigenschaften Padding und Spacing auf eine StackLayout-Klasse festgelegt werden. Der Padding-Eigenschaftswert gibt den Abstand zwischen Ansichten in der StackLayout-Klasse an, und der Spacing-Eigenschaftswert gibt den Abstand zwischen den einzelnen untergeordneten Elementen in der StackLayout-Klasse an. Weitere Informationen finden Sie unter Ränder und Abstände.
Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten.

Weitere Informationen zur StackLayout-Klasse finden Sie unter Xamarin.Forms StackLayout.

Festlegen der Ausrichtung

6 Minuten verbleibend

Visual Studio
Visual Studio für Mac

Ändern Sie in MainPage.xaml die StackLayout-Deklaration, sodass diese ihre untergeordneten Elemente horizontal anstatt vertikal ausrichtet:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Im folgenden Code wird die Orientation-Eigenschaft auf Horizontal festgelegt.

Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Wie Sie sehen können, sind die Label-Instanzen in der StackLayout-Klasse jetzt horizontal anstatt vertikal ausgerichtet.

Ändern Sie in MainPage.xaml die StackLayout-Deklaration, sodass diese ihre untergeordneten Elemente horizontal anstatt vertikal ausrichtet:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Im folgenden Code wird die Orientation-Eigenschaft auf Horizontal festgelegt.

Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten:

Wie Sie sehen können, sind die Label-Instanzen in der StackLayout-Klasse jetzt horizontal anstatt vertikal ausgerichtet.

Steuern von Ausrichtung und Erweiterung

4 Minuten verbleibend

Die Größe und Position untergeordneter Ansichten innerhalb eines StackLayout hängen von den Werten der Eigenschaften HeightRequest und WidthRequest der untergeordneten Ansichten sowie den Werten der Eigenschaften HorizontalOptions und VerticalOptions ab.

Die Eigenschaften HorizontalOptions und VerticalOptions können auf Felder der LayoutOptions-Struktur festgelegt werden, die zwei Layouteinstellungen kapselt:

Ausrichten: Die bevorzugte Ausrichtung des untergeordneten Elements, die die Position und Größe des untergeordneten Elements innerhalb des Layouts des übergeordneten Elements bestimmt
Erweiterung: Gibt an, ob die untergeordnete Ansicht zusätzlichen Platz verwenden soll, sofern vorhanden (wird nur durch ein StackLayout verwendet).

Visual Studio
Visual Studio für Mac

Ändern Sie in MainPage.xaml die StackLayout-Deklaration, um die Optionen für die Ausrichtung und Erweiterung für jede Label-Klasse festzulegen:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Dieser Code legt die Ausrichtungseinstellungen für die ersten vier Label-Instanzen fest sowie die Erweiterungseinstellungen für die letzten vier Label-Instanzen. Die Felder Start, Center, End und Fill werden verwendet, um die Ausrichtung der Label-Instanzen innerhalb des übergeordneten StackLayout-Elements zu definieren. Die Felder StartAndExpand, CenterAndExpand, EndAndExpand und FillAndExpand definieren die bevorzugte Ausrichtungseinstellung und legen fest, ob die Ansicht mehr Platz belegt, sofern im übergeordneten StackLayout-Element vorhanden.

Hinweis

Der Standardwert der Eigenschaften HorizontalOptions und VerticalOptions einer Ansicht lautet Fill.

Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Eine StackLayout-Klasse respektiert ausschließlich die Ausrichtungseinstellungen für Ansichten untergeordneter Elemente, die sich in entgegengesetzter Richtung zur StackLayout-Ausrichtung befinden. Deshalb legen die Ansichten der untergeordneten Label-Klasse innerhalb einer vertikal ausgerichteten StackLayout-Klasse ihre HorizontalOptions-Eigenschaften auf eines der Ausrichtungsfelder fest:
- Feld Start, das die Label-Klasse auf der linken Seite der StackLayout positioniert
- Feld Center, das die Label-Klasse in der Mitte der StackLayout-Klasse positioniert
- Feld End, das die Label-Klasse auf der rechten Seite der StackLayout positioniert
- Feld Fill, das sicherstellt, dass die Label-Klasse die gesamte Breite der StackLayout-Klasse ausfüllt
Eine StackLayout-Klasse kann Ansichten untergeordneter Elemente nur in die Orientierungsrichtung erweitern. Deshalb kann die vertikal ausgerichtete StackLayout-Klasse die Ansichten untergeordneter Label-Klassen erweitern, die ihre VerticalOptions-Eigenschaften auf eines der Erweiterungsfelder festgelegt haben. Das bedeutet, dass jede Label-Klasse für die vertikale Ausrichtung den gleichen Platz innerhalb der StackLayout-Klasse belegt. Allerdings hat nur die letzte Label-Klasse, die ihre VerticalOptions-Eigenschaft auf FillAndExpand festlegt, eine andere Größe.

Wichtig

Wenn der gesamte Platz in einer StackLayout-Klasse belegt ist, haben Einstellungen für die Erweiterung keine Auswirkungen.

Beenden Sie die Anwendung in Visual Studio.

Weitere Informationen zur Ausrichtung und Erweiterung finden Sie unter Layoutoptionen in Xamarin.Forms.

Ändern Sie in MainPage.xaml die StackLayout-Deklaration, um die Optionen für die Ausrichtung und Erweiterung für jede Label-Klasse festzulegen:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Hinweis

Der Standardwert der Eigenschaften HorizontalOptions und VerticalOptions einer Ansicht lautet Fill.

Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten:

Eine StackLayout-Klasse respektiert ausschließlich die Ausrichtungseinstellungen für Ansichten untergeordneter Elemente, die sich in entgegengesetzter Richtung zur StackLayout-Ausrichtung befinden. Deshalb legen die Ansichten der untergeordneten Label-Klasse innerhalb einer vertikal ausgerichteten StackLayout-Klasse ihre HorizontalOptions-Eigenschaften auf eines der Ausrichtungsfelder fest:
- Feld Start, das die Label-Klasse auf der linken Seite der StackLayout positioniert
- Feld Center, das die Label-Klasse in der Mitte der StackLayout-Klasse positioniert
- Feld End, das die Label-Klasse auf der rechten Seite der StackLayout positioniert
- Feld Fill, das sicherstellt, dass die Label-Klasse die gesamte Breite der StackLayout-Klasse ausfüllt
Eine StackLayout-Klasse kann Ansichten untergeordneter Elemente nur in die Orientierungsrichtung erweitern. Deshalb kann die vertikal ausgerichtete StackLayout-Klasse die Ansichten untergeordneter Label-Klassen erweitern, die ihre VerticalOptions-Eigenschaften auf eines der Erweiterungsfelder festgelegt haben. Das bedeutet, dass jede Label-Klasse für die vertikale Ausrichtung den gleichen Platz innerhalb der StackLayout-Klasse belegt. Allerdings hat nur die letzte Label-Klasse, die ihre VerticalOptions-Eigenschaft auf FillAndExpand festlegt, eine andere Größe.

Wichtig

Wenn der gesamte Platz in einer StackLayout-Klasse belegt ist, haben Einstellungen für die Erweiterung keine Auswirkungen.

Beenden Sie die Anwendung in Visual Studio für Mac.

Weitere Informationen zur Ausrichtung und Erweiterung finden Sie unter Layoutoptionen in Xamarin.Forms.

Xamarin.Forms: Tutorial zu StackLayout

Erstellen eines StackLayout-Elements

Festlegen der Ausrichtung

Steuern von Ausrichtung und Erweiterung

Herzlichen Glückwunsch!

Nächste Schritte

Xamarin.Forms: Tutorial zu StackLayout

Erstellen eines StackLayout-Elements

Festlegen der Ausrichtung

Steuern von Ausrichtung und Erweiterung

Herzlichen Glückwunsch!

Nächste Schritte

Verwandte Links