Marks
Marks

Reputation: 3663

Gridsplitter ignores minwidth of columns

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

Upvotes: 15

Views: 10530

Answers (2)

Superman
Superman

Reputation: 309

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>

Upvotes: 0

Wallstreet Programmer
Wallstreet Programmer

Reputation: 9677

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>

Upvotes: 23

Related Questions