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

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

The best way is to use Grid or DockPanel.
In the most of cases margins are not required.

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).

Answer 4

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 5

I've wrote a custom panel that does "form layout" (groups of two columns, all labels same size, all control same size,everything aligned, etc.), it's on my blog at: http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

It's designed to be quick and easy to use when editing XAML, I didn't even try it in the designer.