WPF GridSplitter: changing the last column width when first one has a “*” for size

Question

I have a case where the first column of a Grid should take the remaining space of the grid, but I want that the last column can be resized by the user, using a GridSplitter.

Here is a simplified example of the layout:

<?xml version='1.0' encoding='utf-8' ?>
<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" Height="300" Width="500">
  <Grid Margin="10">
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="10" />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="10" />
      <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>

    <Border BorderBrush="Black"
            BorderThickness="1" />

    <Border BorderBrush="Black"
            BorderThickness="1"
            Width="20"
            Grid.Column="2" />

    <GridSplitter HorizontalAlignment="Center"
                  VerticalAlignment="Stretch"
                  Width="10"
                  Grid.Column="3" />

    <Border BorderBrush="Black"
            BorderThickness="1"
            Grid.Column="4" />

  </Grid>
</Window>

In this example, the borders are here to see the content of the columns.

This example is not working, because moving the GridSplitter changes the size of the column at the left, but the last column, at the right, should be resized.

Has anyone a solution to this?

Answer 1

You could nest two grids.

The outer grid:

• 3 columns (*, auto, 100)
• the third column contains the content of the last column in the question
• the first column contains a child grid

the child grid:

• 3 columns (*, 10, auto)

This child grid contains the content of the first 3 columns in the question.

This way the splitter splits between the child grid and the last column.

Because the first column's width is set to * it gets the remaining width.