LayoutpanelsLayout panels

Layoutpanels sind Container und dienen zum Anordnen und Gruppieren von UI-Elementen in Ihrer App.Layout panels are containers that allow you to arrange and group UI elements in your app. Zu den integrierten XAML-Layoutpanels gehören RelativePanel, StackPanel, Grid, VariableSizedWrapGrid und Canvas.The built-in XAML layout panels include RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, and Canvas. Hier werden die einzelnen Panels beschrieben und es wird erläutert, wie Sie sie zum Layouten von XAML-UI-Elementen einsetzen.Here, we describe each panel and show how to use it to layout XAML UI elements.

Bei der Wahl eines Layoutpanels müssen mehrere Dinge berücksichtigt werden:There are several things to consider when choosing a layout panel:

  • Wie das Panel seine untergeordneten Elemente positioniertHow the panel positions its child elements.
  • Wie das Panel die Größe seiner untergeordneten Elemente bestimmtHow the panel sizes its child elements.
  • Wie sich überlappende untergeordnete Elemente übereinander geschichtet werden (Z-Reihenfolge)How overlapping child elements are layered on top of each other (z-order).
  • Anzahl und Komplexität geschachtelter Panelelemente, die erforderlich sind, um das gewünschte Layout zu erstellenThe number and complexity of nested panel elements needed to create your desired layout.

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn Sie auf Ihrem System die XAML-Steuerelementekatalog-App installiert ist, können Sie RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, und Canvas in Aktion erleben.If you have the XAML Controls Gallery app installed, see the RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, and Canvas in action.

PaneleigenschaftenPanel properties

Bevor wir die einzelnen Panels besprechen, lassen Sie uns einige gemeinsame Eigenschaften aller Panels durchgehen.Before we discuss individual panels, let's go over some common properties that all panels have.

Angefügte PaneleigenschaftenPanel attached properties

Die meisten XAML-Layoutpanels verwenden angefügte Eigenschaften, mit denen die untergeordneten Elemente das übergeordnete Panel darüber informieren, wie sie in der Benutzeroberfläche positioniert werden sollen.Most XAML layout panels use attached properties to let their child elements inform the parent panel about how they should be positioned in the UI. Angefügte Eigenschaften verwenden die Syntax AttachedPropertyProvider.PropertyName.Attached properties use the syntax AttachedPropertyProvider.PropertyName. Wenn in anderen Panels geschachtelte Panels vorhanden sind, werden angefügte Eigenschaften von UI-Elementen, die Layoutmerkmale für ein übergeordnetes Element angeben, nur vom direkt übergeordneten Panel interpretiert.If you have panels that are nested inside other panels, attached properties on UI elements that specify layout characteristics to a parent are interpreted by the most immediate parent panel only.

Hier sehen Sie ein Beispiel für das Festlegen der angefügten Eigenschaft Canvas.Left auf einem Schaltflächen-Steuerelement in XAML.Here is an example of how you can set the Canvas.Left attached property on a Button control in XAML. Hiermit wird das übergeordnete Canvas-Element darüber informiert, dass das Button-Element 50 effektive Pixel vom linken Rand des Canvas-Elements entfernt positioniert werden soll.This informs the parent Canvas that the Button should be positioned 50 effective pixels from the left edge of the Canvas.

<Canvas>
  <Button Canvas.Left="50">Hello</Button>
</Canvas>

Weitere Informationen zu angefügten Eigenschaften finden Sie unter Übersicht über angefügte Eigenschaften.For more info about attached properties, see Attached properties overview.

PanelrahmenPanel borders

Die Panels „RelativePanel“, „StackPanel“ und „Grid“ definieren Rahmeneigenschaften, mit denen Sie einen Rahmen um das Panel zeichnen können, ohne dass ein zusätzliches umschließendes Rahmenelement erforderlich ist.The RelativePanel, StackPanel, and Grid panels define border properties that let you draw a border around the panel without wrapping them in an additional Border element. Die Rahmeneigenschaften sind BorderBrush, BorderThickness, CornerRadius und Padding.The border properties are BorderBrush, BorderThickness, CornerRadius, and Padding.

