具有CollectionViewSources组和HierarchicalDataTemplate的设计时树视图绑定

Question

I'd like to get sample data to appear in my Treeview during design time. My Treeview contains nested Treeviews and CollectionViewSources.

I'd like to find out how to get the nested Treeviews to show (only the first of 3 levels of nodes show currently).

About the Treeview

Here's what I've figured out so far:

My Treeview contains Hierarchical data (Object States (eg "Ready") > Date (ie "8/8/16") > Name (ie "Apples"), but I can only get one.

The Treeview is backed by:

• ObjectTreeviewViewModel (a ObservableCollection)
• CollectionViewSource to group by StateDisplay (+ sorting)
• Another CollectionViewSource to group by ObjectDateDisplay

Current Status

The ObjectTreeview only shows one level of nodes at design time, when I'm expecting 3 levels of nodes.

My Stack

I'm building a WPF application on .net 4.5, using Visual Studio 2015.

Code

XAML

    <UserControl x:Class="myproject.app.views.MainWindow.ObjectTreeview"
                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                             mc:Ignorable="d" 
                             d:DesignHeight="300" d:DesignWidth="300" 
                             DataContext="{Binding RelativeSource={RelativeSource Self}}"
                             >

            <UserControl.Resources>

                    <ResourceDictionary>
                            <ResourceDictionary.MergedDictionaries>
                                    <ResourceDictionary Source="../../resources/MainWindow/ObjectTreeviewResources.xaml"></ResourceDictionary>
                            </ResourceDictionary.MergedDictionaries>
                    </ResourceDictionary>

            </UserControl.Resources>

            <TreeView x:Name="Treeview" 
                                        ItemsSource="{Binding Source={StaticResource ObjectStateCollectionViewSource}, Path=Groups}"
                                        ItemTemplate="{Binding Source={StaticResource ObjectStateTemplate}}">
            </TreeView>

    </UserControl>

XAML Resources

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                            xmlns:componentModel="clr-namespace:System.ComponentModel;assembly=WindowsBase"
                                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                            xmlns:pf="clr-namespace:System.ComponentModel;assembly=PresentationFramework"
                                            xmlns:mainWindow="clr-namespace:myproject.app.viewmodels.MainWindow"
                                            mc:Ignorable="d">

            <!-- I.e. Level-3 Node (i.e. Leaf nodes) -->
            <DataTemplate x:Key="ObjectTreeviewNode">
                    <TextBlock Text="{Binding ObjectNameDisplay}"/>
            </DataTemplate>


            <!-- Initial Grouping: Group by object states -->
            <CollectionViewSource x:Key="ObjectStateCollectionViewSource" 
                                                        Source="{Binding Path=ObjectTreeviewViewModel.TreeviewCollection}"
                                                        d:DesignSource="{d:DesignData Source=ObjectTreeviewDesignTimeData.xaml}"
                                                        >
                    <CollectionViewSource.GroupDescriptions>
                            <PropertyGroupDescription PropertyName="StateDisplay"/>
                    </CollectionViewSource.GroupDescriptions>
                    <CollectionViewSource.SortDescriptions>
                            <componentModel:SortDescription PropertyName="StateEnum" />
                            <componentModel:SortDescription PropertyName="ObjectDate" />
                            <componentModel:SortDescription PropertyName="ObjectNameDisplay" />
                    </CollectionViewSource.SortDescriptions>
            </CollectionViewSource>

            <!-- I.e. Level-2 Node (i.e. mid-nodes) -->
            <HierarchicalDataTemplate x:Key="ObjectDateTemplate">
                    <TreeView BorderThickness="0">
                            <TreeViewItem Header="{Binding Path=Name}" 
                                                        ItemsSource="{Binding Path=Items}"
                                                        d:DataContext="{Binding Path=Items}"
                                                        ItemTemplate="{StaticResource ResourceKey=ObjectTreeviewNode}"
                                                        IsExpanded="True"/>
                    </TreeView>
            </HierarchicalDataTemplate>

            <!-- I.e. Level-1 Node (i.e. Root nodes) -->
            <HierarchicalDataTemplate x:Key="ObjectStateTemplate" >
                    <TreeView BorderThickness="0">

                            <TreeView.Resources>

                                    <!-- Sub-grouping: Group by object dates (This needs to be nested in this Treeview.Resources) -->
                                    <CollectionViewSource x:Key="ObjectDateCollectionViewSource"
                                                                                Source="{Binding Path=Items}"
                                                                                d:DesignSource="{Binding Path=Items}"
                                                                                > 

                                            <CollectionViewSource.GroupDescriptions>
                                                    <PropertyGroupDescription PropertyName="ObjectDateDisplay"/>
                                            </CollectionViewSource.GroupDescriptions>

                                    </CollectionViewSource>

                                    <!-- [This and all children] Hide the light-grey inactive background -->
                                    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" />

                            </TreeView.Resources>

                            <TreeViewItem Header="{Binding Path=Name}" 
                                                        ItemsSource="{Binding Source={StaticResource ObjectDateCollectionViewSource}, Path=Groups}"
                                                        ItemTemplate="{StaticResource ObjectDateTemplate}"
                                                        IsExpanded="True"/>

                    </TreeView>
            </HierarchicalDataTemplate>
    </ResourceDictionary>

Code-Behind

    using System.Windows.Controls;
    using myproject.app.viewmodels.MainWindow;
    using myproject.lib.enumerations;

    namespace myproject.app.views.MainWindow
    {
            /// <summary>
            /// Interaction logic for ObjectTreeview.xaml
            /// </summary>
            public partial class ObjectTreeview : UserControl
            {
                    public ObjectTreeviewViewModel ObjectTreeviewViewModel { get; private set; } = new ObjectTreeviewViewModel(); // this is a ObservableCollection<ObjectViewModel>

                    public ObjectTreeview()
                    {
                            InitializeComponent();
                    }

                    /// <summary>
                    ///     Load object for an objectStateGroup (a set of ObjectStates) into the collection that backs the treeview.
                    /// </summary>
                    /// <param name="objectStateGroup">The objectStateGroupsEnum to load.</param>
                    public void LoadObjectStateGroup(objectStateGroupsEnum objectStateGroup)
                    {
                            ObjectTreeviewViewModel.LoadobjectStateGroup(objectStateGroup);
                    }
            }
    }

Answer 1

I found a workaround to my problem.

The Issue

The issue was with the inner CollectionViewSource (the one that controlled the middle of 3 nodes). Only the outer CollectionViewSource was showing its node.

The design time binding couldn't use the same Path=Items that the run time was using.

<CollectionViewSource x:Key="ObjectDateCollectionViewSource"
                      Source="{Binding Path=Items}"
                      d:DesignSource="{Binding Path=Items}"> 

                <CollectionViewSource.GroupDescriptions>
                                <PropertyGroupDescription PropertyName="ObjectDateDisplay"/>
                </CollectionViewSource.GroupDescriptions>

</CollectionViewSource>

The Solution

Update the d:DesignSource to load from the XAML example file (the same one we use above) with Source=ObjectTreeviewDesignTimeData.xaml .

    <CollectionViewSource x:Key="ObjectDateCollectionViewSource"
                          Source="{Binding Path=Items}"
                          d:DesignSource="{d:DesignData Source=ObjectTreeviewDesignTimeData.xaml}"> 

            <CollectionViewSource.GroupDescriptions>
                    <PropertyGroupDescription PropertyName="ObjectDateDisplay"/>
            </CollectionViewSource.GroupDescriptions>

    </CollectionViewSource>

After setting the d:DesignSource and re-building, the 3 levels of nodes started appearing at design time. I confirmed that the issue with the design-time binding was with the inner CollectionViewSource.

A Sufficient Workaround

By binding to the same dictionary in the outer and inner CollectionViewSources, redundant data is generated. (The dictionary is loaded multiple times, for each sub-treeview.) However, this is OK, as I'm in the Designer Mode and I simply need placeholder data.

A better solution would be to find a way to get the inner CVS d:DesignerSource="{BETTER_SOLUTION_HERE}" part to work using the same collection as the outer CVS.