如何隐藏/显示堆栈面板中的项目？

Posted 2023-02-21

【中文标题】如何隐藏/显示堆栈面板中的项目？

【英文标题】：How to hide/show items in a stack panel?

【发布时间】：2011-06-19 10:47:57

【问题描述】：

我有一个 wpf-mvvm 应用程序。

因为我有以下...

<Combo box>
item 1
item 2
</Combo box>
<stack pnel>
 <user control 1 />
 <user control 1 />
</stack pnel>

如果用户从组合中选择“项目 1”，我需要显示“用户控件 1” 如果用户从组合中选择“项目 2”，我需要显示“用户控件 2”

在视图模型中...我有这两个组合框项目的 IList。

在这里隐藏/显示项目的最佳方式是什么？

【参考方案1】：

您实际上可以完全删除 StackPanel，因为您一次只会显示一个 UserControl。

完成后，您可以使用technique described here 将ComboBox 的值绑定到UserControl 的可见性。只需将未选择的 UserControl 的 Visibility 设置为 Collapsed。

这允许您在 XAML 中完全处理此问题。

【参考方案2】：

总有另一种方法可以做到这一点:-)

例如，您可以做一个非常简单的方法：订阅 SelectionChanged，检查当前选中的项目，并将要隐藏的项目的可见性设置为折叠。

还有更高级的方法，但我怀疑这个简单的任务是否需要它们。但是，随着代码的开发，您可能需要重新考虑使用这种方法。

【讨论】：

订阅事件、在可视化树中查找控件及其属性应该是 WPF 中的最后手段，而不是第一种。使用样式和触发器可以处理大多数这样的情况，并且不需要编写（或测试或维护）任何代码。

@Robert：只比较代码复杂度。订阅事件是微不足道的，找到一个命名控件就像通过名称访问一样简单，通过代码设置属性是一项幼儿园任务。使用适当的触发器创建正确的样式更加复杂，需要更多代码和至少中间知识，并且与代码隐藏一样可维护。我礼貌地不同意您关于 XAML 代码不是代码的观点。

我认为 WPF 样式和触发器是基础知识，而不是中间知识。 XAML 是数据，而不是代码。它确实将 Steve McConnell 的观察推到了极限，即数据比代码更容易调试，但我仍然认为它适用。

@Robert：你是认真的调试吗？您是否曾尝试调试行为错误的触发器？相比之下，调试代码是一种习惯性且简单的活动。在调试代码隐藏期间，您始终可以放置断点并检查任何属性和任何对象的状态。我知道触发器应该是任何 WPF 实践者的基础知识，但事实上，它们不是。

@Robert：此外，我发现here 提出的技术既不简单也不直接（将信息存储在标签中有点骇人听闻）。使用代码隐藏的解决方案在概念上和代码大小方面都更简单（因此也更易于维护）。

【参考方案3】：

这演示了两种简单的方法，您可以使用样式根据组合框中的选择来更改元素的可见性。第一个样式检查组合框的SelectedIndex，第二个样式检查它的SelectedValue。在此示例中，我已使用字符串对象填充组合框，但您可以将 SelectedValue 与任何类型的对象一起使用，只要您知道其 ToString() 方法返回什么即可。

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:system="clr-namespace:System;assembly=mscorlib">
  <DockPanel>
  <ComboBox x:Name="comboBox" DockPanel.Dock="Top">  
   <system:String>Item 1</system:String>
   <system:String>Item 2</system:String>
  </ComboBox>
  <TextBlock DockPanel.Dock="Top" Text="This displays if Item 1 is selected">
   <TextBlock.Style>
    <Style TargetType="TextBlock">
      <Setter Property="Visibility" Value="Collapsed"/>
      <Style.Triggers>
       <DataTrigger Binding="Binding ElementName=comboBox, Path=SelectedIndex" Value="0">
        <Setter Property="Visibility" Value="Visible"/>
       </DataTrigger>
      </Style.Triggers>
    </Style>
   </TextBlock.Style>
  </TextBlock>
  <TextBlock DockPanel.Dock="Top" Text="This displays if Item 2 is selected.">
   <TextBlock.Style>
    <Style TargetType="TextBlock">
      <Setter Property="Visibility" Value="Collapsed"/>
      <Style.Triggers>
       <DataTrigger Binding="Binding ElementName=comboBox, Path=SelectedValue" Value="Item 2">
        <Setter Property="Visibility" Value="Visible"/>
       </DataTrigger>
      </Style.Triggers>
    </Style>
   </TextBlock.Style>
  </TextBlock>
  </DockPanel>
</Page>