Language: HTML | XAML

Schnellstart: Definieren von Layouts (XAML)

Applies to Windows and Windows Phone

Wenn Sie eine Windows-Runtime-App mit C++, C# oder Visual Basic erstellen, steht Ihnen ein flexibles Layoutsystem zur Verfügung, mit dem Sie verschiedene Geräte und App-Zustände unterstützen können. Mit einem flexiblen Design können Sie für Ihre App ein großartiges Erscheinungsbild auf Bildschirmen mit unterschiedlichen Größen, Auflösungen, Pixeldichten und Ausrichtungen von App-Fenstern erstellen. Es wird beschrieben, wie Sie eine Benutzeroberfläche entwerfen, die automatisch an unterschiedliche Größen angepasst wird.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Voraussetzungen

In diesem Thema wird davon ausgegangen, dass Sie mit C++, C# oder Visual Basic eine einfache Windows-Runtime-App erstellen können. Anweisungen zum Erstellen der ersten Windows-Runtime-App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit C# oder Visual Basic.

Richtlinien für die Benutzeroberfläche (bewährte Methoden)

Auch wenn dieses Thema nur eine Einführung in grundlegende Layouts bietet, sollten Sie einige Richtlinien in Bezug auf die Benutzeroberfläche berücksichtigen.

Übersicht über Layouts

Als Layout bezeichnet man das Anpassen und Positionieren von Objekten auf der Benutzeroberfläche. Sie müssen visuelle Objekte in einem Panel oder einem anderen Containerobjekt platzieren, um sie zu positionieren. Das XAML-Framework bietet verschiedene Panel-Klassen, z. B. Canvas, StackPanel und Grid, die als Container dienen und Ihnen das Platzieren und Anordnen der darin enthaltenen UI-Elemente ermöglichen.

Das XAML-Layoutsystem unterstützt feste und dynamische Layouts. In einem festen Layout erfolgt die Größenfestlegung und Positionierung der Elemente mithilfe von explizieten Abmessungen. Sie können z. B. ein Canvas-Panel für die feste Positionierung verwenden. Zudem können Sie eine feste Größe für ein Element festlegen, und zwar unabhängig davon, in welchem Layoutbereich es enthalten ist. In einem dynamischen Layout wird die Größe der Benutzeroberfläche gemäß Proportionen (im Fall von Rasterzeilen und -spalten) oder gemäß dem Inhalt der Bereiche und Steuerelemente oder gemäß verschiedenen Bildschirmauflösungen festgelegt. Verwenden Sie bei einem dynamischen Layout beispielsweise StackPanel, Grid oder VariableSizedWrapGrid.

Festes Layout

In einem festen Layout ordnen Sie die untergeordneten Elemente in einem Layoutbereich an, indem Sie die genaue Position und Größe im Verhältnis zum übergeordneten Element angeben. Bei der festen Positionierung wird nicht zwingend berücksichtigt, dass die Größe des Bildschirms oder des App-Fensters auf unterschiedlichen Geräten verschieden ist. Sofern für die App eine feste Anordnung der UI-Elemente erforderlich ist und gleichzeitig die Größe des App-Fensters angepasst wird, können Sie unterschiedliche Seiten für verschiedene Bildschirmauflösungen entwerfen oder alternativ eine Skalierung durchführen.

Alle Bereiche im XAML-Framework unterstützen die feste Positionierung, aber Canvas ist ein Beispiel für einen Bereich, der nur die feste Positionierung unterstützt. Wenn Sie ein untergeordnetes Element auf einer Canvas platzieren möchten, legen Sie die angefügten Eigenschaften Canvas.Left und Canvas.Top für das untergeordnete Element fest. Falls Sie den XAML-Designer in Microsoft Visual Studio verwenden, werden diese Eigenschaften angepasst, wenn Sie das untergeordnete Element auf der Entwicklungsoberfläche in die Canvas ziehen.

Dynamisches Layout

Bei einem dynamischen Layout wird die Benutzeroberfläche für unterschiedliche Bildschirmauflösungen und Größen von App-Fenstern angepasst. Sie ordnen untergeordnete Elemente an, indem Sie ihre Platzierung in Beziehungen zueinander und ihre Position relativ zu ihrem Inhalt und/oder übergeordneten Element angeben. Beispielsweise können Sie UI-Elemente auf einem Panel anordnen und angeben, dass sie horizontal umgebrochen werden sollen. Für die automatische oder proportionale Größenanpassung weisen Sie den Eigenschaften Height und Width Werte zu. Folgende Einstellungen werden für dynamische Layouts empfohlen:

  • Legen Sie Height und Width der UI-Elemente auf Auto fest. Wenn diese Werte für UI-Elemente im Grid-Layout verwendet werden, füllt das Grid-Panel seine eigene Zelle automatisch aus. Die automatische Größenanpassung (Auto) wird für UI-Elemente allgemein sowie für die Layouts Grid und StackPanel unterstützt.
  • Legen Sie die Eigenschaften Height und Width für UI-Elemente, die Text enthalten (Textelemente), nicht fest, und legen Sie die Eigenschaft MinWidth bzw. MinHeight fest. So wird verhindert, dass der Text auf eine Größe herunterskaliert wird, der nicht mehr lesbar ist, weil er vom Layoutcontainer abgeschnitten wird.
  • Wenn Sie für die Elemente RowDefinition und ColumnDefinition proportionale Werte festlegen möchten, mit denen die Zellenstruktur eines Grid-Layouts definiert wird, verwenden Sie die relativen Werte Height und Width. Möchten Sie also z. B. angeben, dass eine Spalte fünfmal breiter als die zweite Spalte eines zweispaltigen Layouts ist, verwenden Sie "*" und "5*" für die Width-Eigenschaften der ColumnDefinition-Elemente.

