WPF separator between grid buttons

Question

I have a grid with 4 buttons...1 row, 4 columns. I am looking for a way to visually group the two buttons on the left from the two on the right. I was looking for a way to do this with a separator but it doesnt seem to be playing nice with Grid, preferring StackPanel.

Is this the right control?
If so, how does one make the thing separate the columns (populated with buttons in this case)?

Thanks.

Answer 1

I usually use the simple choice to add a column with a fixed width between the buttons You can actually use a different background color or insert an image

Answer 2

Have you tried a GridSplitter?

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Height="*" />
        <ColumnDefinition Height="Auto" />
        <ColumnDefinition Height="100" />
        <ColumnDefinition Height="100" />
    </Grid.ColumnDefinitions>
    <Button/>
    <Button/>
    <GridSplitter ResizeDirection="Columns" Grid.Column="2" Height="Auto" Width="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0"/>
    <Button/>
</Grid>

Answer 3

You can use Separator if you style it correctly. By default it creates a horizontal line. You have to apply different styling to make it vertical. See this post for how to style it as a vertical line in a WPF Grid:

CodeProject discussion

The discussion also mentions that StatusBar applies some styling to Separator elements, as long as you don't wrap them in StatusBarItems. Perhaps StackPanel does something similar.