Hier sehen Sie ein Beispiel für das Festlegen von Rahmeneigenschaften für ein „Grid“.Here’s an example of how to set border properties on a Grid.

<Grid BorderBrush="Blue" BorderThickness="12" CornerRadius="12" Padding="12">
    <TextBlock Text="Hello World!"/>
</Grid>

Ein Raster mit Rahmen

Durch Verwendung der integrierten Rahmeneigenschaften kann die Anzahl der XAML-Elemente reduziert und dadurch die UI-Leistung Ihrer App verbessert werden.Using the built-in border properties reduces the XAML element count, which can improve the UI performance of your app. Weitere Informationen zu Layoutpanels und zur UI-Leistung finden Sie unter Optimieren des XAML-Layouts.For more info about layout panels and UI performance, see Optimize your XAML layout.

RelativePanelRelativePanel

RelativePanel ermöglicht Ihnen das Layout von UI-Elementen, indem Sie angeben, an welcher Position sie relativ zu anderen Elementen und dem Panel platziert werden sollen.RelativePanel lets you layout UI elements by specifying where they go in relation to other elements and in relation to the panel. Standardmäßig wird ein Element in der oberen linken Ecke des Panels positioniert.By default, an element is positioned in the upper left corner of the panel. Sie können RelativePanel mit VisualStateManager und AdaptiveTrigger verwenden, um die Benutzeroberfläche für unterschiedliche Fenstergrößen neu anzuordnen.You can use RelativePanel with VisualStateManager and AdaptiveTrigger to rearrange your UI for different window sizes.

Die folgende Tabelle zeigt die angefügten Eigenschaften, mit denen Sie ein Element in Bezug auf andere Elemente ausrichten und positionieren können.This table shows the attached properties you can use to align an element in relation to the panel or other elements.

PanelausrichtungPanel alignment Ausrichtung gleichgeordneter ElementeSibling alignment Position gleichgeordneter ElementeSibling position
AlignTopWithPanelAlignTopWithPanel AlignTopWithAlignTopWith AboveAbove
AlignBottomWithPanelAlignBottomWithPanel AlignBottomWithAlignBottomWith BelowBelow
AlignLeftWithPanelAlignLeftWithPanel AlignLeftWithAlignLeftWith LeftOfLeftOf
AlignRightWithPanelAlignRightWithPanel AlignRightWithAlignRightWith RightOfRightOf
AlignHorizontalCenterWithPanelAlignHorizontalCenterWithPanel AlignHorizontalCenterWithAlignHorizontalCenterWith  
AlignVerticalCenterWithPanelAlignVerticalCenterWithPanel AlignVerticalCenterWithAlignVerticalCenterWith  

Dieser XAML-Code zeigt das Anordnen von Elementen in einem „RelativePanel“.This XAML shows how to arrange elements in a RelativePanel.

<RelativePanel BorderBrush="Gray" BorderThickness="1">
    <Rectangle x:Name="RedRect" Fill="Red" Height="44" Width="44"/>
    <Rectangle x:Name="BlueRect" Fill="Blue"
               Height="44" Width="88"
               RelativePanel.RightOf="RedRect" />

    <Rectangle x:Name="GreenRect" Fill="Green" 
               Height="44"
               RelativePanel.Below="RedRect" 
               RelativePanel.AlignLeftWith="RedRect" 
               RelativePanel.AlignRightWith="BlueRect"/>
    <Rectangle Fill="Orange"
               RelativePanel.Below="GreenRect" 
               RelativePanel.AlignLeftWith="BlueRect" 
               RelativePanel.AlignRightWithPanel="True"
               RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

Das Ergebnis sieht wie folgt aus.The result looks like this.

RelativePanel