Automatische Größenanpassung und Größenanpassung mit Sternvariabler

Bei der automatischen Größenanpassung können Steuerelemente auch dann an den Inhalt angepasst werden, wenn dessen Größe geändert wird. Die Größenanpassung mit Sternvariabler wird zum gleichmäßigen Aufteilen des verfügbaren Platzes auf die Zeilen und Spalten eines Rasters verwendet. In XAML werden Sternwerte als * ausgedrückt (bzw. n* für gleichmäßige Größenanpassung mit Sternvariabler). Bei einem Raster mit vier Spalten können Sie die Breite der Spalten z. B. auf die hier dargestellten Werte festlegen:

Column_1AutoDie Breite der Spalte wird entsprechend ihres Inhalts angepasst.
Column_2*Nach dem Berechnen der Spalten mit automatischer Breite (Auto) erhält diese Spalte einen Teil der verbleibenden Breite. Column_2 ist nur halb so breit wie Column_4.
Column_3AutoDie Breite der Spalte wird entsprechend ihres Inhalts angepasst.
Column_42*Nach dem Berechnen der Spalten mit automatischer Breite erhält diese Spalte einen Teil der verbleibenden Breite. Column_4 ist doppelt so breit wie Column_2.

 

panel-Steuerelemente

Die integrierten Layoutbereiche im XAML-Code enthalten den Canvas-Bereich für das feste Layout sowie mehrere andere Bereiche für verschiedene Techniken des dynamischen Layouts.

Canvas

Das Canvas-Panel positioniert seine untergeordneten Elemente mithilfe von festen Koordinatenpunkten. Sie geben die Punkte in den einzelnen untergeordneten Elementen an, indem Sie für jedes Element die angefügten Eigenschaften Canvas.Left und Canvas.Top festlegen. Beim Erstellen des Layouts nutzt das übergeordnete Canvas-Objekt die Klassenlogik, um die Werte dieser angefügten Eigenschaftswerte aus seinen untergeordneten Elementen auszulesen. Diese Werte werden dann während der Arrange-Übergabe der Layouterstellung verwendet.


<Canvas Background="Black">
  <Rectangle Canvas.Left="200" Canvas.Top="100"
    Fill="Red" Width="350" Height="350" />
</Canvas>

Mit dem obigen XAML-Code wird eine Ausgabe erzeugt, die der folgenden Abbildung ähnelt:

Layoutbeispiel

Mithilfe der festen Positionierung können Sie Überlappungen von Objekten erstellen, wobei ein Objekt über einem anderen Objekt gezeichnet wird. Um die einfache Anpassung der Zeichnungsreihenfolge von untergeordneten Elementen und das Ändern der Zeichnungsreihenfolge während der Laufzeit zu ermöglichen, unterstützt die Canvas auch die angefügte Eigenschaft Canvas.ZIndex, die Sie für jedes untergeordnete Element festlegen können. Der höchste Canvas.ZIndex-Wert wird zuletzt gezeichnet, also über allen anderen Elementen, die sich im gleichen Raum befinden oder Überlappungen aufweisen. Weitere Informationen finden Sie unter Canvas.ZIndex. Beachten Sie, dass der Alphawert (Transparenz) berücksichtigt wird. Auch wenn Elemente überlappen, werden die Inhalte in Überlappungsbereichen also ggf. vermischt, wenn das obere Element über einen Alphawert verfügt, der nicht dem Maximalwert entspricht.

Verwenden Sie das Canvas-Panel mit Bedacht. Es ist zwar bei einigen Szenarien hilfreich, die Positionen von Elementen der UI genau steuern zu können, aber eine feste Positionierung eines Layoutbereichs bewirkt, dass dieser Bereich der UI weniger gut an allgemeine Änderungen der Größe von App-Fenstern angepasst werden kann. Ursachen für Größenänderungen von App-Fenstern können Änderungen der Geräteausrichtung, Teilungen von App-Fenstern, Änderungen von Monitoren und verschiedene andere Benutzerszenarios sein.

StackPanel

Das StackPanel-Panel ist ein einfaches Layoutpanel, das seine untergeordneten Elemente in einer einzelnen Zeile anordnet. Die Zeile kann horizontal oder vertikal ausgerichtet werden. Mit der Orientation-Eigenschaft können Sie die Richtung der untergeordneten Elemente angeben. Der Standardwert von Orientation ist Vertical. StackPanel-Steuerelemente werden i. d. R. verwendet, wenn Sie nur einen kleinen Teil der UI auf der Seite anordnen möchten.

