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! 🙂

Answer 1

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>