¿Cómo puedo alinear rápidamente los controles en una ventana de WPF?

Question

Me di cuenta de que el diseñador de WPF hace un trabajo muy pobre en la alineación de los controles, en comparación con el diseñador de Windows Forms.

En la siguiente ventana, no puedo alinear cada etiqueta, por lo que su texto está en la misma línea que el texto en el cuadro de texto al lado. La primera etiqueta está alineada correctamente, pero el diseñador de WPF no me da ninguna línea de ajuste para alinear correctamente la segunda y la tercera.

Además, no puedo alinear el botón con las etiquetas. La línea de ajuste coloca el botón unos píxeles hacia la izquierda en comparación con los textos de las etiquetas.

No pude encontrar una forma rápida de hacer esta alineación manualmente, escribiendo código XAML, tampoco. Poner los controles en una cuadrícula y establecer el margen de cada control consume mucho tiempo.

alt text http://img520.imageshack.us/img520/4843/wpfdesigneralignment.png

¿Conoce una forma rápida de alinear los controles en las ventanas de WPF?

Answer 1

Pensé que puedo evitar hacer la alineación con XAML codificado a mano. Lo que terminó con, está presente (los estilos pueden ser reutilizados en otras ventanas):

<Window x:Class="WpfApplication1.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" SizeToContent="WidthAndHeight"> 
    <Window.Resources> 
     <Style x:Key="ControlStyle" TargetType="Control"> 
      <Setter Property="HorizontalAlignment" Value="Left"/> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
     </Style> 
     <Style BasedOn="{StaticResource ControlStyle}" TargetType="Label"> 
      <Setter Property="Margin" Value="-4,0,0,0"/> 
     </Style> 
     <Style BasedOn="{StaticResource ControlStyle}" TargetType="TextBox"> 
      <Setter Property="Width" Value="120"/> 
     </Style> 
     <Style BasedOn="{StaticResource ControlStyle}" TargetType="Button"> 
      <Setter Property="MinWidth" Value="70"/> 
     </Style> 
     <Style TargetType="Grid"> 
      <Setter Property="Margin" Value="10,10,10,10"/> 
     </Style> 
     <Style x:Key="SeparatorColumn" TargetType="ColumnDefinition"> 
      <Setter Property="Width" Value="10"/> 
     </Style> 
     <Style x:Key="SeparatorRow" TargetType="RowDefinition"> 
      <Setter Property="Height" Value="3"/> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition Style="{StaticResource SeparatorColumn}"/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition Style="{StaticResource SeparatorRow}"/> 
      <RowDefinition/> 
      <RowDefinition Style="{StaticResource SeparatorRow}"/> 
      <RowDefinition/> 
      <RowDefinition Style="{StaticResource SeparatorRow}"/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 
     <Label Grid.Row="0" Grid.Column="0">Label:</Label> 
     <TextBox Grid.Row="0" Grid.Column="2">TextBox</TextBox> 
     <Label Grid.Row="2" Grid.Column="0">Label:</Label> 
     <TextBox Grid.Row="2" Grid.Column="2">TextBox</TextBox> 
     <Button Grid.Row="4" Grid.ColumnSpan="3">Button</Button> 
     <Label Grid.Row="6" Grid.Column="0">Label:</Label> 
     <TextBox Grid.Row="6" Grid.Column="2">TextBox</TextBox> 
    </Grid> 
</Window> 

Answer 2

Usa una rejilla para diseñar tus controles y asegúrate de no tener ningún relleno en los controles ... a menos que, por supuesto, quieras algo de relleno y asegúrate de que estén todos parejos.

Una rápida búsqueda de Google ha devuelto un tutorial básico:

Introduction to the WPF Grid Control

Answer 3

La mejor manera es utilizar cuadrícula o DockPanel.
En la mayoría de los casos, los márgenes no son necesarios.

Answer 4

Utilice un control de panel apropiado (StackPanel, DockPanel, etc.) para la alineación que desee, en lugar de utilizar la cuadrícula predeterminada. El control Grid hace que sea fácil comenzar a arrastrar controles a la ventana donde quieras (sin estar tan desestructurado como el Lienzo), pero no hace suposiciones sobre qué tipo de diseño estás tratando de construir.

Si el diseño que intenta diseñar es, de hecho, una "cuadrícula" (o tabla, por ejemplo, filas y columnas), sugiero usar el control UniformGrid (para filas y columnas espaciadas uniformemente) o la Grilla con alto/ancho establecido por fila/columna y márgenes en todos los elementos configurados en 0 (para llenar completamente su celda).

Answer 5

Yo he escrito un panel personalizado que hace "el diseño del formulario" (grupos de dos columnas, todas las etiquetas mismo tamaño, todos controlan el mismo tamaño, todo alineado, etc.), está en mi blog en: http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

Está diseñado para ser rápido y fácil de usar al editar XAML, ni siquiera lo probé en el diseñador.