WPF switch between regions with toggle button

Question

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 region2.

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! :)

that works nicely. But what if I want to keep the resources out in a resource dictionary and bind to any toggle button without specifying element name. — , Aug 09 '11 at 14:41

score 1 · Accepted Answer · answered May 08 '11 at 16:40

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>

Ben · Answer 2 · 2011-05-08T17:12:51.897

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>

WPF switch between regions with toggle button

2 Answers2