0

我发现的每个示例和我的文章都是关于按一个属性对项目进行分组并显示它。但是我拥有的是一个强类型的组键，我想显示它。这是模型和分组逻辑：

物品界面

public interface IItem {
    string Title { get; }
    string ToolTip { get; }
    object Icon { get; }
    Type GroupType { get; }
}

IItem有很多这样的实现：

public class Item : IItem {
    public string Title { get; private set; }
    public string ToolTip { get; private set; }
    public object Icon { get; private set; }

    // I have many implementation of IGroup which I will use them in GroupType properties.
    public Type GroupType { get { return SomeGroupTypeHere; } }
}

这是组界面：

public interface IGroup {
    string Name { get; }
    object Icon { get; }
}

它也有很多实现。

我在我的视图模型中收集它们（通过获得帮助Autofac）：

public class MyViewModel {

    private readonly IEnumerable<IGrouping<IGroup, IItem>> _items;

    public MyViewModel(IEnumerable<IGroup> groups, IEnumerable<IItem> items){
        _items = items.GroupBy(t => {
            var g = groups.First(u => u.GetType() == t.GroupType);
            return g;
        });
    }

    public IEnumerable<IGrouping<IGroup, IItem>> Items {
        get { return _items; }
    }
}

现在，问题是，如何在一个ItemsControl？

<ItemsControl ItemsSource="{Binding Items}" Margin="20 20 20 0">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate >
            <!-- here is my template that uses IItem properties, example: -->
            <Button Content="{Binding Title}"
                    ToolTip="{Binding ToolTip}"/>
        </DataTemplate >
    </ItemsControl.ItemTemplate>
</ItemsControl>

该代码仅显示每个组中的第一项，我不知道如何显示组标题（使用IGroup属性）并显示每个组中的所有项目。请问有什么建议吗？任何文章或博客文章都会非常有用。提前致谢。

4

1 回答 1

2

您想HierarchicalDataTemplate在显示分组数据时使用，请将您的更改ItemsControl.ItemTemplate为“HierarchialDataTemplate”。

样本（和未经测试的） HierarchialDataTemplate：

<ItemsControl ItemsSource="{Binding Items}" Margin="20 20 20 0">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding}">
            <Button Content="{Binding Title}" ToolTip="{Binding ToolTip}"/>
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate >
                    <Button Content="{Binding Title}" ToolTip="{Binding ToolTip}"/>
                </DataTemplate >
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

有关 HierarchialDataTemplates 的分步方法，请参阅此博文。

更新

我已经用你的代码尝试了上面的 HierarchialDataTemplate ，它似乎不起作用。但是，如果我ItemsControl用 TreeView 替换，它会按预期工作。

所以，我想，你可能想ItemControl为你的案例嵌套，测试示例代码如下：

<ItemsControl ItemsSource="{Binding Items}" Margin="20 20 20 0">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Button Content="{Binding Title}" ToolTip="{Binding ToolTip}"/>
                <ItemsControl ItemsSource="{Binding}" Margin="15,0,0,0">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate >
                            <Button Content="{Binding Title}" ToolTip="{Binding ToolTip}"/>
                        </DataTemplate >
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这是嵌套 ItemsControls 的屏幕截图。

在此处输入图像描述

更新 2 我认为您需要更新模板以显示组，当前模板不这样做。

更新的模板如下：

<ItemsControl ItemsSource="{Binding Items}" Margin="20 20 20 0">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Button Content="{Binding Key.Name}" />
                <ItemsControl ItemsSource="{Binding}" Margin="15,0,0,0">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate >
                            <Button Content="{Binding Title}" ToolTip="{Binding ToolTip}"/>
                        </DataTemplate >
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

以及由此产生的屏幕截图：

在此处输入图像描述

于 2013-11-13T15:00:25.247 回答