Windows Presentation Foundation Layout

Para hacer un uso eficiente del WPF (Windows Presentation Foundation) se debe empezar por conocer las opciones que con que contamos para colocar los controles (botones, etiquetas, etc.). Layout es el proceso mediante el cual se define la forma de colocar y organizar los objetos dentro de la ventana. WPF utiliza contenedores llamados paneles, existen varios tipos, cada uno nos da una diferente funcionalidad, es importante utilizar el que mejor nos convenga dependiendo de la ventana que estemos diseñando. Los principales paneles se definen a continuación:

Ø Canvas : Define un espacio en el cual los controles son posicionados mediante coordenadas relativas al panel contenedor.

Ø DockPanel: Define un espacio en el cual los controles son organizados vertical o horizontalmente basados en los controles mismos.

Ø StackPanel: Organiza los controles de manera lineal uno tras otro, horizontal o verticalmente.

Ø GridPanel: Organiza el espacio mediante filas y columnas en el cual se colocan los controles.

Ø WarpPanel: Posiciona los elementos de izquierda a derecha, cambiando la línea cuando el ancho del contenedor no es suficiente para contener todos los controles en un única línea.

Veamos algunos ejemplos,

1. Utilizando Canvas:

<Page WindowTitle="Ejemplo utilizando canvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<Canvas Height="400" Width="400">

<Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>

<Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>

<Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>

</Canvas>

</Page>

2. Utilizando GridPanel

<Page WindowTitle="Ejemplo utilizando Grid" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<Grid Name="myGrid" Background="LightSteelBlue" Height="150">

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<TextBlock Grid.Column="0" Grid.Row="0">Celda 0,0 </TextBlock>

<TextBlock Grid.Column="0" Grid.Row="1">Celda 0,1 </TextBlock>

<TextBlock Grid.Column="0" Grid.Row="2">Celda 0,2 </TextBlock>

<TextBlock Grid.Column="1" Grid.Row="0">Celda 1,0 </TextBlock>

<TextBlock Grid.Column="1" Grid.Row="1">Celda 1,1 </TextBlock>

<TextBlock Grid.Column="1" Grid.Row="2">Celda 1,2 </TextBlock>

</Grid>

</Page>

Como podemos observar en el ejemplo usando canvas los controles son ubicados mediante coordenadas específicas utilizando Top y Left, en el segundo ejemplo los controles son ubicados indicando el column y el row en el cual se requieren colocar.

3. Utilizando Grid y Canvas combinado

<Page WindowTitle="Ejemplo utilizando Grid y Canvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<Grid Name="myGrid" Background="LightSteelBlue" Height="150">

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<TextBlock Grid.Column="0" Grid.Row="0">Celda 0,0 </TextBlock>

<TextBlock Grid.Column="0" Grid.Row="1">Celda 0,1 </TextBlock>

<TextBlock Grid.Column="0" Grid.Row="2">Celda 0,2 </TextBlock>

<TextBlock Grid.Column="1" Grid.Row="0">Celda 1,0 </TextBlock>

<Canvas Height="400" Width="400" Grid.Column = "1" Grid.Row="1" >

<Canvas Height="20" Width="20" Top="0" Left="0" Background="Red"/>

<Canvas Height="20" Width="20" Top="20" Left="20" Background="Green"/>

<Canvas Height="20" Width="20" Top="10" Left="10" Background="Blue"/>

</Canvas>

<TextBlock Grid.Column="1" Grid.Row="2">Celda 1,2 </TextBlock>

</Grid>

</Page>

En el ejemplo 3 podemos observar, que además de la funcionalidad que nos da cada tipo de panel, tenemos la posibilidad de usar estos paneles dentro de otros paneles, logrando de esta manera ampliar aún más las posibilidades con que contamos para el diseño de las aplicaciones que construimos.