如何在WPF中使用ListBox对键和值进行分组

Posted 2021-05-03

我有一个包含键和值对的列表项。我已经绑定了键入列表框，它显示正确的输出。但价值没有表现出来。我知道这是一个非常基本的问题。我是WPF的新手。我已经提到了许多网站和答案但我不知道我的代码在哪里犯了错误。请有人帮助我实现这一目标。我的示例代码如下所述，

MainWindow.xaml

<ListBox
    Name="memberCollection"
    Grid.Row="0"
    MinWidth="150"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    BorderThickness="0"
    ItemsSource="{Binding MainValues}">

    <ListBox.GroupStyle>
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Expander IsExpanded="True">
                                    <Expander.Header>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                                            <ItemsControl ItemsSource="{Binding Values}">
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <Label Content="{Binding Name}"/>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </StackPanel>
                                    </Expander.Header>
                                    <ItemsPresenter />
                                </Expander>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </ListBox.GroupStyle>                        
</ListBox>

MainViewModel

public MainViewModel(TestCollection testCollection)
{
    MainValues = new ObservableCollection<Details>();
    TestCollections = testCollection;

    foreach (var _val in TestCollection.GroupingMainCollection)
    {
        MainValues.Add(new Details() { Key = _val.Key, Values = _val.Value});
    }

    CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(MainValues);
    PropertyGroupDescription groupDescription = new PropertyGroupDescription("Key");
    view.GroupDescriptions.Add(groupDescription);

}    

DetailsModel

public class Details 
{     
    public string Key { get; set; }
    public ObservableCollection<IValue> Values { get; set; }
}

IValue

public interface IValue
{
    string Name { get; set; }            
    string ID { get; set; }
} 

答案

您不希望在组头中但在组内容下显示Values集合，因此从扩展器标头下移动ItemsControl并将其设置为ItemTemplate。

这是工作代码：

<ListBox
                        Name="memberCollection"
                        Grid.Row="0"
                        MinWidth="150"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        BorderThickness="0"
                        ItemsSource="{Binding MainValues}">
    <ListBox.GroupStyle>
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Expander IsExpanded="True">
                                    <Expander.Header>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                                        </StackPanel>
                                    </Expander.Header>
                                    <ItemsPresenter />
                                </Expander>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </ListBox.GroupStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Values}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Label Content="{Binding Name}"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

编辑：如果我理解正确，您想要显示项目集合，然后只选择项目集合中的单个项目！

下面的结帐代码使用ItemsControl而不是使用ListView/ListBox：

<ScrollViewer>
    <ItemsControl ItemsSource="{Binding MainValues}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Gray" BorderThickness="1" Padding="5" Margin="5">
                    <Expander IsExpanded="True">
                        <Expander.Header>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Key}" FontWeight="Bold" />
                            </StackPanel>
                        </Expander.Header>

                        <ListBox ItemsSource="{Binding Values}" 
                                BorderThickness="0,1,0,0" Margin="0,5,0,0"
                                DisplayMemberPath="Name" SelectedValuePath="Id" />
                    </Expander>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>