WPF GridSplitter Doesn't Work With WebBrowser

Question

I've been struggling with the GridSplitter. It seems to be incompatible with the WPF WebBrowser control.

If I resize my window and move the GridSplitter, then I can make my grid wider than my window and non-viewable.

Before:

WPF GridSplitter WebBrowser Before http://img239.imageshack.us/img239/4061/grid1vn8.gif

After: (note scrollbars)

WPF GridSplitter WebBrowser After http://img101.imageshack.us/img101/4303/grid2so0.gif

My XAML...

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        MinWidth="450"
        Width="450"
        Height="300"
        Title="Window3">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="200" Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition MinWidth="200" Width="*"/>
        </Grid.ColumnDefinitions>
        <Button Name="Button2"
                Grid.Column="0"
                Margin="5"
                Content="Button2"/>
        <GridSplitter
            Width="2"
            Grid.Column="1"
            HorizontalAlignment="Center"
            Margin="5"
            Panel.ZIndex="1"
            VerticalAlignment="Stretch"
            ResizeBehavior="PreviousAndNext"
            ResizeDirection="Columns"/>
        <WebBrowser
            Grid.Column="2"
            Margin="5"
            Source="http://www.google.com"/>
    </Grid>
</Window>

Steps to reproduce the problem...

1. Drag the window's right edge to the right to about double its width
2. Drag the splitter to the left as far as it'll go
3. Drag the window's right edge to the left as far as it'll go.

How do I keep the GridSplitter from changing the size of my Grid beyond what the Window can contain?

Does anyone know more about this problem? ...or have a workaround?

Answer 1

I know you're probably sick of hearing this, but I can't reproduce your problem when I use the XAML above, slightly modified to be pure XAML:

( XAML code moved into question. )

Could there be something in your code-behind that is causing the behavior?

Answer 2

I was able to reproduce this with a Border in a ScrollViewer (but not without a ScrollViewer), so my guess is that the scrolling messes it up somehow.

Setting a MaxWidth on the left column (a very large MaxWidth that should have no practical effect) seemed to fix it:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="300"
        MinWidth="450"
        Width="450"
        Title="Window3">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="200" Width="*" MaxWidth="10000"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition MinWidth="200" Width="*"/>
        </Grid.ColumnDefinitions>
        <Button
            Name="Button2"
            Grid.Column="0"
            Margin="5"
            Content="Button2"/>
        <GridSplitter
            Width="2"
            Grid.Column="1"
            HorizontalAlignment="Center"
            Margin="5"
            Panel.ZIndex="1"
            VerticalAlignment="Stretch"
            ResizeBehavior="PreviousAndNext"
            ResizeDirection="Columns"/>
        <WebBrowser Grid.Column="2" Margin="5" Source="http://www.google.com"/>
    </Grid>
</Window>

It appears that at some point, the star sizing overrides the fact that there's no space left, so when the left column reaches Width = 200, and the GridSplitter has changed the star size of the right column to 3* or so, the column will be 600 whether there is space or not.