xaml
Kontrola układu

Brezentowy

Canvas to najprostszy z paneli. Umieszcza elementy na określonych współrzędnych 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 wyrównuje formant zgodnie z właściwością dock, w kolejności, w jakiej jest umieszczony w formancie.

UWAGA: DockPanel jest częścią frameworka WPF, ale nie jest dostarczany z Silverlight / WinRT / UWP. Łatwo jednak znaleźć implementacje typu open source.

<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 umieszcza swoje kontrolki jeden po drugim. Działa jak panel dokowania z wszystkimi dokami kontrolnymi ustawionymi na tę samą wartość.

<!-- 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>

Aby układać przedmioty od dołu do góry, użyj panelu dokowania.

Krata

Grid służy do tworzenia układów tabel.

Podstawowe definicje wierszy i kolumn

<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>

UWAGA: Wszystkie poniższe przykłady będą używać tylko kolumn, ale mają również zastosowanie do wierszy .

Automatyczne definicje rozmiarów

Kolumny i wiersze można zdefiniować za pomocą „Auto” jako ich szerokość / wysokość. Automatyczny rozmiar zajmie tyle miejsca, ile potrzeba, aby wyświetlić jego zawartość i nie więcej.
Definicje automatycznego rozmiaru mogą być używane z definicjami stałego rozmiaru.

<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>

Proste definicje wielkości gwiazdy

Kolumny i wiersze można zdefiniować za pomocą * jako ich szerokość / wysokość. Wiersze / kolumny o rozmiarze gwiazdy zajmą tyle miejsca, ile ma , niezależnie od ich zawartości.
Definicje w gwiazdkach mogą być używane z definicjami stałymi i automatycznymi. Rozmiar gwiazdki jest domyślny i dlatego można pominąć szerokość kolumny lub wysokość wiersza.

<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>

Proporcjonalne definicje gwiazd

Oprócz faktu, że gwiazda zajmuje tyle miejsca, ile może, definicje gwiazd są również do siebie proporcjonalne. Jeśli nic więcej nie zostanie wspomniane, każda definicja gwiazdy zajmie tyle samo miejsca, co pozostałe w bieżącej siatce.

Można jednak zdefiniować stosunek wielkości różnych definicji, po prostu dodając do niego mnożnik. Tak więc kolumna zdefiniowana jako 2* będzie dwa razy szersza niż kolumna zdefiniowana jako * . Szerokość pojedynczej jednostki jest obliczana poprzez podzielenie dostępnego miejsca przez sumę mnożników (jeśli nie ma, liczone jest jako 1).
Siatka z 3 kolumnami zdefiniowanymi jako * , 2* , * będzie prezentowana jako 1/4, 1/2, 1/4.
I jedna z 2 kolumnami zdefiniowanymi jako 2* , 3* zostanie przedstawiona 2/5, 3/5.

Jeśli w zestawie znajdują się definicje automatyczne lub stałe, zostaną one najpierw obliczone, a następnie definicje gwiazd zajmą pozostałe miejsce.

<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>

Rozpiętość kolumny / wiersza

Możliwe jest rozciągnięcie formantu poza jego komórkę poprzez ustawienie opcji Row / ColumnSpan. Ustawiona wartość to liczba wierszy / kolumn th

<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

Panel zawijania działa w podobny sposób jak panel stosu. Z wyjątkiem sytuacji, gdy rozpozna, że elementy przekroczą swój rozmiar, zawija je następnie do nowego wiersza / kolumny, w zależności od jego orientacji.

Orientacja pozioma

<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>

Pionowy panel zawijania

<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

Jednolita siatka umieści wszystkie swoje dzieci w układzie siatki, każde dziecko w swojej komórce. Wszystkie komórki będą miały ten sam rozmiar. Można go uznać za skrót do siatki, w której wszystkie definicje wierszy i kolumn są ustawione na *

Domyślne wiersze i kolumny

Domyślnie UniformGrid spróbuje utworzyć taką samą liczbę wierszy i kolumn. Gdy wiersz stanie się zbyt długi, doda nową kolumnę.

Ten kod utworzy siatkę 3x3 z pierwszymi 2 wypełnionymi wierszami, a ostatni z jednym przyciskiem:

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

Określone wiersze / kolumny

Możesz powiedzieć UniformGrid dokładnie, ile wierszy i / lub kolumn chcesz mieć.

<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>

UWAGA: jeśli ustawione są zarówno wiersze, jak i kolumny, a jest więcej elementów potomnych niż komórek, ostatnie elementy potomne w siatce nie zostaną wyświetlone

Właściwość FirstColumn

Po ustawieniu właściwości Columns można ustawić właściwość FirstColumn. Ta właściwość wprowadzi x puste komórki do pierwszego wiersza przed wyświetleniem pierwszego elementu potomnego. Pierwsza kolumna musi być ustawiona na liczbę mniejszą niż właściwość Kolumny.

W tym przykładzie pierwszy przycisk zostanie wyświetlony w drugiej kolumnie pierwszego rzędu:

<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 został wprowadzony w systemie Windows 10 i służy głównie do obsługi układów adaptacyjnych, w których elementy potomne panelu są rozmieszczone inaczej w zależności od dostępnej przestrzeni. RelativePanel jest zwykle używany ze stanami wizualnymi , które służą do przełączania konfiguracji układu, dostosowywania do rozmiaru ekranu lub okna, orientacji lub przypadku użycia. Elementy potomne używają dołączonych właściwości, które określają ich położenie względem panelu i siebie nawzajem.

<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>