Gridsplitter ignores minwidth of columns

Question

I want to have a simple 3 column grid with resizeable columns and a MinWidth of 80.

The code looks like this:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="120" MinWidth="80"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*" MinWidth="80"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="120" MinWidth="80"/>
  </Grid.ColumnDefinitions>
  <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" />
  <GridSplitter Grid.Column="3" Width="5" HorizontalAlignment="Center" />
</Grid>

But it doesn't work in the way I want and expected. When the splitters are pushed to the left, all works fine. When the second splitter is pushed to the right all works fine. But if the first splitter is pushed to the right, it pushes the 3rd column and the second splitter out of the grid(or makes their width=0).

I used seperate columns for the gridsplitters, like it was done in the msdn example:

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

I also set the alignment to center as i read somewhere right alignment could be a problem and tried different ResizeBehaviors.

Does anyone know, how to fix this issue, so that at all time the 3 columns are visible with at least 80px width?

Thanks for any help

Kiyokokiyoshi

Answer 1

Try this instead for three columns that have minwidth set to 80. Use * instead of specifying exact width when using gridsplitters.

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="80" />
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="*" MinWidth="80"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="*" MinWidth="80"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" />
        <GridSplitter Grid.Column="1"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" />
        <TextBlock Grid.Column="2" Text="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" />
        <GridSplitter Grid.Column="3"   VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" />
        <TextBlock Grid.Column="4" Text="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" />
    </Grid>
</ScrollViewer>

Vicennial

This is throwing extra space when column 5 or 3 is being resized more than its minwidth. . . – Moderation

I also just discovered that the Stretch Alignment is required as well. – Impossibly

Answer 2

Not able to post this as comments; So putting this in the Answer list.
If I put a Grid with GridSplitter as the content on the right side of the main Grid with GridSplitter, I'm able to push the right most pane out of bounds of the window. Any idea?

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" MinWidth="80" />
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="*" MinWidth="80"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Text="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" />
    <GridSplitter Grid.Column="1"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" />
    <Grid Grid.Column="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="80" />
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="*" MinWidth="80"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" />
        <GridSplitter Grid.Column="1"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Red" />
        <TextBlock Grid.Column="2" Text="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" />
    </Grid>
</Grid>

Unmannered

I did something like this: <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.50*" MinWidth="100"/> <ColumnDefinition Width="5"/> <ColumnDefinition Width="*" MinWidth="100"/> </Grid.ColumnDefinitions> </Grid> . Also I used ResizeBehavior="PreviousAndNext" on the GridSplitter. – Huldahuldah