Der folgende XAML-Code veranschaulicht das Erstellen eines vertikalen StackPanel von Elementen.


<StackPanel Margin="20">
  <Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Green" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" />
</StackPanel>

Der vorhergehende XAML-Code erzeugt eine Ausgabe, die ähnlich der in der folgenden Abbildung dargestellten Ausgabe ist.

Layoutbeispiel

Das Schachteln von Panels mit mehr als einem StackPanel ist bei der Layouterstellung ein gängiges Verfahren. Beispielsweise können Sie eine Randleiste und einen Hauptinhaltsbereich mit einem horizontalen StackPanel erstellen und Elemente im Hauptinhalt mit einem vertikalen StackPanel stapeln. Beachten Sie beim Schachteln von Panels, dass angefügte Eigenschaften von UI-Elementen, für die Layoutmerkmale für ein übergeordnetes Element angegeben werden, nur vom direkt übergeordneten Panel interpretiert werden.

Raster

Das Grid-Panel unterstützt die Anordnung von Steuerelementen in Layouts mit mehreren Zeilen und Spalten. Die Definitionen für die Zeilen und Spalten eines Grid-Panels geben Sie mit den Eigenschaften RowDefinitions und ColumnDefinitionsan. Diese werden im Grid-Element deklariert (Eigenschaftselementsyntax in XAML wird verwendet). Mit den angefügten Eigenschaften Grid.Column und Grid.Row können Sie die Objekte in bestimmten Zellen des Grid-Elements anordnen. Verteilen Sie den Platz innerhalb einer Spalte oder Zeile mit der automatischen Größenanpassung (Auto) oder per Größenanpassung mit Sternvariabler. Wenn Sie den Inhalt über mehrere Spalten und Zeilen anzeigen möchten, verwenden Sie die angefügten Eigenschaften Grid.RowSpan und Grid.ColumnSpan.

Im nächsten XAML-Beispiel wird veranschaulicht, wie Sie ein Grid-Element mit drei Zeilen und zwei Spalten erstellen. Die Höhe der ersten und dritten Zeile reicht gerade für den enthaltenen Text. Die zweite Zeile füllt die restliche Höhe aus. Die Breite der einzelnen Spalten wird gleichmäßig auf die verfügbare Breite des Containers aufgeteilt.


<Grid Margin="12,0,12,0">

  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

  <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0" />
  <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2" />

  <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0" />
  <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2" />

</Grid>

So wird eine Ausgabe erzeugt, die der folgenden Abbildung ähnelt.

Layoutbeispiel

VariableSizedWrapGrid

Mit VariableSizedWrapGrid wird ein Layoutpanel im Rasterstil bereitgestellt, bei dem jede Kachel oder Zelle je nach Inhalt eine variable Größe haben kann. In einem VariableSizedWrapGrid-Element werden die Elemente in Zeilen oder Spalten angeordnet, die automatisch auf eine neue Zeile oder Spalte umgebrochen werden, wenn der MaximumRowsOrColumns-Wert erreicht ist. Mit der Orientation-Eigenschaft wird angegeben, ob Elemente im Raster vor dem Umbrechen in Zeilen oder Spalten hinzugefügt werden. Die Zellenabmessungen werden mit ItemHeight und ItemWidth angegeben (Werte in Pixel). Für untergeordnete Elemente können die angefügten Eigenschaften VariableSizedWrapGrid.ColumnSpan und VariableSizedWrapGrid.RowSpan (Werte als Zellenanzahl) verwendet werden, um anzupassen, wie viele variable Zellen vom untergeordneten Element verwendet werden sollen (Standardwert ist 1). Weitere Informationen finden Sie unter VariableSizedWrapGrid.

Panels für ItemsControl

WrapGrid und VirtualizingStackPanel sind spezielle Panels, die nur zum Anzeigen von Elementen in einem ItemsControl-Element verwendet werden können. Weitere Informationen finden Sie unter WrapGrid. ItemsStackPanel und ItemsWrapGrid sind ähnliche Panels mit eingeschränkter Verwendung (ItemsControl-Element mit mehreren Elementen).

Migrationshinweise:  Windows Presentation Foundation (WPF) verfügt über eine VirtualizingStackPanel-Klasse, die als Allzweck-Panel dient und deren Vorhandensein keinen Einschränkungen unterliegt. Wenn Sie XAML-Code migrieren, in dem VirtualizingStackPanel verwendet wird, müssen Sie Ihr items-Datensteuerelement in ein ListView-Steuerelement ändern. Dann ist die Elementvirtualisierung in Ihrer Liste aufgrund des in der Standardvorlage enthaltenen VirtualizingStackPanel-Elements möglich.

Verwandte Themen

Canvas
StackPanel
Grid
VariableSizedWrapGrid
Schnellstart: Hinzufügen von Layoutsteuerelementen
Hinzufügen von ListView, SemanticZoom und anderen Datensteuerelementen

 

 

Anzeigen:
© 2014 Microsoft