xaml
Layoutkontroller

Duk

Canvas är det enklaste av paneler. Den placerar objekt vid de angivna Top/Left koordinaterna.

<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 justerar kontrollen enligt dockningsegenskapen i den ordning den placeras i kontrollen.

OBS: DockPanel är en del av WPF-ramverket, men kommer inte med Silverlight / WinRT / UWP. Imidlertid är implementeringar med öppen källkod lätt att hitta.

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

Stack

StackPanel placerar sina kontroller efter varandra. Den fungerar som en dockningspanel med alla sina styrbryggor inställda på samma värde.

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

För att stapla föremål nedifrån och upp, använd en dockningspanel.

Rutnät

Grid används för att skapa tabelllayouter.

Grundläggande definitioner av rader och kolumner

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

OBS: Alla följande exempel använder endast kolumner, men är också tillämpliga på rader .

Definitioner av automatisk storlek

Kolumner och rader kan definieras med "Auto" som deras bredd / höjd. Auto-storlek tar så mycket utrymme som den behöver för att visa innehållet och inte mer.
Definitioner av automatisk storlek kan användas med definitioner av fast storlek.

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

Enkla definitioner av stjärnstorlek

Kolumner och rader kan definieras med * som deras bredd / höjd. Rader / kolumner i stjärnstorlek tar så mycket utrymme som det har , oavsett innehåll.
Stjärnstorleksdefinitioner kan användas med fasta och autostorlekar. Stjärnstorlek är standard och kolumnbredd eller radhöjd kan därför utelämnas.

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

Proportionella definitioner av stjärnstorlek

Förutom det faktum att stjärnan tar så mycket utrymme som den kan, är stjärndefinitioner också proportionella mot varandra. Om inget annat nämns kommer varje stjärndefinition att ta lika mycket utrymme som de andra i det nuvarande rutnätet.

Det är emellertid möjligt att definiera ett förhållande mellan storleken på olika definitioner genom att helt enkelt lägga till en multiplikator till den. Så en kolumn definierad som 2* kommer att vara dubbelt så bred som en kolumn definierad som * . En enhets bredd beräknas genom att dela det tillgängliga utrymmet med summan av multiplikatorerna (om det inte finns det räknas det som 1).
Så ett rutnät med 3 kolumner definierade som * , 2* , * kommer att presenteras som 1/4, 1/2, 1/4.
Och en med 2 kolumner definierade som 2* , 3* kommer att presenteras 2/5, 3/5.

Om det finns automatiska eller fasta definitioner i uppsättningen, kommer dessa att beräknas först, och stjärndefinitionerna tar det återstående utrymmet efter det.

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

Kolumn / radspänn

Det är möjligt att göra en kontrollsträcka bortom sin cell genom att ställa in Row / ColumnSpan. Värdet är antalet rader / kolumner 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

Wrap-panelen fungerar på samma sätt som stack-panel. Förutom när den känner igen att artiklarna kommer att överstiga dess storlek, kommer den sedan att lindas till en ny rad / kolumn, beroende på dess riktning.

Horisontell orientering

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

Vertikal wrap-panel

<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

Enhetligt rutnät placerar alla sina barn i en rutnätlayout, varje barn i sin egen cell. Alla celler har samma storlek. Det kan anses vara ett kort för ett rutnät där alla rad- och kolumndefinitionerna är inställda på *

Standardrader och kolumner

Som standard kommer UniformGrid att försöka skapa ett lika stort antal rader och kolumner. När en rad blir för lång kommer den att lägga till en ny kolumn.

Den här koden ger ett rutnät på 3x3 med de första två raderna fyllda och den sista med en knapp:

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

Specificerade rader / kolumner

Du kan berätta för UniformGrid exakt hur många rader och / eller kolumn du vill ha.

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

OBS! Om både rader och kolumner är inställda och det finns fler barn än celler visas de sista barnen i rutnätet inte

FirstColumn Property

När egenskapen Kolumner är inställd kan du ställa in egenskapen FirstColumn. Den här egenskapen kommer att ange x tomma celler till den första raden innan det första barnet visas. FirstColumn måste ställas in på ett nummer mindre än egenskapen Kolumner.

I det här exemplet visas den första knappen i den första radens andra kolumn:

<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 har introducerats i Windows 10 och används främst för att stödja anpassningslayouter, där barnets element på panelen läggs ut olika beroende på tillgängligt utrymme. RelativePanel används vanligtvis med visuella tillstånd , som används för att växla layoutkonfigurationen, anpassa sig till skärm- eller fönsterstorlek, orientering eller användarfall. Barnelementen använder bifogade egenskaper som definierar var de är i relation till panelen och varandra.

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