Die folgenden Aspekte müssen in Bezug auf das Ändern der Rechteckgrößen beachtet werden:Here are a few things to note about the sizing of the rectangles:

  • Das rote Rechteck erhält eine explizite Größe von 44 x 44.The red rectangle is given an explicit size of 44x44. Es wird in der oberen linken Ecke des Panels platziert; dies ist die Standardposition.It's placed in the upper left corner of the panel, which is the default position.
  • Das grüne Rechteck erhält eine explizite Höhe von 44.The green rectangle is given an explicit height of 44. Die linke Seite dieses Rechtecks wird auf das rote Rechteck ausgerichtet und die rechte Seite auf das blaue Rechteck, das die Breite bestimmt.Its left side is aligned with the red rectangle, and its right side is aligned with the blue rectangle, which determines its width.
  • Das orangefarbene Rechteck erhält keine explizite Größe.The orange rectangle isn't given an explicit size. Seine linke Seite wird auf das blaue Rechteck ausgerichtet.Its left side is aligned with the blue rectangle. Die rechte und untere Kante werden auf die Kante des Panels ausgerichtet.Its right and bottom edges are aligned with the edge of the panel. Die Größe wird durch diese Ausrichtungen bestimmt und ändert sich zusammen mit dem Panel.Its size is determined by these alignments and it will resize as the panel resizes.

StackPanelStackPanel

StackPanel ist ein Layoutpanel, das untergeordnete Elemente in einer einzelnen Zeile anordnet. Die Zeile kann horizontal oder vertikal ausgerichtet werden.StackPanel arranges its child elements into a single line that can be oriented horizontally or vertically. StackPanel wird normalerweise verwendet, um einen kleinen Teilbereich der Benutzeroberfläche auf einer Seite anzuordnen.StackPanel is typically used to arrange a small subsection of the UI on a page.

Mit der Orientation-Eigenschaft können Sie die Richtung der untergeordneten Elemente angeben.You can use the Orientation property to specify the direction of the child elements. Die Standardausrichtung ist Vertikal.The default orientation is Vertical.

Der folgende XAML-Code veranschaulicht das Erstellen eines vertikalen StackPanel von Elementen.The following XAML shows how to create a vertical StackPanel of items.

<StackPanel>
    <Rectangle Fill="Red" Height="44"/>
    <Rectangle Fill="Blue" Height="44"/>
    <Rectangle Fill="Green" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</StackPanel>

Das Ergebnis sieht wie folgt aus.The result looks like this.

StackPanel

Wird in einem StackPanel die Größe eines untergeordneten Elements nicht explizit festgelegt, wird das Element gestreckt, sodass es die zur Verfügung stehende Breite (oder Höhe, falls die Ausrichtung auf Horizontal festgelegt ist) ausfüllt.In a StackPanel, if a child element's size is not set explicitly, it stretches to fill the available width (or height if the Orientation is Horizontal). In diesem Beispiel ist die Breite der Rechtecke nicht festgelegt.In this example, the width of the rectangles is not set. Die Rechtecke werden erweitert, bis Sie die gesamte Breite von StackPanel ausfüllen.The rectangles expand to fill the entire width of the StackPanel.

RasterGrid

Das Grid-Panel unterstützt Fluid-Layouts und ermöglicht die Anordnung von Steuerelementen in mehrzeiligen und mehrspaltigen Layouts.The Grid panel supports fluid layouts and allows you to arrange controls in multi-row and multi-column layouts. Sie können die Zeilen und Spalten eines Rasterpanels mit den Eigenschaften RowDefinitions und ColumnDefinitions angeben.You specify a Grid's rows and columns by using the RowDefinitions and ColumnDefinitions properties.

Mit den angefügten Eigenschaften Grid.Column und Grid.Row ordnen Sie Objekte in bestimmten Zellen an.To position objects in specific cells of the Grid, use the Grid.Column and Grid.Row attached properties.

Wenn der Inhalt über mehrere Zeilen und Spalten angezeigt werden soll, können Sie die angefügten Eigenschaften Grid.RowSpan und Grid.ColumnSpan verwenden.To make content span across multiple rows and columns, use the Grid.RowSpan and Grid.ColumnSpan attached properties.

