GridSplitter 'lockup' RRS feed

  • Question


    I'm noticing a strange behavior with a GridSplitter.  With only two columns in the grid it works as I would expect, you can slid the splitter R-L and it stops just shy of the windows edge.  With three columns (uncomment the two lines in code below, but not the MaxWidth), when you get near the edge the splitter 'snaps' giving the full window to the third column.  After this 'snap' occurres the GridSplitter no longer functions.  While writing this I threw in a MaxWidth for the third column and got rid of the 'snap' behavior, but I'm still curios what causes this 'snap'.  I've done quite a bit of searching for an answer to no avail.  Any ideas?  BTW, the smiley face part of the code below is from one of Petzold's examples in Applications = Code + Markup (credit where credit is due you know).



    Code Block





    Title="Viewbox_Test" Height="358.44" Width="388.438"




    <ColumnDefinition MinWidth="20"/>

    <ColumnDefinition MinWidth="20"/>

    <!--<ColumnDefinition MinWidth="20"/>--><!--MaxWidth="100"-->


    <StackPanel Background="#feca00" Grid.Column="0" MinWidth="20">

    <Viewbox Margin="10,10,65.998,10" MinWidth="20">

    <Canvas Width="100" Height="100" MinWidth="20">

    <Ellipse Canvas.Left="5" Canvas.Top="5"

    Width="90" Height="90" Stroke="Black" />

    <!-- Eyes. -->

    <Ellipse Canvas.Left="25" Canvas.Top="30"

    Width="10" Height="10" Stroke="Black" />

    <Ellipse Canvas.Right="25" Canvas.Top="30"

    Width="10" Height="10" Stroke="Black" />

    <!-- Eyebrows. -->

    <Polyline Points="25,25 30,20 35,25" Stroke="Black" />

    <Polyline Points="65,25 70,20 75,25" Stroke="Black" />

    <!-- Nose. -->

    <Polyline Points="50,40 45,60 55,60 50,40" Stroke="Black" />

    <!-- Mouth. -->

    <Polyline Points="25,70 50,80 75,70" Stroke="Black" />




    <GridSplitter Width="5" Height="Auto" />

    <Border CornerRadius="5" BorderBrush="#000000"

    BorderThickness="5" Grid.Column="1" MinWidth="20">

    <TextBlock FontSize="20" Margin="10" Foreground="#000000"

    TextWrapping="Wrap">Text Content</TextBlock>


    <!--<Button Grid.Column="2" Height="23" Width="50" Name="Button1" VerticalAlignment="Top">Button</Button>-->





    Monday, October 1, 2007 3:09 PM


  • We have been able to repro this and are looking at this issue. Thanks for reporting it Smile

    Wednesday, October 17, 2007 3:20 PM

All replies


    hi there,


    I could not reproduce your snapping problem can you re explain how it happened?



    Thursday, October 4, 2007 7:41 PM
  • Here is how I can reproduce it:


    Create a new project in VS2005 (WinXP with .NET3.0 etc)

    Drop in the XAML code above into the main form

    Do nothing in the code behind

    Run the program in debug mode with everything but MaxWidth uncommented

    Move the GridSpiltter L-R several times holding left mouse button down (can take 1-20 L-R cycles)


    Grid columns 0 and 1 collapse to the far left (a bit of border is showing) and grid column 2 takes over the window.


    Thursday, October 4, 2007 8:54 PM
  • We have been able to repro this and are looking at this issue. Thanks for reporting it Smile

    Wednesday, October 17, 2007 3:20 PM
  • I am also interested in any work arounds you can come up with.
    Jonathan W. MacCollum
    Friday, September 12, 2008 2:50 PM
  • It would be nice to hear any feedback on this issue, because it is still present in WPF (at the date this message being posted)

    Good luck!
    Tuesday, November 18, 2008 10:05 PM
  • I'm also experiencing this, has this issue been addressed?

    This is a simple usercontrol I started working on that has the weird behavior when included in a grid:



                <RowDefinition Height="*"/> 
                <RowDefinition Height="*"/> 
                <ColumnDefinition Width="*"/> 
                <ColumnDefinition Width="*"/> 
                <ColumnDefinition Width="*"/> 
            <Rectangle Fill="#FF4B70A5" Stroke="#FF4B70A5" Grid.Column="1" Grid.Row="1"/> 
            <Rectangle Fill="#FFBACBE4" Stroke="#FFBACBE4" Grid.Column="0" Grid.Row="1"/> 
            <Rectangle Fill="#FFBACBE4" Stroke="#FFBACBE4" Grid.Column="2" Grid.Row="1"/> 
            <GridSplitter Width="5" Grid.Column="0" Grid.RowSpan="2"/> 
            <GridSplitter Width="5" Grid.Column="2" Grid.RowSpan="2" HorizontalAlignment="Left"/> 

    Friday, February 27, 2009 3:05 PM
  • I'm having the same/similar issue.  Is there a workaround?  In my case I have three *-sized rows in a grid with gridsplitters between them.  In a couple particular cases when I drag one of the gridsplitters it will snap back to its original location and stop responding.  Starting a new drag will make it move again, at least temporarily, then it will snap again.

    Setting maximum heights on my rows doesn't help.  Please let me know if there is any sort of workaround.
    Thursday, April 23, 2009 5:50 PM
  • Apparently the problem has been known for about 2 years now.  There's no fix, but the best available workaround is to set the "ShowsPreview" property to true in your GridSplitter.  See this thread: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d7b32fc3-5ff4-47e7-93cd-14cc4bcab7f2/
    • Edited by Brett JV Thursday, July 2, 2009 5:34 PM
    Thursday, July 2, 2009 5:31 PM
  • Just stumbled upon that bug. It still exists :-(

    Edit: After some reading, I might have found a workarround. With UseLayoutRounding="True" on the Grid, the bug disappeared. Regardless of what I did, how fast or far I moved the mouse, the bug was gone with that modification.


      <Grid UseLayoutRounding="True">
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
        <TextBlock Grid.Row="0" Text="Heading"/>
        <Grid Grid.Row="1" Background="Blue"/>
        <GridSplitter Grid.Row="2" ResizeDirection="Rows" Background="Yellow" Height="10" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
        <Grid Grid.Row="3" Background="Red"/>
        <GridSplitter Grid.Row="4" ResizeDirection="Rows" Background="Yellow" ResizeBehavior="PreviousAndNext" Height="10" HorizontalAlignment="Stretch"/>
        <Grid Grid.Row="5" Background="Green"/>

    • Proposed as answer by alexfiftyfour Sunday, April 10, 2011 10:23 AM
    Sunday, April 10, 2011 10:07 AM
  • @alexfiftyfour,

    Thanks a lot for this workaround, it worked for me.

    I am interested to know how yo discovered it??



    Regards M.Afifi
    Wednesday, July 13, 2011 7:41 PM