xaml
Layout-Steuerelemente

Segeltuch

Canvas ist das einfachste Panel. Platziert Elemente an den angegebenen Koordinaten Top/Left .

<Canvas>
  <TextBlock 
    Canvas.Top="50" 
    Canvas.Left="50" 
    Text="This is located at 50, 50"/>
  <TextBlock 
    Canvas.Top="100"
    Canvas.Left="50"
    Width="150"
    Height="23"
    Text="This is located at 50, 100 with height 23 and width 150"/>
</Canvas>

DockPanel

DockPanel richtet das Steuerelement entsprechend der Dock-Eigenschaft in der Reihenfolge aus, in der es im Steuerelement platziert wird.

DockPanel : DockPanel ist Teil des WPF-Frameworks, wird jedoch nicht mit Silverlight / WinRT / UWP ausgeliefert. Open-Source-Implementierungen sind jedoch leicht zu finden.

<DockPanel LastChildFill="False">
  <!-- This will strech along the top of the panel -->
  <Button DockPanel.Dock="Top" Content="Top"/>
  <!-- This will strech along the bottom of the panel -->
  <Button DockPanel.Dock="Bottom" Content="Bottom"/>
  <!-- This will strech along the remaining space in the left of the panel -->
  <Button DockPanel.Dock="Left" Content="Left"/>
  <!-- This will strech along the remaining space in the right of the panel -->
  <Button DockPanel.Dock="Right" Content="Right"/>
  <!-- Since LastChildFill is false, this will be placed at the panel's right, to the left of the last button-->
  <Button DockPanel.Dock="Right" Content="Right"/>
</DockPanel>

<!-- When lastChildFill is true, the last control in the panel will fill the remaining space, no matter what Dock was set to it -->
<DockPanel LastChildFill="True">
  <!-- This will strech along the top of the panel -->
  <Button DockPanel.Dock="Top" Content="Top"/>
  <!-- This will strech along the bottom of the panel -->
  <Button DockPanel.Dock="Bottom" Content="Bottom"/>
  <!-- This will strech along the remaining space in the left of the panel -->
  <Button DockPanel.Dock="Left" Content="Left"/>
  <!-- This will strech along the remaining space in the right of the panel -->
  <Button DockPanel.Dock="Right" Content="Right"/>
  <!-- Since LastChildFill is true, this will fill the remaining space-->
  <Button DockPanel.Dock="Right" Content="Fill"/>
</DockPanel>

StackPanel

StackPanel platziert seine Steuerelemente nacheinander. Es verhält sich wie ein Dock-Panel, bei dem alle Docks des Steuerelements auf denselben Wert eingestellt sind.

<!-- The default StackPanel is oriented vertically, so the controls will be presented in order from top to bottom -->
<StackPanel>
  <Button Content="First"/>
  <Button Content="Second"/>
  <Button Content="Third"/>
  <Button Content="Fourth"/>
</StackPanel>

<!-- Setting the Orientation property to Horizontal will display the control in order from left to right (or right to left, according to the FlowDirection property) -->
<StackPanel Orientation="Horizontal">
  <Button Content="First"/>
  <Button Content="Second"/>
  <Button Content="Third"/>
  <Button Content="Fourth"/>
</StackPanel>

Verwenden Sie eine Docking-Leiste, um Elemente von unten nach oben zu stapeln.

Gitter

Grid wird zum Erstellen von Tabellenlayouts verwendet.

Grundlegende Zeilen- und Spaltendefinitionen