In diesem XAML-Beispiel wird veranschaulicht, wie Sie ein Rasterelement mit zwei Zeilen und zwei Spalten erstellen.This XAML example shows how to create a Grid with two rows and two columns.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="44"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Width="44"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>

Das Ergebnis sieht wie folgt aus.The result looks like this.

Raster

In diesem Beispiel funktioniert die Festlegung der Größe wie folgt:In this example, the sizing works like this:

  • Die zweite Zeile weist eine explizite Höhe von 44 effektiven Pixel auf.The second row has an explicit height of 44 effective pixels. Standardmäßig füllt die Höhe der ersten Zeile den gesamten verbleibenden Platz.By default, the height of the first row fills whatever space is left over.
  • Die Breite der ersten Spalte ist auf Auto festgelegt, d. h. sie ist so breit, wie dies für ihre untergeordneten Elemente erforderlich ist.The width of the first column is set to Auto, so it's as wide as needed for its children. In diesem Fall ist die Spalte 44 effektive Pixel breit, um der Breite des roten Rechtecks zu entsprechen.In this case, it's 44 effective pixels wide to accommodate the width of the red rectangle.
  • Es sind keine anderen Größeneinschränkungen für die Rechtecke festgelegt, daher wird jedes gestreckt, um die Rasterzelle ausfüllen, in der es sich befindet.There are no other size constraints on the rectangles, so each one stretches to fill the grid cell it's in.

Verteilen Sie den Platz innerhalb einer Spalte oder Zeile mit der automatischen Größenanpassung Auto oder per Größenanpassung mit Sternvariablen.You can distribute space within a column or a row by using Auto or star sizing. Verwenden Sie die automatische Größenanpassung, damit die Größe von UI-Elementen entsprechend ihren Inhalten oder der Größe des übergeordneten Containers geändert wird.You use auto sizing to let UI elements resize to fit their content or parent container. Sie können die automatische Größenanpassung auch für die Zeilen und Spalten eines Rasters verwenden.You can also use auto sizing with the rows and columns of a grid. Um die automatische Größenanpassung zu verwenden, legen Sie für „Height“ und/oder „Width“ von UI-Elementen Auto fest.To use auto sizing, set the Height and/or Width of UI elements to Auto.

Die proportionale Größenanpassung, die auch als Größenanpassung mit Sternvariable bezeichnet wird, wird zum gleichmäßigen Aufteilen des verfügbaren Platzes auf die Zeilen und Spalten eines Rasters verwendet.You use proportional sizing, also called star sizing, to distribute available space among the rows and columns of a grid by weighted proportions. In XAML werden Sternwerte als * ausgedrückt (bzw. n* für gleichmäßige Größenanpassung mit Sternvariable).In XAML, star values are expressed as * (or n* for weighted star sizing). Möchten Sie also z. B. angeben, dass eine Spalte fünfmal breiter als die zweite Spalte eines zweispaltigen Layouts ist, verwenden Sie "5*" und "*" für die Width-Eigenschaften der ColumnDefinition-Elemente.For example, to specify that one column is 5 times wider than the second column in a 2-column layout, use "5*" and "*" for the Width properties in the ColumnDefinition elements.

In diesem Beispiel wird die feste, automatische und proportionale Größenanpassung in einem Grid mit 4 Spalten kombiniert.This example combines fixed, auto, and proportional sizing in a Grid with 4 columns.

ColumnColumn Festlegen der GrößeSizing BESCHREIBUNGDescription
Column_1Column_1 AutoAuto Die Breite der Spalte wird entsprechend ihres Inhalts angepasst.The column will size to fit its content.
Column_2Column_2 * Nach dem Berechnen der Spalten mit automatischer Breite erhält diese Spalte einen Teil der verbleibenden Breite.After the Auto columns are calculated, the column gets part of the remaining width. Column_2 ist nur halb so breit wie Column_4.Column_2 will be one-half as wide as Column_4.
Column_3Column_3 4444 Die Spalte ist 44 Pixel breit.The column will be 44 pixels wide.
Column_4Column_4 2*2* Nach dem Berechnen der Spalten mit automatischer Breite erhält diese Spalte einen Teil der verbleibenden Breite.After the Auto columns are calculated, the column gets part of the remaining width. Column_4 ist doppelt so breit wie Column_2.Column_4 will be twice as wide as Column_2.

