WPF - GridSplitter with three columns

Question

I have an app with grid with 3 columns. The grid splitter between the first and second columns works just fine. To get the splitter over to be between the second and third columns I made a column for the splitter. (So now the the third column is really the fourth.)

When I resize the other columns also shrink. I assume that is because I have them set to be relative sized. But I don't know how to fix it.

Here is a XAML Pad Ready example of my issue. Plug this into XAML pad and then try to resize the last column to be smaller.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#feca00" Grid.Column="0">
            <TextBlock FontSize="35" Foreground="#58290A"
                   TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter Width="10" />
        <Border CornerRadius="10" BorderBrush="#58290A"
              BorderThickness="5" Grid.Column="1">
            <TextBlock FontSize="25" Margin="20" Foreground="#FECA00"
                   TextWrapping="Wrap">Right Hand Side</TextBlock>
        </Border>
        <GridSplitter Grid.Column="2" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <TabControl Grid.Column="3" Name="tabControl1">
            <TabItem Header="Add Links" Name="tabAddLinks">
                <Grid></Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Page> 

Thanks for the help!

---

EDIT: It was suggested that having both splitters in their own columns might fix it. I tried that and now the first splitter also shrinks the columns like the second splitter does.

Here is the XAML Pad code for that example:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#feca00" Grid.Column="0">
            <TextBlock FontSize="35" Foreground="#58290A"
                   TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter Grid.Column="1" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <Border CornerRadius="10" BorderBrush="#58290A"
              BorderThickness="5" Grid.Column="2">
            <TextBlock FontSize="25" Margin="20" Foreground="#FECA00"
                   TextWrapping="Wrap">Right Hand Side</TextBlock>
        </Border>
        <GridSplitter Grid.Column="3" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <TabControl Grid.Column="4" Name="tabControl1">
            <TabItem Header="Add Links" Name="tabAddLinks">
                <Grid></Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Page> 

Masson

Answer 1

Try setting HorizontalAlignment="Center" for both splitters - no idea why having it set to "Right" should cause the behaviour to go so screwy, but changing it worked for me :)

Okay

update: I think it's to do with the GridSplitter's ResizeBehaviour property will default to BasedOnAlignment if unspecified, so only the column to the right of the GridSplitter's column will be resized... would need to dig deeper into the msdn doco to be sure... – Okay

Answer 2

A GridSplitter should be placed within its own Column in a Grid. I'm not sure I understand your issue entirely, but I suggest you try creating a Grid with 5 ColumnDefinitions. Use columns 1 and 2 to place the GridSplitters and columns 0, 2 and 4 for content.

The GridSplitter MSDN doc has a sample on how to do this.

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>
...
<GridSplitter Grid.Column="1"
          HorizontalAlignment="Center"
          VerticalAlignment="Stretch"
          Background="Black" 
          ShowsPreview="True"
          Width="5"
          />

Unsaid

I tried that and now both columns are broken. See my updated question for the changed XAML. – Masson

Also note that this issue is only present on a 3 column situation. Two columns work just fine... – Masson

I guess you didn't try HorizontalAlignment="Center" like the sample I posted. :) Glad you solved the problem though. – Unsaid

Answer 3

I had a similar issue with 3-columns splitters collapsing unexpectedly at some point while resizing. it turned out the issue was related to negative Margin (I did that for layout purposes) but apparently it confuses the system, so removing the negative margin from the grid splitters worked for me.

Wheedle