xaml
Controlli di layout

Tela

Canvas è il più semplice dei pannelli. Mette gli oggetti alle coordinate Top/Left specificate.

<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 allinea il controllo in base alla proprietà del dock, nell'ordine in cui è posizionato nel controllo.

NOTA: DockPanel fa parte del framework WPF, ma non viene fornito con Silverlight / WinRT / UWP. Tuttavia, le implementazioni open source sono facili da trovare.

<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 posiziona i suoi controlli uno dopo l'altro. Funziona come un pannello dock con tutti i dock del suo controllo impostati sullo stesso valore.

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

Per impilare gli oggetti dal basso verso l'alto, utilizzare un pannello del dock.

Griglia

Grid viene utilizzata per creare layout di tabella.

Definizioni di righe e colonne di base

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

NOTA: tutti gli esempi seguenti utilizzeranno solo colonne, ma sono applicabili anche alle righe .

Definizioni di dimensioni automatiche

Le colonne e le righe possono essere definite con "Auto" come larghezza / altezza. Le dimensioni automatiche occupano tutto lo spazio necessario per visualizzarne il contenuto e non più.
Le definizioni di dimensioni automatiche possono essere utilizzate con definizioni di dimensioni fisse.

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

Definizioni di stelle semplici

Le colonne e le righe possono essere definite con * come larghezza / altezza. Le righe / colonne di dimensioni stellari occupano tutto lo spazio che ha , indipendentemente dal contenuto.
Le definizioni delle dimensioni delle stelle possono essere utilizzate con definizioni di dimensioni fisse e automatiche. La dimensione della stella è l'impostazione predefinita e quindi la larghezza della colonna o l'altezza della riga può essere omessa.

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

Definizioni dimensionali a stella proporzionale

Oltre al fatto che la stella prende tutto lo spazio che può, le definizioni delle stelle sono anche proporzionali tra loro. Se non viene menzionato nient'altro, ciascuna definizione di stella occupa lo stesso spazio degli altri nella griglia corrente.

Tuttavia, è possibile definire un rapporto tra le dimensioni delle diverse definizioni semplicemente aggiungendo un moltiplicatore ad esso. Quindi una colonna definita come 2* sarà larga il doppio di una colonna definita come * . La larghezza di una singola unità viene calcolata dividendo lo spazio disponibile per la somma dei moltiplicatori (se non c'è viene contato come 1).
Quindi una griglia con 3 colonne definite come * , 2* , * sarà presentata come 1/4, 1/2, 1/4.
E uno con 2 colonne definite come 2* , 3* sarà presentato 2/5, 3/5.

Se nel set sono presenti definizioni auto o fisse, queste verranno calcolate per prime e le definizioni delle stelle occuperanno lo spazio rimanente dopo di ciò.

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

Intervallo colonna / riga

È possibile eseguire un allungamento del controllo oltre la cella impostandolo su Row / ColumnSpan. Il valore impostato è il numero di righe / colonne 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

Il pannello di avvolgimento agisce in modo simile al pannello di impilamento. Tranne quando riconosce che gli oggetti supereranno la sua dimensione, li avvolgerebbe in una nuova riga / colonna, a seconda dell'orientamento.

Orientamento orizzontale

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

Pannello di avvolgimento verticale

<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

La griglia uniforme posizionerà tutti i suoi figli in una griglia, ogni bambino nella propria cella. Tutte le celle avranno le stesse dimensioni. Si può pensare che sia una scorciatoia per una griglia in cui tutte le definizioni di righe e colonne sono impostate su *

Righe e colonne predefinite

Per impostazione predefinita, UniformGrid proverà a creare un numero uguale di righe e colonne. Quando una riga diventerà troppo lunga, verrà aggiunta una nuova colonna.

Questo codice produrrà una griglia di 3x3 con le prime 2 righe riempite e l'ultima con un pulsante:

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

Righe / colonne specificate

Puoi dire a UniformGrid esattamente quante righe e / o colonne desideri avere.

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

NOTA: se sono impostate sia righe che colonne, e ci sono più bambini che celle, gli ultimi bambini nella griglia non verranno visualizzati

Proprietà FirstColumn

Una volta impostata la proprietà Columns, è possibile impostare la proprietà FirstColumn. Questa proprietà immetterà x celle vuote sulla prima riga prima che venga visualizzato il primo figlio. FirstColumn deve essere impostato su un numero inferiore alla proprietà Columns.

In questo esempio, il primo pulsante verrà visualizzato nella seconda colonna della prima riga:

<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 è stato introdotto in Windows 10 e viene utilizzato principalmente per supportare layout adattivi, in cui gli elementi figlio del pannello sono disposti in modo diverso a seconda dello spazio disponibile. RelativePanel viene in genere utilizzato con stati visivi , che vengono utilizzati per cambiare la configurazione del layout, adattandosi alle dimensioni dello schermo o della finestra, all'orientamento o al caso d'uso. Gli elementi figlio utilizzano proprietà associate che definiscono dove sono in relazione al pannello e tra loro.

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