Grid rows - fill all available space

Question

I would like to put two controls in WPF in a Grid - GridView and ScheduleView one above the other with GridSplitter like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="4" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <telerik:RadScheduleView Grid.Row="0" />
    <GridSplitter Grid.Row="1" HorizontalAlignment="Stretch"  Height="4"/>
    <telerik:RadGridView Grid.Row="2"/>
</Grid>

The problem is that there are three modes: - only GridView is shown - only ScheduleView is shown - GridView and ScheduleView are shown In each case I want the visible control(s) to fill all available space. In case the two are shown I want them to share the space between them and GridSplitter should be able to resize that space.

How can I accomplish this without explicitly setting heights while changing display modes?

Answer 1

I would suggest doing something like a MathConverter to explicitly set your Grid's heights based on some triggers

For example, if both Grids are visible, set their height to to be ((GridHeight - 4) / 2) , while if only one grid is visible then set it to the Grid's full height since neither the GridSplitter nor the other Grid are visible.

Here's an example. I left out the visibility triggers since I'm assuming you already know how to implement them.

<Grid x:Name="ParentGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <telerik:RadScheduleView x:Name="MyGridView" Grid.Row="0">
        <telerik:RadScheduleView.Style>
           <Style TargetType="telerik:RadScheduleView">
              <Setter Property="Height" 
                      Value="{Binding ElementName=ParentGrid, 
                                      Path=ActualHeight,
                                      Converter={StaticResource MathConverter},
                                      ConverterParameter=((@VALUE-4)/2)}"/>
                 <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=MyScheduleView, Path=IsVisible}" Value="False">
                      <Setter Property="Height" Value="{Binding ElementName=ParentGrid, Path=ActualHeight}"/>
                    </DataTrigger>
                 </Style.Triggers>
            </Style>
       </telerik:RadScheduleView.Style>
    </telerik:RadScheduleView>

    <GridSplitter Grid.Row="1" HorizontalAlignment="Stretch"  Height="4"/>

    <telerik:RadGridView x:Name="MyScheduleView" Grid.Row="2"
        <telerik:RadScheduleView.Style>
           <Style TargetType="telerik:RadScheduleView">
              <Setter Property="Height" 
                      Value="{Binding ElementName=ParentGrid, 
                                      Path=ActualHeight,
                                      Converter={StaticResource MathConverter},
                                      ConverterParameter=((@VALUE-4)/2)}" />
                 <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=MyGridView, Path=IsVisible}" Value="False">
                      <Setter Property="Height" Value="{Binding ElementName=ParentGrid, Path=ActualHeight}"/>
                    </DataTrigger>
                 </Style.Triggers>
            </Style>
       </telerik:RadScheduleView.Style>
    </telerik:RadScheduleView>
</Grid>

Answer 2

Simply give the height of two rows as * which means it will fill all the available space. And bind the GridSplitter with the visibility of two columns using Triggers or Converter whichever you feel comfortable with. With trigger this would work-

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="4" />
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <telerik:RadScheduleView Grid.Row="0" />
    <GridSplitter Grid.Row="1" HorizontalAlignment="Stretch">
       <GridSplitter.Style>
           <Style TargetType="GridSplitter">
              <Setter Property="Visibility" Value="Visible"/>
                 <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=btn1, Path=IsVisible}" Value="False">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding ElementName=btn2, Path=IsVisible}" Value="False">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                 </Style.Triggers>
            </Style>
       </GridSplitter.Style>
    </GridSplitter>
    <telerik:RadGridView Grid.Row="2"/>
</Grid>

I am assuming that Visibility for your GridView's are already in place (the logic of how to play with the visibility). Make sure you set the Visibility to Collapsed instead of Hidden for your GridViews.