WPF switch between regions with toggle button

I have a view, that when loaded contains a toolbar at the top, and two regions underneath.

I am currently using a grid, so:

• row 0 contains the toolbar
• row 1 contains region1 and
• row 2 contains regio开发者_运维问答n2.

The toolbar has a toggle button, which when clicked, completely hides region1, and shows region 2, and visa-versa.

What is the best way to achieve this?

I have tried binding the 2 rows heights to get altered on the toggle, but the space is not filled correctly. VerticalAlignment="Stretch" and HorizontalAlignment="Stretch" are both used.

I have also tried enabling and disabling the itemcontrol hosting the region, but that doesn't seem to work at all.

Any pointers as to what I have done are much appreciated! :)

Not sure if I fully understand what you want. Something like this?

<DockPanel>
    <ToggleButton Name="viewToggle" DockPanel.Dock="Top">Toggle Region</ToggleButton>
    <Grid>
        <ContentControl>
            <TextBlock>I'm region 1</TextBlock>
            <ContentControl.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=viewToggle, Path=IsChecked}" Value="False">
                            <Setter Property="ContentControl.Visibility" Value="Visible"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=viewToggle, Path=IsChecked}" Value="True">
                            <Setter Property="ContentControl.Visibility" Value="Hidden"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
        <ContentControl>
            <TextBlock>I'm region 2</TextBlock>
            <ContentControl.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=viewToggle, Path=IsChecked}" Value="True">
                            <Setter Property="ContentControl.Visibility" Value="Visible"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=viewToggle, Path=IsChecked}" Value="False">
                            <Setter Property="ContentControl.Visibility" Value="Hidden"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </Grid>
</DockPanel>

I used for this one row that contains region1 and region2 too. region2's Visibility set to Collapsed by default, and when an event occured (a checkbox for me, databound to a bool value) i flipped the Visibility of the regions. My 'regions' contained two different layout, and i don't experienced any issue.

A quick sample code without code-behind:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
  </Grid.RowDefinitions>

  <Grid.Resources>
    <Style x:Key="showOnToggled" TargetType="GroupBox" BasedOn="{StaticResource {x:Type GroupBox}}" >
      <Setter Property="Visibility" Value="Visible" />
      <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=toggleButton, Path=IsChecked}" Value="True" >
          <Setter Property="Visibility" Value="Collapsed" />
        </DataTrigger>
      </Style.Triggers>
    </Style>

    <Style x:Key="hideOnToggled" TargetType="GroupBox" BasedOn="{StaticResource {x:Type GroupBox}}" >
      <Setter Property="Visibility" Value="Collapsed" />

      <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=toggleButton, Path=IsChecked}" Value="True" >
          <Setter Property="Visibility" Value="Visible" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Grid.Resources>

  <ToggleButton Content="Switch Region"
                Grid.Row="0"
                x:Name="toggleButton" />

  <GroupBox Header="Region1"
            Grid.Row="1"
            Style="{StaticResource showOnToggled}" >
    <!-- Region1's content -->
  </GroupBox>

  <GroupBox Header="Region2"
            Grid.Row="1"
            Style="{StaticResource hideOnToggled}" >
    <!-- Region2's content -->
  </GroupBox>
</Grid>