GridSplitter getting stuck

Question

I'm having problems where after multiple drags, (it seems to work fine initially, you also have to release the mouse button between each drag), the grid splitter seems to get stuck and not allow you drag it anymore, or sometimes it will only drag a few inches and then get stuck again.

The code I'm using is actually in an ItemTemplate, but to demonstrate the problem I've extracted out the problem code below.

<StackPanel Grid.IsSharedSizeScope="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" SharedSizeGroup="SharedColumnWidth" />
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label Content="Name"
                   Grid.Column="0" />
            <GridSplitter HorizontalAlignment="Center"
                          VerticalAlignment="Stretch"
                          Grid.Column="1"
                          Width="5" />
            <TextBox Grid.Column="2"/>
        </Grid>
    </StackPanel>

(Copy and paste the Grid element, so that there are several in the stackpanel, I've found the gridsplitter to get stuck faster when you have at least 10 grids).

So as mentioned above, if you try resizing multiple times (releasing the mouse button between each drag), after 5-10 resizes, the splitter seems to get stuck, at least for me.

It also seems to only get stuck when you try to drag left.

Answer 1

Yes that is a well known bug:

http://connect.microsoft.com/VisualStudio/feedback/details/509801/

There is workaround to this for example to bind to a ViewModel's property. That would be like this:

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="{Binding Path=Width, Mode=TwoWay}" />
      <ColumnDefinition Width="Auto" />
   </Grid.ColumnDefinitions>
   ....
</Grid>

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="{Binding Path=Width, Mode=TwoWay}" />
      <ColumnDefinition Width="Auto" />
   </Grid.ColumnDefinitions>
   ....
</Grid>

And so those two grids will share the same width for first column.

This approach requires you to use proper ViewModel. :)

Edit:

I forgot the GridSplitter however the idea is to use Bindings to same property and so to provide sharing sizes... Place GridSplitter inside but most important is do not use those SharedSizeGroup tags.