How can I quickly align the controls in a WPF window?

Question

I noticed that the WPF designer does a very poor job on aligning the controls, compared to the Windows Forms designer.

In the window below, I am unable to align each label, so that its text is on the same line as the text in the text box beside. The first label is correctly aligned, but the WPF designer does not give me any snap lines to correctly align the second and the third one.

Also, I cannot align the button with the labels. The snap line puts the button a few pixels leftwards compared to the label texts.

I couldn't find a fast way to do this alignment manually, writing XAML code, either. Putting the controls in a grid, and setting the margin of each control is time consuming.

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

Do you know a fast way to align the controls in the WPF windows ?

Answer 1

Use a Grid to lay out your controls then make sure you don't have any padding on the controls...unless of course you want some padding and you make sure they're all even.

A quick Google Search returned a basic tutorial:

Introduction to the WPF Grid Control

Answer 2

I tought I can avoid doing the alignment with hand-coded XAML. What I ended up with, is this (the styles can be reused in other windows):

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

Use an appropriate Panel control (StackPanel, DockPanel, etc) for the alignment you are wanting, rather than using the default Grid. The Grid control makes it easy to start dragging controls onto the window wherever you want (without being quite as unstructured as the Canvas), but doesn't make any assumptions about what kind of layout you are actually trying to construct.

If the layout you are trying to design is, in fact, a 'grid' (or table, e.g. rows and columns), I suggest either using the UniformGrid control (for evenly-spaced rows and columns) or the Grid with height/width set per row/column and margins on all elements set to 0 (to fully fill its cell).