Tutorial zu Xamarin.Forms-StackLayout

Für dieses Tutorial benötigen Sie das neueste Release von Visual Studio 2019 und die Workload Mobile-Entwicklung mit .NET.To complete this tutorial you should have Visual Studio 2019 (latest release), with the Mobile development with .NET workload installed. Außerdem müssen Sie über einen gekoppelten Mac verfügen, um die Tutorial-App unter iOS zu kompilieren.In addition, you will require a paired Mac to build the tutorial application on iOS. Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin.For information about installing the Xamarin platform, see Installing 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.For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

1. Starten Sie Visual Studio, und erstellen Sie eine neue leere Xamarin.Forms-App namens StackLayoutTutorial.Launch Visual Studio, and create a new blank Xamarin.Forms app named StackLayoutTutorial. Stellen Sie sicher, dass die App .NET Standard als Mechanismus für freigegebenen Code verwendet.Ensure that the app uses .NET Standard as the shared code mechanism.

   Wichtig

   Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe StackLayoutTutorial genannt wird.The C# and XAML snippets in this tutorial requires that the solution is named StackLayoutTutorial. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.Using a different name will result in build errors when you copy code from this tutorial into the solution.

   Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Anatomy of a Xamarin.Forms application (Aufbau einer Xamarin.Forms-Anwendung) im Artikel Xamarin.Forms Quickstart Deep Dive (Weitere Details zum Xamarin.Forms-Schnellstart).For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

2. Doppelklicken Sie im Projektmappen-Explorer im Projekt StackLayoutTutorial auf die Datei MainPage.xaml, um sie zu öffnen.In Solution Explorer, in the StackLayoutTutorial project, double-click MainPage.xaml to open it. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:Then, in MainPage.xaml, remove all of the template code and replace it with the following code:

   <?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.This code declaratively defines the user interface for the page, which consists of three Label instances in a StackLayout. Die StackLayout-Klasse positioniert ihre untergeordneten Ansichten (die Label-Instanzen) in einer einzelnen Zeile, die standardmäßig vertikal ausgerichtet wird.The StackLayout positions its child views (the Label instances) in a single line, which is oriented vertically by default. Darüber hinaus gibt die Margin-Eigenschaft die Renderingposition der StackLayout-Klasse innerhalb von ContentPage an.In addition, the Margin property indicates the rendering position of the StackLayout within the ContentPage.

   Hinweis

   Neben der Margin-Eigenschaft können auch die Eigenschaften Padding und Spacing auf eine StackLayout-Klasse festgelegt werden.In addition to the Margin property, Padding and Spacing properties can also be set on a StackLayout. 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.The Padding property value specifies the distance between views in the StackLayout, and the Spacing property value specifies the amount of space between each child element in the StackLayout. Weitere Informationen finden Sie unter Ränder und Abstände.For more information, see Margin and Padding.

3. 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:In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator:

   

   Weitere Informationen zur StackLayout-Klasse finden Sie unter Xamarin.Forms StackLayout.For more information about the StackLayout, see 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.To complete this tutorial you should have Visual Studio for Mac (latest release), with iOS and Android platform support installed. Zudem ist Xcode (neuestes Release) erforderlich.In addition, you will also require Xcode (latest release). Weitere Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin.For more information about installing the Xamarin platform, see Installing Xamarin.

1. Starten Sie Visual Studio für Mac, und erstellen Sie eine neue leere Xamarin.Forms-App namens StackLayoutTutorial.Launch Visual Studio for Mac, and create a new blank Xamarin.Forms app named StackLayoutTutorial. Stellen Sie sicher, dass die App .NET Standard als Mechanismus für freigegebenen Code verwendet.Ensure that the app uses .NET Standard as the shared code mechanism.

   Wichtig

   Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe StackLayoutTutorial genannt wird.The C# and XAML snippets in this tutorial requires that the solution is named StackLayoutTutorial. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.Using a different name will result in build errors when you copy code from this tutorial into the solution.

   Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Aufbau einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms Quickstart Deep Dive (Ausführliche Erläuterungen zum Xamarin.Forms-Schnellstart).For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

2. Doppelklicken Sie im Lösungspad im Projekt StackLayoutTutorial auf die Datei MainPage.xaml, um sie zu öffnen.In Solution Pad, in the StackLayoutTutorial project, double-click MainPage.xaml to open it. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:Then, in MainPage.xaml, remove all of the template code and replace it with the following code:

   <?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.This code declaratively defines the user interface for the page, which consists of three Label instances in a StackLayout. Die StackLayout-Klasse positioniert ihre untergeordneten Ansichten (die Label-Instanzen) in einer einzelnen Zeile, die standardmäßig vertikal ausgerichtet wird.The StackLayout positions its child views (the Label instances) in a single line, which is oriented vertically by default. Darüber hinaus gibt die Margin-Eigenschaft die Renderingposition der StackLayout-Klasse innerhalb von ContentPage an.In addition, the Margin property indicates the rendering position of the StackLayout within the ContentPage.

   Hinweis

   Neben der Margin-Eigenschaft können auch die Eigenschaften Padding und Spacing auf eine StackLayout-Klasse festgelegt werden.In addition to the Margin property, Padding and Spacing properties can also be set on a StackLayout. 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.The Padding property value specifies the distance between views in the StackLayout, and the Spacing property value specifies the amount of space between each child element in the StackLayout. Weitere Informationen finden Sie unter Ränder und Abstände.For more information, see Margin and Padding.

