El control DockPanel

El DockPanel simplifica la tarea de acoplar contenido en las direcciones (arriba, abajo, izquierda y derecha). Esto lo convierte en una una gran opción en muchas situaciones donde quieras dividir la ventana en áreas específicas especialmente porque, por defecto, el último elemento dentro del DockPanel (a no ser que esta funcionalidad esté específicamente deshabilitada) va a llenar el resto del espacio (desde el centro).

Como hemos visto con muchos de los otros paneles en WPF, empezamos beneficiándonos de las posibilidades del panel usando una de sus propiedades ligadas, en este caso es la propiedad DockPanel.Dock, la cual decide en que dirección queremos que el control hijo se coloque. Si no usas esta propiedad, el primer control se colocará desde la izquierda, y el último tomará todo el espacio sobrante. Aquí hay un ejemplo de como usarlo:

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Left">Left</Button>
		<Button DockPanel.Dock="Top">Top</Button>
		<Button DockPanel.Dock="Right">Right</Button>
		<Button DockPanel.Dock="Bottom">Bottom</Button>
		<Button>Center</Button>
	</DockPanel>
</Window>

Como ya se mencionó, no asignamos una posición para el último elemento dentro del DockPanel, debido a que este se centrará automáticamente permitiéndole llenar el espacio restante. También notarás que los controles alrededor del centro solo utilizan el espacio que necesitan, el resto del espacio se deja libre para el elemento posicionado en el centro. Es por eso que verás que el botón de la derecha con el texto "Right" utiliza un poco más de espacio que el botón de la izquierda ("Left"), ya que el caracter extra en el texto simplemente requiere más píxeles.

La última cosa que te gustará conocer, es como el espacio es dividido. Por ejemplo, el botón de arriba no toma todo el espacio de arriba, debido a que el botón de la izquierda toma parte de ese espacio. El DockPanel decide que control favorece mirando su posición en la definición. En este caso, el botón izquierdo tiene preferencia porque está de primero en la definición. Afortunadamente, esto también significa que es muy fácil cambiarlo, como veremos en el siguiente ejemplo, donde también hemos igualado un poco el espacio asignando altos y anchos a los controles hijos.

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>	
		<Button>Center</Button>
	</DockPanel>
</Window>

Los controles que se encuentra en la parte superior (Top) e inferior (Bottom) ahora tienen prioridad por sobre los controles situados a izquierda (Left) y derecha (Right). Además, los 4 controles en los bordes tienen un ancho o alto según corresponda de 50 píxeles. Si achicas o agrandas la ventana también veras que estas medidas estáticas de ancho y alto permanecen iguales siempre. Solo el área central aumenta o disminuye de tamaño a medida que redimensionas la ventana.

Propiedad LastChildFill

Como ya mencionamos, el comportamiento por defecto es que el último elemento del DockPanel utilice todo el espacio remanente, pero esto puede deshabilitarse usando la propiedad LastChildFill. Aquí hay un ejemplo donde lo deshabilitamos, y al mismo tiempo mostramos la facultad de acoplar más de un control hacia el mismo lado:

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="300" Width="300">
	<DockPanel LastChildFill="False">
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
	</DockPanel>
</Window>

En este ejemplo, acoplamos dos controles hacia la izquierda y 2 controles hacia la derecha y, al mismo tiempo, deshabilitamos la propiedad LastChildFill. Esto nos deja un espacio vacío en el centro, lo cual puede ser preferible en algunos casos.