WPF - HorizontalAlignment behavior

0
votes

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:
enter image description here

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?

1
c#wpfxamlgridstackpanel
@Rohit Vats what is the syntax you used to embed the picture like that? – Yonatan Nir
How to embed image in SO. – Rohit Vats
StackPanel won't let you do that. Use Grid with 3 ColumnDefinitions defined on it. – Rohit Vats

1 Answers

1
votes

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>