<Grid>
  <!-- Define 3 columns with width of 100 -->
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
  </Grid.ColumnDefinitions>
  <!-- Define 3 rows with height of 50 -->
  <Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
  </Grid.RowDefinitions>
  <!-- This is placed at the top left (first row, first column) -->
  <Button 
      Grid.Column="0"
      Grid.Row="0"
      Content="Top Left"/>
  <!-- This is placed at the top left (first row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="0"
      Content="Top Center"/>
  <!-- This is placed at the center (second row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="1"
      Content="Center"/>
  <!-- This is placed at the bottom right (third row, third column) -->
  <Button 
      Grid.Column="2"
      Grid.Row="2"
      Content="Bottom Right"/>
</Grid>

HINWEIS: In den folgenden Beispielen werden nur Spalten verwendet, sie gelten jedoch auch für Zeilen .

Definitionen für die automatische Größe

Spalten und Zeilen können mit "Auto" als Breite / Höhe definiert werden. Die automatische Größe nimmt so viel Platz in Anspruch, wie zur Anzeige des Inhalts benötigt wird, und nicht mehr.
Definitionen für die automatische Größe können für Definitionen mit fester Größe verwendet werden.

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="50"/>
  </Grid.ColumnDefinitions>
  <!-- This column won't take much space -->
  <Button Grid.Column="0" Content="Small"/>
  <!-- This column will take much more space -->
  <Button Grid.Column="1" Content="This text will be very long."/>
  <!-- This column will take exactly 50 px -->
  <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

Einfache sterngroße Definitionen

Spalten und Zeilen können mit * als Breite / Höhe definiert werden. Zeilen / Spalten in Sterngröße benötigen unabhängig von ihrem Inhalt so viel Platz wie bisher .
Sterngrößen-Definitionen können mit festen und automatischen Größendefinitionen verwendet werden. Die Sterngröße ist die Standardeinstellung und daher kann die Spaltenbreite oder Zeilenhöhe weggelassen werden.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as it can -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will take exactly 50 px -->
    <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

Proportionalen Sterngrößendefinitionen

Abgesehen von der Tatsache, dass Sterne so viel Platz wie möglich benötigen, sind Sterndefinitionen auch proportional zueinander. Wenn nichts anderes erwähnt wird, benötigt jede Sterndefinition so viel Platz wie die anderen im aktuellen Raster.

Es ist jedoch möglich, ein Verhältnis zwischen den Größen verschiedener Definitionen zu definieren, indem einfach ein Multiplikator hinzugefügt wird. Eine als 2* definierte Spalte ist also doppelt so breit wie eine als * definierte Spalte. Die Breite einer einzelnen Einheit wird berechnet, indem der verfügbare Platz durch die Summe der Multiplikatoren dividiert wird (falls nicht vorhanden, wird er als 1 gezählt).
Ein Gitter mit 3 Spalten, definiert als * , 2* , * wird als 1/4, 1/2, 1/4 dargestellt.
Eine mit 2 Spalten, definiert als 2* , 3* wird 2/5, 3/5 dargestellt.

Wenn der Satz automatische oder feste Definitionen enthält, werden diese zuerst berechnet, und die Sterndefinitionen beanspruchen den verbleibenden Platz danach.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as the third column -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will be twice as wide as the rest -->
    <Button Grid.Column="1" Content="This text will be very long."/>
    <!-- This column will be as wide as the first column -->
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

Spalten- / Zeilenspanne

Es ist möglich, ein Steuerelement über die Zelle hinaus auszudehnen, indem Sie den Zeilen- / Spaltenbereich festlegen. Der eingestellte Wert ist die Anzahl der Reihen / Spalten

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This control will streach across most of the grid -->
    <Button Grid.Column="0" Grid.ColumnSpan="2" Content="Small"/>
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

WrapPanel

Das Wrap-Panel verhält sich ähnlich wie das Stack-Panel. Wenn es nicht erkennt, dass die Elemente ihre Größe überschreiten, werden sie je nach Ausrichtung in eine neue Zeile / Spalte umgebrochen.

Horizontale Ausrichtung

<WrapPanel Width="100">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</WrapPanel>

Vertikale Umhüllung

<WrapPanel Height="70" Orientation="Vertical">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</WrapPanel>

UniformGrid

Das einheitliche Raster fügt alle Kinder in einem Raster ein, jedes Kind in seiner eigenen Zelle. Alle Zellen haben die gleiche Größe. Es kann angenommen werden, dass es sich um eine Abkürzung für ein Raster handelt, in dem alle Zeilen- und Spaltendefinitionen auf *

Standardzeilen und -spalten

Standardmäßig versucht das UniformGrid, eine gleiche Anzahl von Zeilen und Spalten zu erstellen. Wenn eine Zeile zu lang wird, wird eine neue Spalte hinzugefügt.

Dieser Code erzeugt ein Raster von 3x3, wobei die ersten beiden Zeilen gefüllt sind und die letzte mit einer Schaltfläche:

<UniformGrid>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

Angegebene Zeilen / Spalten

Sie können dem UniformGrid genau sagen, wie viele Zeilen und / oder Spalten Sie haben möchten.

<UniformGrid Columns="2" >
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

HINWEIS: Wenn sowohl Zeilen als auch Spalten gesetzt sind und mehr Kinder als Zellen vorhanden sind, werden die letzten Kinder im Raster nicht angezeigt

FirstColumn-Eigenschaft

Sobald die Columns-Eigenschaft festgelegt ist, können Sie die FirstColumn-Eigenschaft festlegen. Diese Eigenschaft gibt x leere Zellen in die erste Zeile ein, bevor das erste untergeordnete Element angezeigt wird. FirstColumn muss auf eine Nummer festgelegt werden, die kleiner als die Columns-Eigenschaft ist.

In diesem Beispiel wird die erste Schaltfläche in der zweiten Spalte der ersten Zeile angezeigt:

<UniformGrid Columns="2" FirstColumn="1">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

RelativePanel

RelativePanel wurde in Windows 10 eingeführt und wird hauptsächlich zur Unterstützung von adaptiven Layouts verwendet, bei denen die untergeordneten Elemente des Bedienfelds je nach verfügbarem Platz unterschiedlich angeordnet sind. RelativePanel wird normalerweise mit visuellen Zuständen verwendet , mit denen die Layoutkonfiguration geändert und die Bildschirmgröße, die Fenstergröße, die Ausrichtung oder der Anwendungsfall angepasst werden. Die untergeordneten Elemente verwenden angefügte Eigenschaften, die festlegen, wo sie sich in Bezug auf das Bedienfeld und untereinander befinden.

<RelativePanel
    VerticalAlignment="Stretch"
    HorizontalAlignment="Stretch">
    <Rectangle
        x:Name="rectangle1"
        RelativePanel.AlignLeftWithPanel="True"
        Width="360"
        Height="50"
        Fill="Red"/>
    <Rectangle
        x:Name="rectangle2"
        RelativePanel.Below="rectangle1"
        Width="360"
        Height="50"
        Fill="Green" />
</RelativePanel>
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <!--VisualState to be triggered when window width is >=720 effective pixels.-->
                <AdaptiveTrigger
                    MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter
                    Target="rectangle2.(RelativePanel.Below)"
                    Value="{x:Null}" />
                <Setter
                    Target="rectangle2.(RelativePanel.RightOf)"
                    Value="rectangle1" />
                <Setter
                    Target="rectangle1.(RelativePanel.AlignLeftWithPanel)"
                    Value="False" />
                <Setter
                    Target="rectangle1.(RelativePanel.AlignVerticalCenterWithPanel)"
                    Value="True" />
                <Setter
                    Target="rectangle2.(RelativePanel.AlignVerticalCenterWithPanel)"
                    Value="True" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>