WPF - HorizontalAlignment behavior

Question

I'm trying to experiment with WPF, so I created some test window to see how it goes and I encountered a little behavior I did not expect with the HorizontalAlignment property.

First of all the screen looks like this:

The problem is, that in the bottom row of the marked grid, I wanted to have the left textBlock and CheckBox aligned to the left, the center textBlock and DatePicker aligned to the center and the same with the right. As you can see in the picture earlier, it doesn't really happen.

The XAML for this grid row:

<StackPanel Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal">
        <TextBlock HorizontalAlignment="Left" Margin="10">Filter By Date</TextBlock>
        <CheckBox HorizontalAlignment="Left" Margin="2" Height="18" Width="13"></CheckBox>
        <TextBlock HorizontalAlignment="Center" Margin="10">Begin Date</TextBlock>
        <DatePicker HorizontalAlignment="Center" Margin="2"> </DatePicker>
        <TextBlock HorizontalAlignment="Right" Margin="10">End Date</TextBlock>
        <DatePicker HorizontalAlignment="Right" Margin="2"></DatePicker>
    </StackPanel>

How do i make them be closer to the edges and center and not just one after another like I guess is the automatic StackPanel's layout?

Answer 1

Horizontal StackPanel will ignore HorizontalAlignment of its children but you can use Grid instead with 3 StackPanel aligned left, centre and right:

<Grid Grid.Row="2" Grid.ColumnSpan="2">
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
        <TextBlock Margin="10">Filter By Date</TextBlock>
        <CheckBox Margin="2" Height="18" Width="13"></CheckBox>
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <TextBlock Margin="10">Begin Date</TextBlock>
        <DatePicker Margin="2"> </DatePicker>
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Margin="10">End Date</TextBlock>
        <DatePicker Margin="2"></DatePicker>
    </StackPanel>
</Grid>