Grid + splitter

Question

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto" MinWidth="100"/>
  <ColumnDefinition Width="4"/>
  <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Canvas Grid.Column="0" HorizontalAlignment="Stretch" Background="Orange"/>
<GridSplitter Grid.Column="1" Width="4" Background="Black" />
<Grid Grid.Column="2" />

When I resize the Canvas in column 0, the canvas is not stretched to fill its column.
The stretch doesn't seem to work.
When I use Width="*" (which I actually do not want) for the first column I canot move the spliter to the left.

My requirement is that the first column is resizable (with a minimum) and that the canvas fills the first column.

Answer 1

You need to set HorizontalAlignment="Stretch" on Grid Splitter to get it work.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" MinWidth="100"/>
    <ColumnDefinition Width="4"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

   <Canvas Grid.Column="0" HorizontalAlignment="Stretch" Background="Orange"/>
   <GridSplitter Grid.Column="1" Width="4" Background="Black"
              HorizontalAlignment="Stretch" /> <-- HERE
   <Grid Grid.Column="2" />

Answer 2

Try this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MinWidth="100"/>
        <ColumnDefinition Width="4"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Canvas Grid.Column="0" Grid.ColumnSpan="2"  Background="Orange" />
    <GridSplitter Grid.Column="1" Width="4" Background="Black" />
    <Grid Grid.Column="2" Background="Green"/>
</Grid>

Grid.ColumnSpan="2" is the key.