Question

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

我目前正在使用网格，所以：

第0行包含工具栏
第1行包含region1和
第2行包含region2。

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

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

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

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

非常感谢任何有关我所做的事情的指示！：）

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值）我翻转了区域的可见性。我的“地区”包含两种不同的布局，我没有遇到任何问题。

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

<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在具有切换按钮的区域之间切换

2 个答案: