WPF: collapse GridSplitter?

Jeff Dege picture Jeff Dege · Sep 18, 2012 · Viewed 8.5k times · Source

I have a WPF page, with a Grid on it.

There are three rows. Row 0 contains a GridView with Height="*". Row 1 contains a GridSplitter with Height="auto". Row 2 contains a details form with Height="2*".

Here's the thing - I have a button that is supposed to toggle the visibility of the details form. And that works just fine. Except that it just hides the form in Row 2, it doesn't expand the Grid in Row 0 to fill the space. What I want is for the button to toggle GridView in Row 0 to take up all the space, and then to toggle back to where things were.

Clearly playing around with the Visibility of the form inside the row won't accomplish what I want.

But what do I need to be playing around with?

Answer

Stefan Zuefeldt picture Stefan Zuefeldt · Oct 30, 2018

In case anyone wants a purely XAML solution, I was able to conjure a way to hide the splitter and relevant row using styles, setters, and triggers.

I used a static resource for my style, which was set to change the Height and MaxHeight when a specific bound boolean was set.

<Style x:Key="showRow" TargetType="{x:Type RowDefinition}">
  <Style.Setters>
    <Setter Property="Height" Value="*"/>
  </Style.Setters>
  <Style.Triggers>
    <DataTrigger Binding="{Binding MyShowRowBool}" Value="False">
      <DataTrigger.Setters>
        <Setter Property="Height" Value="0"/>
        <Setter Property="MaxHeight" Value="0"/>
      </DataTrigger.Setters>
    </DataTrigger>
  </Style.Triggers>
</Style>

I simply applied the style to the relevant row definitions, and it worked like a charm:

<Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Style="{StaticResource showRow}"/>
  <RowDefinition Style="{StaticResource showRow}"/>
</Grid.RowDefinitions>

Notable is that I tried it without the MaxHeight property, and it wasn't collapsing properly. Adding it in seems to have done the trick for me.