带有 DataTemplate 的嵌套菜单项答案

【问题标题】：Nested Menu Items with DataTemplate带有 DataTemplate 的嵌套菜单项
【发布时间】：2014-01-28 11:57:56
【问题描述】：

我正在使用 MVVM 使用 WPF 编写应用程序，但现在我在构建嵌套菜单时遇到问题：

我有两个名为 ThumbnailDocument 和 ThumbnailPage 的对象。在我的 ViewModel 中有一个 ObservableCollection 的 ThumbnailDocuments 和在 ThumbnailDocuments 我有一个 ObservableCollection 的 ThumbnailPage

代码如下：

ViewModel 类：

public class ThumbnailPageViewModel : ViewModelBase
{
    public ThreadSafeObservableCollection<ThumbnailDocument> Documents
    {
        get { return this._CurrentlyLoadedDocs; }
    }
}

ThumbnailDocument 类：

public class ThumbnailDocument : INotifyPropertyChanged, IDisposable
{ 
    public ThreadSafeObservableCollection<ThumbnailPage> ThumbnailPages
    {
        get { return _ThumbnailPages; }
    }

    public string DocumentTitle { get; set; }
}

ThumbnailPage 类：

public class ThumbnailPage : INotifyPropertyChanged, IDisposable
{
    public int PageNumber { get; private set; }
}

现在我想用这种结构创建一个嵌套菜单：

标题条目 --> 所有文档标题 --> 对于我将鼠标悬停在页码上的每个文档

例如：标题条目-->

文档 1

       --> Page 1
       --> Page 2
       --> Page 3

文档 2
```
       --> Page 1
       --> Page 2
```

我希望这个例子很清楚。

我已经编写了这个 XAML 部分，但它不起作用：

<MenuItem Header="{Binding Source={StaticResource thumbnailViewModel}, Path=Ctx_Move_Pages}"
    ItemContainerStyle="{StaticResource MovePages_MenuItemContainerStyle}"
    ItemsSource="{Binding Source={StaticResource thumbnailViewModel}, Path=LoadedDocuments}">                                    
    <MenuItem.ItemTemplate>
        <DataTemplate DataType="ThumbnailDocument">
            <MenuItem ItemsSource="{Binding ThumbnailPages}">
                <MenuItem.ItemContainerStyle>
                    <Style TargetType="MenuItem">
                        <Setter Property="Header" Value="{Binding PageNumber}"></Setter>
                    </Style>
                </MenuItem.ItemContainerStyle>
            </MenuItem>
        </DataTemplate>
    </MenuItem.ItemTemplate>
    <MenuItem.Icon>
        <Image Source="{StaticResource MovePageSmall}" Width="16" Height="16"/>
    </MenuItem.Icon>
</MenuItem>

还有风格：

<Style x:Key="MovePages_MenuItemContainerStyle" TargetType="MenuItem">
    <EventSetter Event="PreviewMouseLeftButtonDown" Handler="MovePages_MenuItem_Clicked" />
    <Setter Property="Header" Value="{Binding DocumentTitle}"></Setter>
</Style>

你有什么想法可以让我运行吗？

【问题讨论】：

标签： c# wpf xaml data-binding mvvm

【解决方案1】：

在 WPF 中显示分层数据的最佳方式是使用 HierarchicalDataTemplate Class。该类扩展了DataTemplate 类并添加了基本的ItemsSource 属性。使用此属性，您可以定义使用哪个集合属性来表示子对象：

<HierarchicalDataTemplate DataType="{x:Type YourXmlNamespacePrefix:YourClass}" 
    ItemsSource="{Binding YourChildCollectionProperty}">
    <TextBlock Text="{Binding SomeProperty}" />
</HierarchicalDataTemplate>

有关此类的代码示例和完整说明，请参阅 MSDN 上的 HierarchicalDataTemplate Class 页面。

【讨论】：

谢谢，经过多次试验和错误，我已经用这个 HierarchicalDataTemplate 得到了它