Die standardmäßige Spaltenbreite beträgt "*", daher Sie müssen diesen Wert für die zweite Spalte nicht explizit festlegen.The default column width is "*", so you don't need to explicitly set this value for the second column.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Column 1 sizes to its conent." FontSize="24"/>
</Grid>

Im Visual Studio-XAML-Designer sieht das Ergebnis wie folgt aus.In the Visual Studio XAML designer, the result looks like this.

Ein Raster mit vier Spalten im Visual Studio-Designer

VariableSizedWrapGridVariableSizedWrapGrid

VariableSizedWrapGrid ist ein Layoutpanel im Grid-Stil, bei dem Zeilen oder Spalten automatisch in eine neue Zeile oder Spalte umgebrochen werden, wenn der Wert MaximumRowsOrColumns erreicht wird.VariableSizedWrapGrid is a Grid-style layout panel where rows or columns automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.

Mit der Orientation-Eigenschaft wird angegeben, ob Elemente im Raster vor dem Umbrechen in Zeilen oder Spalten hinzugefügt werden.The Orientation property specifies whether the grid adds its items in rows or columns before wrapping. Die Standardausrichtung ist Vertikal, d. h., das Raster fügt Elemente von oben nach unten hinzu, bis eine Spalte voll ist, dann erfolgt ein Umbruch in eine neue Spalte.The default orientation is Vertical, which means the grid adds items from top to bottom until a column is full, then wraps to a new column. Wenn der Wert Horizontal lautet, fügt das Raster Elemente von links nach rechts hinzu und fügt dann einen Umbruch in eine neue Zeile ein.When the value is Horizontal, the grid adds items from left to right, then wraps to a new row.

Zellenabmessungen werden mit den Eigenschaften ItemHeight und ItemWidth angegeben.Cell dimensions are specified by the ItemHeight and ItemWidth. Jede Zelle hat die gleiche Größe.Each cell is the same size. Wenn „ItemHeight“ oder „ItemWidth“ nicht angegeben wird, wird die Größe der erste Zelle ihrem Inhalt entsprechend festgelegt, und alle anderen Zellen haben die Größe der ersten Zelle.If ItemHeight or ItemWidth is not specified, then the first cell sizes to fit its content, and every other cell is the size of the first cell.

Sie können die angefügten Eigenschaften VariableSizedWrapGrid.ColumnSpan und VariableSizedWrapGrid.RowSpan verwenden, um anzugeben, wie viele benachbarte Zellen ein untergeordnetes Element füllen soll.You can use the VariableSizedWrapGrid.ColumnSpan and VariableSizedWrapGrid.RowSpan attached properties to specify how many adjacent cells a child element should fill.

Hier sehen Sie die Verwendung eines VariableSizedWrapGrid-Elements in XAML.Here's how to use a VariableSizedWrapGrid in XAML.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Orange" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

Das Ergebnis sieht wie folgt aus.The result looks like this.

Umbruchraster mit variabler Größe

In diesem Beispiel beträgt die maximale Anzahl von Zeilen in jeder Spalte 3.In this example, the maximum number of rows in each column is 3. Die erste Spalte enthält nur zwei Elemente (das rote und das blaue Rechteck), da sich das blaue Rechteck über zwei Zeilen erstreckt.The first column contains only 2 items (the red and blue rectangles) because the blue rectangle spans 2 rows. Das grüne Rechteck wird dann an den Anfang der nächsten Spalte umbrochen.The green rectangle then wraps to the top of the next column.

CanvasCanvas

