0

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

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

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

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

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

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

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

任何关于我所做的事情的指示都非常感谢！:)

4

2 回答 2

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>
于 2011-05-08T16:40:55.347 回答
0

我也用于包含 region1 和 region2 的这一行。region2默认Visibility设置为Collapsed，当事件发生时（我的复选框，数据绑定到布尔值）我翻转了区域的可见性。我的“区域”包含两种不同的布局，我没有遇到任何问题。

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

<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>
于 2011-05-08T16:40:18.437 回答