Tutorial zu Xamarin.Forms-StackLayout
Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zunächst Folgendes erfolgreich abgeschlossen haben:Before attempting this tutorial, you should have successfully completed the:
- Den Schnellstart Erstellen Ihrer ersten Xamarin.Forms-AppBuild your first Xamarin.Forms app quickstart.
In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:In this tutorial, you learn how to:
- Erstellen eines Xamarin.Forms-
StackLayout
-Elements in XAMLCreate a Xamarin.FormsStackLayout
in XAML. - Angeben der Ausrichtung des
StackLayout
-ElementsSpecify the orientation of theStackLayout
. - Steuern der Ausrichtung und Erweiterung der untergeordneten Ansicht innerhalb des
StackLayout
-ElementsControl child view alignment and expansion within theStackLayout
.
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.You will use Visual Studio 2019, or Visual Studio for Mac, to create a simple application that demonstrates how to align controls within a StackLayout
. Die folgenden Screenshots zeigen die finale Anwendung:The following screenshots show the final application:
Erstellen eines StackLayout-Elements
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.
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.
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 einerStackLayout
-Klasse besteht.This code declaratively defines the user interface for the page, which consists of threeLabel
instances in aStackLayout
. DieStackLayout
-Klasse positioniert ihre untergeordneten Ansichten (dieLabel
-Instanzen) in einer einzelnen Zeile, die standardmäßig vertikal ausgerichtet wird.TheStackLayout
positions its child views (theLabel
instances) in a single line, which is oriented vertically by default. Darüber hinaus gibt dieMargin
-Eigenschaft die Renderingposition derStackLayout
-Klasse innerhalb vonContentPage
an.In addition, theMargin
property indicates the rendering position of theStackLayout
within theContentPage
.Hinweis
Neben der
Margin
-Eigenschaft können auch die EigenschaftenPadding
undSpacing
auf eineStackLayout
-Klasse festgelegt werden.In addition to theMargin
property,Padding
andSpacing
properties can also be set on aStackLayout
. DerPadding
-Eigenschaftswert gibt den Abstand zwischen Ansichten in derStackLayout
-Klasse an, und derSpacing
-Eigenschaftswert gibt den Abstand zwischen den einzelnen untergeordneten Elementen in derStackLayout
-Klasse an.ThePadding
property value specifies the distance between views in theStackLayout
, and theSpacing
property value specifies the amount of space between each child element in theStackLayout
. Weitere Informationen finden Sie unter Ränder und Abstände.For more information, see Margin and Padding.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 theStackLayout
, see Xamarin.Forms StackLayout.
Festlegen der Ausrichtung
Ändern Sie in MainPage.xaml die Deklaration
StackLayout
, sodass diese ihre untergeordneten Elemente horizontal und nicht vertikal ausrichtet:In MainPage.xaml, modify theStackLayout
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 aufHorizontal
festgelegt.This code sets theOrientation
property toHorizontal
.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 derStackLayout
-Klasse jetzt horizontal anstatt vertikal ausgerichtet.Note that theLabel
instances within theStackLayout
are now aligned horizontally, instead of vertically.
Steuern von Ausrichtung und Erweiterung
Die Größe und Position untergeordneter Ansichten innerhalb einer StackLayout
-Klasse hängen von den Werten der Eigenschaften HeightRequest
und WidthRequest
der untergeordneten Ansichten ab sowie den Werten der Eigenschaften HorizontalOptions
und VerticalOptions
.The size and position of child views within a StackLayout
depend upon the values of the child views' HeightRequest
and WidthRequest
properties, and the values of the HorizontalOptions
and VerticalOptions
properties.
Die Eigenschaften HorizontalOptions
und VerticalOptions
können auf Felder der LayoutOptions
-Struktur festgelegt werden, die zwei Layouteinstellungen kapselt:The HorizontalOptions
and VerticalOptions
properties can be set to fields from the LayoutOptions
struct, which encapsulates two layout preferences:
- Ausrichten: Die bevorzugte Ausrichtung des untergeordneten Elements, die die Position und Größe des untergeordneten Elements innerhalb des Layouts des übergeordneten Elements bestimmtAlignment – the child view's preferred alignment, which determines its position and size within its parent layout.
- Erweiterung: Gibt an, ob die Ansicht untergeordneter Elemente zusätzlichen Platz (falls vorhanden) verwenden soll (nur von einer
StackLayout
-Klasse verwendet)Expansion – indicates if the child view should use extra space, if it's available (used only by aStackLayout
).
Ändern Sie in MainPage.xaml die
StackLayout
-Deklaration, um die Optionen für die Ausrichtung und Erweiterung für jedeLabel
-Klasse festzulegen:In MainPage.xaml, modify theStackLayout
declaration to set alignment and expansion options for eachLabel
:<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 vierLabel
-Instanzen.This code sets alignment preferences on the first fourLabel
instances, and expansion preferences on the final fourLabel
instances. Die FelderStart
,Center
,End
undFill
werden verwendet, um die Ausrichtung derLabel
-Instanzen innerhalb der übergeordnetenStackLayout
-Klasse zu definieren.TheStart
,Center
,End
, andFill
fields are used to define the alignment of theLabel
instances within the parentStackLayout
. Die FelderStartAndExpand
,CenterAndExpand
,EndAndExpand
undFillAndExpand
werden verwendet, um die Ausrichtungseinstellung zu definieren und ob die Ansicht mehr Platz innerhalb der übergeordnetenStackLayout
-Klasse belegt (falls verfügbar).TheStartAndExpand
,CenterAndExpand
,EndAndExpand
, andFillAndExpand
fields are used to define the alignment preference, and whether the view will occupy more space if available within the parentStackLayout
.Hinweis
Der Standardwert der Eigenschaften
HorizontalOptions
undVerticalOptions
einer Ansicht lautetFill
.The default value of a view'sHorizontalOptions
andVerticalOptions
properties isFill
.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 zurStackLayout
-Ausrichtung befinden.AStackLayout
only respects the alignment preferences on child views that are in the opposite direction to theStackLayout
orientation. Deshalb legen die Ansichten der untergeordnetenLabel
-Klasse innerhalb einer vertikal ausgerichtetenStackLayout
-Klasse ihreHorizontalOptions
-Eigenschaften auf eines der Ausrichtungsfelder fest:Therefore, theLabel
child views within the vertically orientedStackLayout
set theirHorizontalOptions
properties to one of the alignment fields:- Feld
Start
, das dieLabel
-Klasse auf der linken Seite derStackLayout
positioniertStart
, which positions theLabel
on the left hand side of theStackLayout
. - Feld
Center
, das dieLabel
-Klasse in der Mitte derStackLayout
-Klasse positioniertCenter
, which centers theLabel
in theStackLayout
. - Feld
End
, das dieLabel
-Klasse auf der rechten Seite derStackLayout
positioniertEnd
, which positions theLabel
on the right hand side of theStackLayout
. - Feld
Fill
, das sicherstellt, dass dieLabel
-Klasse die gesamte Breite derStackLayout
-Klasse ausfülltFill
, which ensures that theLabel
fills the width of theStackLayout
.
Eine
StackLayout
-Klasse kann Ansichten untergeordneter Elemente nur in die Orientierungsrichtung erweitern.AStackLayout
can only expand child views in the direction of its orientation. Deshalb kann die vertikal ausgerichteteStackLayout
-Klasse die Ansichten untergeordneterLabel
-Klassen erweitern, die ihreVerticalOptions
-Eigenschaften auf eines der Erweiterungsfelder festgelegt haben.Therefore, the vertically orientedStackLayout
can expandLabel
child views that set theirVerticalOptions
properties to one of the expansion fields. Das bedeutet, dass jedeLabel
-Klasse für die vertikale Ausrichtung den gleichen Platz innerhalb derStackLayout
-Klasse belegt.This means that, for vertical alignment, eachLabel
occupies the same amount of space within theStackLayout
. Allerdings hat nur die letzteLabel
-Klasse, die ihreVerticalOptions
-Eigenschaft aufFillAndExpand
festlegt, eine andere Größe.However, only the finalLabel
, which sets itsVerticalOptions
property toFillAndExpand
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 aStackLayout
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.
- Feld
Herzlichen Glückwunsch!
Glückwunsch, Sie haben das Tutorial erfolgreich abgeschlossen und Folgendes gelernt:Congratulations on completing this tutorial, where you learned how to:
- Erstellen eines Xamarin.Forms-
StackLayout
-Elements in XAMLCreate a Xamarin.FormsStackLayout
in XAML. - Angeben der Ausrichtung des
StackLayout
-ElementsSpecify the orientation of theStackLayout
. - Steuern der Ausrichtung und Erweiterung der untergeordneten Ansicht innerhalb des
StackLayout
-ElementsControl child view alignment and expansion within theStackLayout
.
Nächste SchritteNext steps
Wenn Sie mehr über die Grundlagen bei der Erstellung mobiler Apps mit Xamarin.Forms lernen möchten, fahren Sie mit dem Tutorial zur Label-Klasse fort.To learn more about the basics of creating mobile applications with Xamarin.Forms, continue to the Label tutorial.
Verwandte LinksRelated links
- StackLayoutTutorial (sample) (Tutorial zu StackLayout (Beispiel))StackLayoutTutorial (sample)
- Xamarin.Forms StackLayout (guide) (Tutorial zu StackLayout in Xamarin.Forms (Leitfaden))Xamarin.Forms StackLayout (guide)
- Ränder und Abstände (Leitfaden)Margin and Padding (guide)
- Layout Options in Xamarin.Forms (guide) (Layoutoptionen in Xamarin.Forms (Leitfaden))Layout Options in Xamarin.Forms (guide)
- StackLayout-APIStackLayout API
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.