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

c#, wpf

Solution

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>

Problem

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 ?

Original source