xaml
Controles de diseño

Lona

Canvas es el más simple de los paneles. Coloca elementos en las coordenadas Top/Left especificadas.

<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 alinea el control de acuerdo con la propiedad de acoplamiento, en el orden en que se coloca en el control.

NOTA: DockPanel es parte del marco WPF, pero no viene con Silverlight / WinRT / UWP. Sin embargo, las implementaciones de código abierto son fáciles de encontrar.

<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 coloca sus controles uno tras otro. Actúa como un panel de acoplamiento con todos los muelles de su control establecidos en el mismo valor.

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

Para apilar elementos de abajo hacia arriba, use un panel de acoplamiento.

Cuadrícula

Grid se utiliza para crear diseños de tablas.

Definiciones básicas de filas y columnas.

<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: Todos los ejemplos siguientes usarán solo columnas, pero también son aplicables a las filas .

Definiciones de tamaño automático

Las columnas y filas se pueden definir con "Automático" como su ancho / alto. El tamaño automático tomará tanto espacio como sea necesario para mostrar su contenido, y no más.
Las definiciones de tamaño automático se pueden utilizar con definiciones de tamaño fijo.

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

Definiciones de estrellas simples

Las columnas y filas se pueden definir con * como su ancho / alto. Las filas / columnas de tamaño estrella ocuparán todo el espacio que tengan , independientemente de su contenido.
Las definiciones de tamaño estrella se pueden usar con definiciones de tamaño fijo y automático. El tamaño de estrella es el predeterminado y, por lo tanto, se puede omitir el ancho de columna o el alto de fila.

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

Definiciones de tamaño de estrella proporcional

Además del hecho de que la estrella ocupa tanto espacio como puede, las definiciones de las estrellas también son proporcionales entre sí. Si no se menciona nada más, cada definición de estrella ocupará tanto espacio como las otras en la cuadrícula actual.

Sin embargo, es posible definir una relación entre los tamaños de diferentes definiciones simplemente agregándole un multiplicador. Por lo tanto, una columna definida como 2* tendrá el doble de ancho que una columna definida como * . El ancho de una sola unidad se calcula dividiendo el espacio disponible por la suma de los multiplicadores (si no hay, se cuenta como 1).
Por lo tanto, una cuadrícula con 3 columnas definidas como * , 2* , * se presentará como 1/4, 1/2, 1/4.
Y una con 2 columnas definidas como 2* , 3* se presentará 2/5, 3/5.

Si hay definiciones automáticas o fijas en el conjunto, éstas se calcularán primero, y las definiciones en estrella tomarán el espacio restante después de eso.

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

Columna / Fila

Es posible hacer que un control se extienda más allá de su celda configurando Row / ColumnSpan. El valor establecido es el número de filas / columnas 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

El panel de envoltura actúa de manera similar al panel de apilamiento. Excepto cuando reconoce que los elementos excederán su tamaño, luego los envolverá en una nueva fila / columna, dependiendo de su orientación.

Orientación horizontal

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

Panel de envoltura vertical

<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 cuadrícula uniforme colocará a todos sus hijos en un diseño de cuadrícula, cada niño en su propia celda. Todas las celdas tendrán el mismo tamaño. Se puede pensar que es una abreviatura de una cuadrícula donde todas las definiciones de filas y columnas se configuran en *

Filas y columnas predeterminadas

Por defecto, UniformGrid intentará crear un número igual de filas y columnas. Cuando una fila sea demasiado larga, agregará una nueva columna.

Este código producirá una cuadrícula de 3x3 con las primeras 2 filas llenas y la última con un botón:

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

Filas / columnas especificadas

Puede decirle a UniformGrid exactamente cuántas filas y / o columnas desea tener.

<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: en caso de que ambas filas y columnas estén configuradas, y haya más elementos secundarios que celdas, no se mostrarán los últimos elementos secundarios de la cuadrícula

Propiedad FirstColumn

Una vez que se establece la propiedad Columnas, puede establecer la propiedad FirstColumn. Esta propiedad ingresará x celdas vacías en la primera fila antes de que se muestre el primer hijo. FirstColumn se debe establecer en un número más pequeño que la propiedad Columnas.

En este ejemplo, el primer botón se mostrará en la segunda columna de la primera fila:

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

Panel relativo

RelativePanel se introdujo en Windows 10 y se usa principalmente para admitir diseños adaptativos, donde los elementos secundarios del panel se distribuyen de manera diferente según el espacio disponible. RelativePanel se usa generalmente con estados visuales , que se usan para cambiar la configuración del diseño, adaptarse al tamaño de la pantalla o ventana, la orientación o el caso de uso. Los elementos secundarios utilizan propiedades adjuntas que definen dónde están en relación con el panel y entre sí.

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