Das Canvas-Panel positioniert seine untergeordneten Elemente mit festen Koordinatenpunkten und unterstützt keine Fluid-Layouts.The Canvas panel positions its child elements using fixed coordinate points and does not support fluid layouts. 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.You specify the points on individual child elements by setting the Canvas.Left and Canvas.Top attached properties on each element. Das übergeordnete Canvas liest während des Arrange-Durchlaufs des Layouts diese angehängten Eigenschaftswerte von seinen untergeordneten Elementen.The parent Canvas reads these attached property values from its children during the Arrange pass of layout.

Objekte in einem Canvas-Panel können sich überlappen, wobei ein Objekt über einem anderen Objekt gezeichnet wird.Objects in a Canvas can overlap, where one object is drawn on top of another object. Standardmäßig rendert das Canvas-Element untergeordnete Objekte in der Reihenfolge, in der sie deklariert werden, d. h., das letzte untergeordnete Element wird im Vordergrund gerendert (jedes Element verfügt über einen standardmäßigen Z-Index von 0).By default, the Canvas renders child objects in the order in which they’re declared, so the last child is rendered on top (each element has a default z-index of 0). Dies ist genauso wie bei anderen integrierten Panels.This is the same as other built-in panels. Canvas unterstützt jedoch auch die angefügte Eigenschaft Canvas.ZIndex, die Sie für die einzelnen untergeordneten Elemente festlegen können.However, Canvas also supports the Canvas.ZIndex attached property that you can set on each of the child elements. Sie können diese Eigenschaft im Code festlegen, um die Zeichnungsreihenfolge von Elementen zur Laufzeit zu ändern.You can set this property in code to change the draw order of elements during run time. Das Element mit dem höchsten Canvas.ZIndex-Wert wird zuletzt gezeichnet, also über allen anderen Elementen, die sich im gleichen Raum befinden oder sich auf irgendeine Weise überlappen.The element with the highest Canvas.ZIndex value draws last and therefore draws over any other elements that share the same space or overlap in any way. Beachten Sie, dass der Alpha-Wert (Transparenz) berücksichtigt wird. Auch wenn sich Elemente überlappen, werden die Inhalte in Überlappungsbereichen also ggf. vermischt, wenn das obere Element über einen Alpha-Wert verfügt, der nicht dem Maximalwert entspricht.Note that alpha value (transparency) is respected, so even if elements overlap, the contents shown in overlap areas might be blended if the top one has a non-maximum alpha value.

Das Canvas-Element legt die Größe seiner untergeordneten Elemente nicht fest.The Canvas does not do any sizing of its children. Jedes Element muss seine Größe selbst angeben.Each element must specify its size.

Im Folgenden finden Sie ein Beispiel für ein Canvas-Element in XAML.Here's an example of a Canvas in XAML.

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red" Height="44" Width="44"/>
    <Rectangle Fill="Blue" Height="44" Width="44" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Height="44" Width="44" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Orange" Height="44" Width="44" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

Das Ergebnis sieht wie folgt aus.The result looks like this.

Canvas

Verwenden Sie das Canvas-Panel mit Bedacht.Use the Canvas panel with discretion. Es ist zwar in einigen Szenarien hilfreich, die Positionen von UI-Elementen genau steuern zu können, aber eine feste Positionierung eines Layoutpanels bewirkt, dass dieser Bereich der UI weniger gut an allgemeine Änderungen der Größe von App-Fenstern angepasst werden kann.While it's convenient to be able to precisely control positions of elements in UI for some scenarios, a fixed positioned layout panel causes that area of your UI to be less adaptive to overall app window size changes. 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 Benutzerszenarien sein.App window resize might come from device orientation changes, split app windows, changing monitors, and a number of other user scenarios.

Panels für ItemsControlPanels for ItemsControl

Es gibt verschiedene spezielle Panels, die nur als ItemsPanel zum Anzeigen von Elementen in einem ItemsControl-Element verwendet werden können.There are several special-purpose panels that can be used only as an ItemsPanel to display items in an ItemsControl. Dies sind ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel und WrapGrid.These are ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel, and WrapGrid. Diese Panel können nicht für das allgemeine UI-Layout verwendet werden.You can't use these panels for general UI layout.

Beispielcode herunterladenGet the sample code