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

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>