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

时间:2018-08-28 04:41:30

标签: c# wpf binding grouping

我有一个带有键和值对的列表项。我在列表框中绑定了“键”,它显示正确的输出。但是价值没有显示出来。我知道这是一个非常基本的问题。我是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; }
} 

1 个答案:

答案 0 :(得分:0)

您不想在组标题中显示Values集合,而是在组内容下显示,因此将ItemsControl从Expander标头下面移并将其设置为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>

Grouping ListItem Selection Issue Screenshot

编辑: 如果我对您的理解正确,则希望显示项目集合,然后在项目集合中仅选择一个项目!

下面的结帐代码使用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>