Grid row height binding stop binds after splitter was moved

Question

I got a grid (2 rows) with grid splitter, the splitter is at the second row.

I want to bind the second row height to a member, so I can control the view by a button click: At the begining the view shows only first row, when button clicked the view show both rows and the splitter is in the middle, after another click the second row and the splitter go down as the state was at the begining.

I did it, but it works only if splitter is not used. After use the splitter the binding stops.

What is the problem?

Answer 1

You got 3 rows, right? the splitter is in the middle row i guess

Answer 2

To get the GridSplitter back to the orignal position bind the RowDefinition Height to both Grid.RowDefinitions between the GridSplitter. Note, I also typically place the GridSplitter in its own Grid RowDefinition with a Height=Auto.

I included the binding for the RowDefinition Height and Button command below, everything else is just some data I used for display purposes. You can also do this from the code-binding for the Button Click event.

Here is the XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="{Binding Path=Row0GridHeight, Mode=TwoWay}"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="{Binding Path=Row2GridHeight, Mode=TwoWay}" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Horizontal">
        <TextBox Text="Enter text here"/>
        <Button Content="Click" 
                VerticalAlignment="Top" 
                Height="23" 
                Command="{Binding Path=ToggleViewCommand}"/>
    </StackPanel>
    <GridSplitter Grid.Row="1" 
                  ResizeBehavior="PreviousAndNext" 
                  HorizontalAlignment="Stretch" 
                  ResizeDirection="Rows" 
                  Height="5"/>
    <Grid Grid.Row="2">
        <ListBox>
           <ListBox.Items>
               <TextBlock Text="Choice 1"/>
               <TextBlock Text="Choice 2"/>
               <TextBlock Text="Choice 3"/>
               <TextBlock Text="Choice 4"/>
               <TextBlock Text="Choice 5"/>
            </ListBox.Items>
        </ListBox>
    </Grid>
</Grid>

Here is the RowDefinition Height binding:

  private GridLength _row0GridHeight = new GridLength(1, GridUnitType.Star);
  public GridLength Row0GridHeight
  {
     get
     {
        return _row0GridHeight;
     }
     set
     {
        _row0GridHeight = value;
        NotifyPropertyChanged("Row0GridHeight");
     }
  }

  private GridLength _row2GridHeight = new GridLength(0, GridUnitType.Star);
  public GridLength Row2GridHeight
  {
     get
     {
        return _row2GridHeight;
     }
     set
     {
        _row2GridHeight = value;
        NotifyPropertyChanged("Row2GridHeight");
     }
  }

Here is the Command binding from the Button (implements ICommand):

private void ExecuteToggleViewCommand(Object args)
{
   if ( _row2GridHeight.Value == 1)
   {
      Row2GridHeight = new GridLength(0, GridUnitType.Star);
   }
   else
   {
      Row0GridHeight = new GridLength(1, GridUnitType.Star);
      Row2GridHeight = new GridLength(1, GridUnitType.Star);
   }
}