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

Question

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

我目前使用的网格，所以：

• 行0包含工具栏
• 第1行包含REGION1和
• 第2行中包含区域2。

工具栏上有一个切换按钮，点击后可以完全隐藏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，当事件发生时（对我来说是一个复选框，databound为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>