WPF 使用切换按钮在区域之间切换

Question

我有一个视图，加载时包含顶部的工具栏和下面的两个区域。

我当前正在使用网格，因此：

• 第 0 行包含工具栏
• ，第 1 行包含区域 1，
• 第 2 行包含区域 2。

工具栏有一个切换按钮，单击该按钮后，将完全隐藏区域 1，并显示区域 2，反之亦然。

实现这一目标的最佳方法是什么？

我尝试绑定 2 行高度以在切换上进行更改，但空间未正确填充。 VerticalAlignment="Stretch" 和 Horizo​​ntalAlignment="Stretch" 均被使用。

我还尝试启用和禁用托管该区域的项目控件，但这似乎根本不起作用。

非常感谢任何有关我所做工作的指示！ :)

Answer 1

不确定我是否完全理解你想要什么。像这样的东西吗？

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

Answer 2

我也使用了包含region1和region2的这一行。默认情况下，region2 的 Visibility 设置为 Collapsed，当事件发生时（对我来说是一个复选框，数据绑定到 bool 值），我翻转了区域的 Visibility。我的“区域”包含两种不同的布局，并且我没有遇到任何问题。

没有代码隐藏的快速示例代码：

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