How do I Show/Hide a Grid Row and Grid Splitter based on a Toggle Button?

Question

Currently I have a toggle button that is bound to a boolean property (DualLayout) in my code behind. When the boolean is set to True, then I want my second row in my grid (and grid splitter) to hide and have the first row take up the entire space of the grid. Once the boolean is set to False, I want the grid splitter and bottom row to appear.

Here is a snippet of my xaml

<ToggleButton Name="toggleLayout" Margin="66,1,0,1" Width="25" HorizontalAlignment="Left" IsChecked="{Binding DualLayout}" Checked="toggleLayout_Clicked" Unchecked="toggleLayout_Clicked">
            <ToggleButton.Style>
                <Style TargetType="{x:Type ToggleButton}">
                    <Style.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate DataType="{x:Type ToggleButton}">
                                        <Image Source="Images/PlayHS.png"/>
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="ToolTip" Value="Receive and Transmit Windows Split."/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate DataType="{x:Type ToggleButton}">
                                        <Image Source="Images/PauseHS.png"/>
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="ToolTip" Value="Receive and Transmit Windows Combined."/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
        </ToggleButton>
    <Grid x:Name="transmissionsGrid" Margin="0,28,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" MinHeight="100" />
        </Grid.RowDefinitions>
        <transmission:TransmissionsControl x:Name="transmissionsReceive" TransmissionType="Receive" Margin="0,0,0,5" />
        <GridSplitter Name="gridSplitter1" Grid.Row="0" Background="White" Cursor="SizeNS" Height="4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Foreground="Firebrick"  />
        <transmission:TransmissionsControl x:Name="transmissionsTransmit" TransmissionType="Transmit" Grid.Row="1"  />
    </Grid>

Answer 1

This is untested, but I believe it should work.

First, if you want your first row to take up the whole space, you'll want to define your RowDefinitions as

<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto" />  <!-- Edit: Removed MinHeight="100" -->
</Grid.RowDefinitions>

For showing/hiding the controls, you'll need to bind their Visibility property either to your DualLayout property (if the class properly implements INotifyPropertyChanged), or (perhaps more simply) to the IsChecked property of the ToggleButton.

For instance (the same applies to the GridSplitter):

<!-- EDIT: Added MinHeight="100" here instead -->
<transmission:TransmissionsControl x:Name="transmissionsTransmit"
               TransmissionType="Transmit" 
               Grid.Row="1"
               MinHeight="100"
               Visibility={Binding ElementName=toggleLayout,
                                   Path=IsChecked,
                                   Converter={StaticResource boolToVis}}"  />

At some level above the controls in question (here I am doing it at the window level) you need to add built-in BooleanToVisibilityConverter resource:

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="boolToVis" />
</Window.Resources>