3. 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.In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

   

   Weitere Informationen zur StackLayout-Klasse finden Sie unter Xamarin.Forms StackLayout.For more information about the StackLayout, see Xamarin.Forms StackLayout.

1. Ändern Sie in MainPage.xaml die Deklaration StackLayout, sodass diese ihre untergeordneten Elemente horizontal und nicht vertikal ausrichtet:In MainPage.xaml, modify the StackLayout declaration so it aligns its children horizontally, instead of vertically:

   <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.This code sets the Orientation property to Horizontal.

2. 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:In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator:

   

   Wie Sie sehen können, sind die Label-Instanzen in der StackLayout-Klasse jetzt horizontal anstatt vertikal ausgerichtet.Note that the Label instances within the StackLayout are now aligned horizontally, instead of vertically.

1. Ändern Sie in MainPage.xaml die Deklaration StackLayout, sodass diese ihre untergeordneten Elemente horizontal und nicht vertikal ausrichtet:In MainPage.xaml, modify the StackLayout declaration so it aligns its children horizontally, instead of vertically:

   <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.This code sets the Orientation property to Horizontal.

2. 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.In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

   

   Wie Sie sehen können, sind die Label-Instanzen in der StackLayout-Klasse jetzt horizontal anstatt vertikal ausgerichtet.Note that the Label instances within the StackLayout are now aligned horizontally, instead of vertically.

1. Ändern Sie in MainPage.xaml die StackLayout-Deklaration, um die Optionen für die Ausrichtung und Erweiterung für jede Label-Klasse festzulegen:In MainPage.xaml, modify the StackLayout declaration to set alignment and expansion options for each Label:

   <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.This code sets alignment preferences on the first four Label instances, and expansion preferences on the final four Label instances. Die Felder Start, Center, End und Fill werden verwendet, um die Ausrichtung der Label-Instanzen innerhalb der übergeordneten StackLayout-Klasse zu definieren.The Start, Center, End, and Fill fields are used to define the alignment of the Label instances within the parent StackLayout. Die Felder StartAndExpand, CenterAndExpand, EndAndExpand und FillAndExpand werden verwendet, um die Ausrichtungseinstellung zu definieren und ob die Ansicht mehr Platz innerhalb der übergeordneten StackLayout-Klasse belegt (falls verfügbar).The StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand fields are used to define the alignment preference, and whether the view will occupy more space if available within the parent StackLayout.

   Hinweis

   Der Standardwert der Eigenschaften HorizontalOptions und VerticalOptions einer Ansicht lautet Fill.The default value of a view's HorizontalOptions and VerticalOptions properties is Fill.

2. 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:In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator:

   

   Eine StackLayout-Klasse respektiert ausschließlich die Ausrichtungseinstellungen für Ansichten untergeordneter Elemente, die sich in entgegengesetzter Richtung zur StackLayout-Ausrichtung befinden.A StackLayout only respects the alignment preferences on child views that are in the opposite direction to the StackLayout orientation. Deshalb legen die Ansichten der untergeordneten Label-Klasse innerhalb einer vertikal ausgerichteten StackLayout-Klasse ihre HorizontalOptions-Eigenschaften auf eines der Ausrichtungsfelder fest:Therefore, the Label child views within the vertically oriented StackLayout set their HorizontalOptions properties to one of the alignment fields:

   • Feld Start, das die Label-Klasse auf der linken Seite der StackLayout positioniertStart, which positions the Label on the left hand side of the StackLayout.
   • Feld Center, das die Label-Klasse in der Mitte der StackLayout-Klasse positioniertCenter, which centers the Label in the StackLayout.
   • Feld End, das die Label-Klasse auf der rechten Seite der StackLayout positioniertEnd, which positions the Label on the right hand side of the StackLayout.
   • Feld Fill, das sicherstellt, dass die Label-Klasse die gesamte Breite der StackLayout-Klasse ausfülltFill, which ensures that the Label fills the width of the StackLayout.

   Eine StackLayout-Klasse kann Ansichten untergeordneter Elemente nur in die Orientierungsrichtung erweitern.A StackLayout can only expand child views in the direction of its orientation. Deshalb kann die vertikal ausgerichtete StackLayout-Klasse die Ansichten untergeordneter Label-Klassen erweitern, die ihre VerticalOptions-Eigenschaften auf eines der Erweiterungsfelder festgelegt haben.Therefore, the vertically oriented StackLayout can expand Label child views that set their VerticalOptions properties to one of the expansion fields. Das bedeutet, dass jede Label-Klasse für die vertikale Ausrichtung den gleichen Platz innerhalb der StackLayout-Klasse belegt.This means that, for vertical alignment, each Label occupies the same amount of space within the StackLayout. Allerdings hat nur die letzte Label-Klasse, die ihre VerticalOptions-Eigenschaft auf FillAndExpand festlegt, eine andere Größe.However, only the final Label, which sets its VerticalOptions property to FillAndExpand has a different size.

   Wichtig

   Wenn der gesamte Platz in einer StackLayout-Klasse belegt ist, haben Einstellungen für die Erweiterung keine Auswirkungen.When all the space in a StackLayout is used, expansion preferences have no effect.

   Weitere Informationen zur Ausrichtung und Erweiterung finden Sie unter Layoutoptionen in Xamarin.Forms.For more information about alignment and expansion, see Layout Options in Xamarin.Forms.

