如何在 WPF MVVM 中单击按钮时折叠数据绑定列表框项的内容

Question

我的 WPF MVVM 应用程序中使用以下代码有一个列表框：

<GroupBox Grid.Column="0" Margin="0,0,0,-58">
<DockPanel>
<TextBlock DockPanel.Dock="Top"
HorizontalAlignment="Center" 
Margin="0,0,0,8" 
FontWeight="Bold" 
Text="{x:Static p:Resources.AvaliableLEDsLabel}" />
<ListBox Name="AvailableLEDsListbox" SelectionMode="Extended"
dd:DragDrop.IsDragSource="True"
dd:DragDrop.IsDropTarget="True"
dd:DragDrop.DropHandler="{Binding}"
ItemTemplate="{StaticResource DataTemplateListBoxItem}"
ItemsSource="{Binding AvailableLeds}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
>
<ListBox.GroupStyle>
<StaticResource ResourceKey="StyleListBoxGroup" />
</ListBox.GroupStyle>
</ListBox>
</DockPanel>
</GroupBox>

这将显示设备分组列表，其下方有 LED。数据模板如下：

<GroupStyle x:Key="StyleListBoxGroup">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Command="{Binding HideGroupCommand}">X</Button>
<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Left"
FontWeight="Bold"
Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
<DataTemplate x:Key="DataTemplateListBoxItem">
<TextBlock x:Name="LedId" Text="{Binding LedId}"/>
</DataTemplate>

我想使标题中的 X 按钮连接到HideGroupCommand切换该特定标题下所有项目的隐藏。我将如何做到这一点？提前谢谢。

Answer 1

你几乎没有选择。 第一个： 您需要在视图模型中有一个类似于"ListBoxVisibility"的属性，然后您将该属性绑定到您的 UI。在命令文本中，您刚刚更改了视图模型中该属性的可见性属性 - 因此您可以将其反映在UI上。此可见性属性可以是"bool"或"可见性"或其他类型。仅当它是可见性类型时，绑定时才不需要转换器。

注意：有些人使用它 - 即使它有点超出MVVM模式的一般原则。但有时你必须这样做。

第二 如果要坚持使用 MVVM，那么您需要将 UI 与视图模型完全分离。创建点击事件并更改可见性。