1. Ändern Sie in MainPage.xaml die StackLayout-Deklaration, um die Optionen für die Ausrichtung und Erweiterung für jede Label-Klasse festzulegen:In MainPage.xaml, modify the StackLayout declaration to set alignment and expansion options for each Label:

   <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.This code sets alignment preferences on the first four Label instances, and expansion preferences on the final four Label instances. Die Felder Start, Center, End und Fill werden verwendet, um die Ausrichtung der Label-Instanzen innerhalb der übergeordneten StackLayout-Klasse zu definieren.The Start, Center, End, and Fill fields are used to define the alignment of the Label instances within the parent StackLayout. Die Felder StartAndExpand, CenterAndExpand, EndAndExpand und FillAndExpand werden verwendet, um die Ausrichtungseinstellung zu definieren und ob die Ansicht mehr Platz innerhalb der übergeordneten StackLayout-Klasse belegt (falls verfügbar).The StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand fields are used to define the alignment preference, and whether the view will occupy more space if available within the parent StackLayout.

   Hinweis

   Der Standardwert der Eigenschaften HorizontalOptions und VerticalOptions einer Ansicht lautet Fill.The default value of a view's HorizontalOptions and VerticalOptions properties is Fill.

2. 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.In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

   

   Eine StackLayout-Klasse respektiert ausschließlich die Ausrichtungseinstellungen für Ansichten untergeordneter Elemente, die sich in entgegengesetzter Richtung zur StackLayout-Ausrichtung befinden.A StackLayout only respects the alignment preferences on child views that are in the opposite direction to the StackLayout orientation. Deshalb legen die Ansichten der untergeordneten Label-Klasse innerhalb einer vertikal ausgerichteten StackLayout-Klasse ihre HorizontalOptions-Eigenschaften auf eines der Ausrichtungsfelder fest:Therefore, the Label child views within the vertically oriented StackLayout set their HorizontalOptions properties to one of the alignment fields:

   • Feld Start, das die Label-Klasse auf der linken Seite der StackLayout positioniertStart, which positions the Label on the left hand side of the StackLayout.
   • Feld Center, das die Label-Klasse in der Mitte der StackLayout-Klasse positioniertCenter, which centers the Label in the StackLayout.
   • Feld End, das die Label-Klasse auf der rechten Seite der StackLayout positioniertEnd, which positions the Label on the right hand side of the StackLayout.
   • Feld Fill, das sicherstellt, dass die Label-Klasse die gesamte Breite der StackLayout-Klasse ausfülltFill, which ensures that the Label fills the width of the StackLayout.

   Eine StackLayout-Klasse kann Ansichten untergeordneter Elemente nur in die Orientierungsrichtung erweitern.A StackLayout can only expand child views in the direction of its orientation. Deshalb kann die vertikal ausgerichtete StackLayout-Klasse die Ansichten untergeordneter Label-Klassen erweitern, die ihre VerticalOptions-Eigenschaften auf eines der Erweiterungsfelder festgelegt haben.Therefore, the vertically oriented StackLayout can expand Label child views that set their VerticalOptions properties to one of the expansion fields. Das bedeutet, dass jede Label-Klasse für die vertikale Ausrichtung den gleichen Platz innerhalb der StackLayout-Klasse belegt.This means that, for vertical alignment, each Label occupies the same amount of space within the StackLayout. Allerdings hat nur die letzte Label-Klasse, die ihre VerticalOptions-Eigenschaft auf FillAndExpand festlegt, eine andere Größe.However, only the final Label, which sets its VerticalOptions property to FillAndExpand has a different size.

   Wichtig

   Wenn der gesamte Platz in einer StackLayout-Klasse belegt ist, haben Einstellungen für die Erweiterung keine Auswirkungen.When all the space in a StackLayout is used, expansion preferences have no effect.

   Weitere Informationen zur Ausrichtung und Erweiterung finden Sie unter Layoutoptionen in Xamarin.Forms.For more information about alignment and expansion, see Layout Options in Xamarin.Forms.