ComplexDataTemplates Wiki & Documentation Rss Feed

Updated Wiki: Home

aarondh — Tue, 02 Dec 2008 22:19:24 GMT

Project Description
WPF/Silverlight enhancements that enable the use of standard HierarchicalDataTemplates and DataTemplates to display complex data hierarchies that contain multiple ItemsSources. DataTemplate search criteria is expanded to support find by item interface, and/or base type.

Overview

The ComplexDataTemplates control library was designed to enhance how the Windows Presentation Foundation uses DataTemplates and HierarchicalDataTemplates to display hierarchical data in a TreeView or other similar controls. If you are tearing your hair out trying to get data templates and tree views to do something more than displaying the simplest of data hierarchies then this library is for you! Display TreeView nodes that contain multiple collections without having to rebuild your source data classes.

The following is an example of a TreeView control using this control library and standard xaml to display a multi-level dataset with multiple grouping nodes at several levels:

The above data is based on the following sample type structure:

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

The ComplexGroupDataTemplateSelector enhances how DataTemplates are found in your application. In addition to being able to specify data templates for IEnumerable collections, the ComplexGroupDataTemplateSelector will also find a template based on a interface implemented by the data item or a base type found in the data item hierachy. Though data templates found in this manner are a little more expensive to perform than just a simple Type lookup, the ComplexGroupDataTemplateSelector caches it's resolutions to help reduce the overall performance impact. The template selector can be tuned for specify needs using a few properties. For more information please look here: ComplexGroupDataTemplateSelector.

One of the coolest features that the ComplexGroupDataTemplateSelector gives you is the ability to select a DataTemplate for an interface implemented by the data item or any base type of the data item. In the example shown above, all of the leaf nodes of the tree are displayed using one DataTemplate markup with it's DataType property set to DataType="{x:Type local:IItem}", since IItem is the interface implemented by all of the data items in the example, any data item not explicitly templated will get the default template for the IItem interface.

The following example shows were the ComplexGroupDataTemplateSelector can be used in your xaml:

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

In order to support the use of multiple ItemsSource bindings we use a combination of the built-in type MultiBinding and the ComplexGroupConverter type found in this library. Note also that for this to work correctly the ItemControl must also use the ComplexGroupDataTemplateSelector.

In the example below you will find two HierarchicalDataTemplates that make use of MultiBinding and the ComplexGroupConverter. The first HierarchicalDataTemplate for DataType="{x:Type local:ClassA}" binds to two collections in ClassA "ListOfClassB" and "ListOfClassC". Since no ConverterParameter is defined the next level templates are found using the keys: "IEnumerable[ClassB]" and "IEnumerable[ClassC]" which are automatically generated by the ComplexGroupDataTemplateSelector. For more control of the templates used on the next level and to support more than one collection of the same element type, the next HierarchicalDataTemplate for DataType="{x:Type local:ClassC}" also use a ConverterParameter to specific the names of the DataTemplates to be used on the next level. So support for the "Pickles" collection binding will look for a DataTemplate with x:Key="Pickles-Template". Support for the "IceCream" collection binding will look for a DataTemplate with x:Key="IceCream-Template"

For more information please look here: ComplexGroupConverter

The following example shows were the ComplexGroupConverter can be used in your xaml:

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files

Updated Wiki: Home

aarondh — Tue, 02 Dec 2008 21:51:31 GMT

Overview

The ComplexDataTemplates control library was designed to enhance how the Windows Presentation Foundation uses DataTemplates and HierarchicalDataTemplates to display hierarchical data in a TreeView or other similar controls. If you are tearing your hair out trying to get data templates and tree views to do something more than displaying the simplest of data hierarchies then this library is for you!

The following is an example of a TreeView control using this control library and standard xaml to display a multi-level dataset with multiple grouping nodes at several levels:

The above data is based on the following sample type structure:

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files

Updated Wiki: Home

aarondh — Tue, 02 Dec 2008 21:50:49 GMT

Overview

The ComplexDataTemplates control library was designed to enhance how the Windows Presentation Foundation uses DataTemplates and HierarchicalDataTemplates to display hierarchical data in a TreeView or other similar controls. If you are tearing your hair out trying to get data templates and tree views to do something more than displaying the simplest of data hierarchies then this library is for you!

The following is an example of a TreeView control using this control library and standard xaml to display a multi-level dataset with multiple grouping nodes at several levels:

The above data is based on the following sample type structure:

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files

Updated Wiki: Home

aarondh — Mon, 01 Dec 2008 16:52:34 GMT

Project Description
The ComplexDataTemplates project cointains helper classes for enabling the use of HierarchicalDataTemplates to represent more complex data hierarchies that contain multiple ItemsSources. DataTemplate search criteria is expanded to support find by interface and/or base type.

Overview

The ComplexDataTemplates control library was designed to enhance how the Windows Presentation Foundation uses DataTemplates and HierarchicalDataTemplates to display hierarchical data in a TreeView or other similar controls. If you are tearing your hair out trying to get data templates and tree views to do something more than displaying the simplest of data hierarchies then this library is for you!

The following is an example of a TreeView control using this control library and standard xaml to display a multi-level dataset with multiple grouping nodes at several levels:

The above data is based on the following sample type structure:

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files

Updated Wiki: ComplexGroupConverter

aarondh — Mon, 01 Dec 2008 03:18:07 GMT

ComplexGroupConverter

The ComplexGroupConverter works in conjunction with the MultiBinding markup to allow you to specify a binding to multiple collections, each collection is treated as a unique data item on the next level of the hierarchy, allowing you to specify HierarchicalDataTemplate markup to format a unique look for each collection.

The following is an example of the use of the ComplexGroupConverter:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates">
    <Window.Resources>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
...

In the above example, the next level of the hierarchy could be formated with the following HeirarchicalDataTemplate markup:

...
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassC]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Cs</TextBlock>
        </HierarchicalDataTemplate>
...

Note that the resource keys used are create by the ComplexGroupDataTemplateSelector using the string format expression from the GroupDataTemplateFormat property.

If you would like more control of the resource keys used on the next level you can specify the key names in the ConverterParameter property. This is a comma delimited list of resource key names. There should be one resource key name specified for each Binding in the MultiBinding markup.
For example:

...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
...

In the above example, the next level of the hierarchy could be formated with the following HeiarchicalDataTemplate markup:

...
         <HierarchicalDataTemplate x:Key="Pickles-Template" ItemsSource="{Binding Path=.}">
            <TextBlock>Pickles</TextBlock>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IceCream-Template" ItemsSource="{Binding Path=.}">
            <TextBlock>Ice Cream</TextBlock>
        </HierarchicalDataTemplate>
...

Updated Wiki: ComplexGroupDataTemplateSelector

aarondh — Mon, 01 Dec 2008 03:16:53 GMT

ComplexGroupDataTemplateSelector

DiscoveryMethod Property

The default setting for the DiscoveryMethod property is "Key, Type, Interface, Hierarchy"
The DiscoveryMethod is a enum flag property in which the following flags can be set:

Key Flag
Find the DataTemplate by creating a resource key using the string format expression found in TemplateKeyFormat or GroupTemplateKeyFormat.

Type Flag
Find the DataTemplate by looking up the item Type for a template with a matching DataType property. This is the default way the DataTempates are found without using the ComplexGroupDataTemplateSelector.

Interface Flag
Find the DataTemplate by looking up each interface implemented by the item type for a template with a matching DataType property.

Hierarchy Flag
Scan the item types type hierarchy to find the DataTemplate based on it's DataType property.

GeneralToSpecific Flag

FullTypeName Flag
Use the full type name when creating a resource key using the string format of either TemplateKeyFormat or GroupTemplateKeyFormat
If not set the unqualified type name will be used. The default is to use the unqualified type name.

For example:

When not set, the resource key created for type DaisleyHarrison.WPF.ComplexDataTemplates.UnitTest.ClassA would be data-template[ClassA]

When FullTypeName is set, the resource key created for type DaisleyHarrison.WPF.ComplexDataTemplates.UnitTest.ClassA would be data-template[DaisleyHarrison.WPF.ComplexDataTemplates.UnitTest.ClassA]

NoCache Flag
Does not cache the result of the resource search. Fources the DataTemplate to be looked up for each item. The default is to cache all DataTemplate lookups so that a DataTemplate is found only once for each unique item Type. This flag is used primarily for debugging.
Note: using this flag can impact performance.

TemplateKeyFormat Property

The TemplateKeyFormat property is the string format expression used to create a resource key for non-collection items. That is all items that do not implement the IEnumerable interface.

The default value for the TemplateKeyFormat property is "data-template[{0}]".

GroupTemplateKeyFormat Property

The GroupTemplateKeyFormat property is the string format expression used to create a resource key for all collection items. That is all items that implement the IEnumerable interface.

The default value for the TemplateKeyFormat property is "IEnumerable[{0}]".

Updated Wiki: Home

aarondh — Mon, 01 Dec 2008 03:15:38 GMT

Project Description
The ComplexDataTemplates project cointains helper classes for enabling the use of HierarchicalDataTemplates to represent more complex data hierarchie that contain multiple ItemsSources. DataTemplate search criteria is expanded to support find by interface and/or base type.

Overview

The ComplexDataTemplates control library was designed to enhance how the Windows Presentation Foundation uses DataTemplates and HierarchicalDataTemplates to display hierarchical data in a TreeView or other similar controls. If you are tearing your hair out trying to get a TreeView to some more that the simplest of data hierarchies then this library is for you!

The following is an example of a TreeView control using this control library and standard xaml to display a multi-level dataset with multiple grouping nodes at several levels:

The above data is based on the following sample type structure:

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files

Updated Wiki: Home

aarondh — Mon, 01 Dec 2008 03:11:47 GMT

Project Description
The ComplexDataTemplates project cointains useful helper classes for enabling use of HierachicalDataTemplates to represent more complex data hierachies that contain multiple ItemsSources. DataTemplate search criteria is expanded to support find by interface and/or base type.

Overview

The ComplexDataTemplates control library was designed to enhance how the Windows Presentation Foundation uses DataTemplates and HierachicalDataTemplates to display hierachical data in a TreeView or other similar controls. If you are tearing your hair out trying to get a TreeView to some more that the simplest of data hierarchies then this library is for you!

The following is an example of a TreeView control using this control library and standard xaml to display a multi-level dataset with multiple grouping nodes at several levels:

The above data is based on the following sample type structure:

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

In order to support the use of multiple ItemsSource bindings we use a combination of the built-in type MultiBinding and the ComplexGroupConverter type found in this library. Note also that for this to work correctly the ItemControl must also use the ComplexGroupDataTemplateSelector.

In the example below you will find two HierarchicalDataTemplates that make use of MultiBinding and the ComplexGroupConverter. The first HierachicalDataTemplate for DataType="{x:Type local:ClassA}" binds to two collections in ClassA "ListOfClassB" and "ListOfClassC". Since no ConverterParameter is defined the next level templates are found using the keys: "IEnumerable[ClassB]" and "IEnumerable[ClassC]" which are automatically generated by the ComplexGroupDataTemplateSelector. For more control of the templates used on the next level and to support more than one collection of the same element type, the next HierachicalDataTemplate for DataType="{x:Type local:ClassC}" also use a ConverterParameter to specific the names of the DataTemplates to be used on the next level. So support for the "Pickles" collection binding will look for a DataTemplate with x:Key="Pickles-Template". Support for the "IceCream" collection binding will look for a DataTemplate with x:Key="IceCream-Template"

For more information please look here: ComplexGroupConverter

The following example shows were the ComplexGroupConverter can be used in your xaml:

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files

Updated Wiki: Home

aarondh — Mon, 01 Dec 2008 03:10:06 GMT

Overview

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

The ComplexGroupDataTemplateSelector enhances how DataTemplates are found in your application. In addition to being able to specify data templates for IEnumerable collections, the ComplexGroupDataTemplateSelector will also find a template based on a interface implemented by the data item or a base type found in the data item hierachy. Though data templates found in this manner are a little more expensive to perform than just a simple Type lookup, the ComplexGroupDataTemplateSelector caches it's resolutions to help reduce the overall performance impact. The template selector can be tuned for specify needs using a few properties. For more information please look here: ComplexGroupDataTemplateSelector.

One of the coolest features that the ComplexGroupDataTemplateSelector gives you is the ability to select a DataTemplate on an Interface implemented by the data item or any base type of the data item. In the example shown above, all of the leaf nodes of the tree are displayed using one DataTemplate markup with it's DataType property set to DataType="{x:Type local:IItem}", since IItem is the interface implemented by all of the data items in the example, any data item not explicitly templated will get the default template for the IItem interface.

The following example shows were the ComplexGroupDataTemplateSelector can be used in your xaml:

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

In order to support the use of multiple ItemsSource bindings we use a combination of the built-in type MultiBinding and the ComplexGroupConverter type found in this library. Note also that for this to work correctly the ItemControl must also use the ComplexGroupDataTemplateSelector.

In the example below you will find two HierarchicalDataTemplates that make use of MultiBinding and the ComplexGroupConverter. The first HierachicalDataTemplate for DataType="{x:Type local:ClassA}" binds to two collections in ClassA "ListOfClassB" and "ListOfClassC". Since no ConverterParameter is defined the next level templates are found using the keys: "IEnumerable[ClassB]" and "IEnumerable[ClassC]" which are automatically generated by the ComplexGroupDataTemplateSelector. For more control of the templates used on the next level and to support more than one collection of the same element type, the next HierachicalDataTemplate for DataType="{x:Type local:ClassC}" also use a ConverterParameter to specific the names of the DataTemplates to be used on the next level. So support for the "Pickles" collection binding will look for a DataTemplate with x:Key="Pickles-Template". Support for the "IceCream" collection binding will look for a DataTemplate with x:Key="IceCream-Template"

For more information please look here: ComplexGroupConverter

The following example shows were the ComplexGroupConverter can be used in your xaml:

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files

Updated Wiki: Home

aarondh — Mon, 01 Dec 2008 03:03:04 GMT

Overview

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

In order to support the use of multiple ItemsSource bindings we use a combination of the built-in type MultiBinding and the ComplexGroupConverter type found in this library. Note also that for this to work correctly the ItemControl must also use the ComplexGroupDataTemplateSelector.

In the example below you will find two HierarchicalDataTemplates that make use of MultiBinding and the ComplexGroupConverter. The first HierachicalDataTemplate for DataType="{x:Type local:ClassA}" binds to two collections in ClassA "ListOfClassB" and "ListOfClassC". Since no ConverterParameter is defined the next level templates are found using the keys: "IEnumerable[ClassB]" and "IEnumerable[ClassC]" which are automatically generated by the ComplexGroupDataTemplateSelector. For more control of the templates used on the next level and to support more than one collection of the same element type, the next HierachicalDataTemplate for DataType="{x:Type local:ClassC}" also use a ConverterParameter to specific the names of the DataTemplates to be used on the next level. So support for the "Pickles" collection binding will look for a DataTemplate with x:Key="Pickles-Template". Support for the "IceCream" collection binding will look for a DataTemplate with x:Key="IceCream-Template"

For more information please look here: ComplexGroupConverter

The following example shows were the ComplexGroupConverter can be used in your xaml:

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files

Updated Wiki: Home

aarondh — Mon, 01 Dec 2008 03:02:44 GMT

Overview

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

In order to support the use of multiple ItemsSource bindings we use a combination of the built-in type MultiBinding and the ComplexGroupConverter type found in this library. Note also that for this to work correctly the ItemControl must also use the ComplexGroupDataTemplateSelector.

In the example below you will find two HierarchicalDataTemplates that make use of MultiBinding and the ComplexGroupConverter. The first HierachicalDataTemplate for DataType="{x:Type local:ClassA}" binds to two collections in ClassA "ListOfClassB" and "ListOfClassC". Since no ConverterParameter is defined the next level templates are found using the keys: "IEnumerable[ClassB]" and "IEnumerable[ClassC]" which are automatically generated by the ComplexGroupDataTemplateSelector. For more control of the templates used on the next level and to support more than one collection of the same element type, the next HierachicalDataTemplate for DataType="{x:Type local:ClassC}" also use a ConverterParameter to specific the names of the DataTemplates to be used on the next level. So support for the "Pickles" collection binding will look for a DataTemplate with x:Key="Pickles-Template". Support for the "IceCream" collection binding will look for a DataTemplate with x:Key="IceCream-Template"

For more information please look here: ComplexGroupConverter

The following example shows were the ComplexGroupConverter can be used in your xaml:

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files

Updated Wiki: Home

aarondh — Mon, 01 Dec 2008 03:01:11 GMT

Overview

The ComplexDataTemplates control library was designed to enhance how the Windows Presentation Foundation uses DataTemplates and HierachicalDataTemplates to display hierachical data in a TreeView or other similar controls.

The following is an example of a TreeView control using this control library and standard xaml to display a multi-level dataset with multiple grouping nodes at several levels:

The above data is based on the following sample type structure:

    public interface IItem
    {
        string Label { get; }
        string ToolTip { get; }
    }

    public class Item : IItem
    {
        public string Label { get; set; }
        public string ToolTip { get; set; }
    }

    public class ClassA : Item
    {
        public List<ClassB> ListOfClassB { get; private set; }
        public List<ClassC> ListOfClassC { get; private set; }
        public ClassA()
        {
            this.ListOfClassB = new List<ClassB>();
            this.ListOfClassC = new List<ClassC>();
        }
    }

    public class ClassB : Item
    {
    }

    public class ClassC : Item
    {
        public List<Item> Pickles { get; private set; }
        public List<Item> IceCream { get; private set; }
        public ClassC()
        {
            this.Pickles = new List<Item>();
            this.IceCream = new List<Item>();
        }
    }

ComplexGroupDataTemplateSelector

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

ComplexGroupConverter

In order to support the use of multiple ItemsSource bindings we use a combination of the built-in type MultiBinding and the ComplexGroupConverter type found in this library. Note also that for this to work correctly the ItemControl must also use the ComplexGroupDataTemplateSelector.

In the example below you will find two HierarchicalDataTemplates that make use of MultiBinding and the ComplexGroupConverter. The first HierachicalDataTemplate for DataType="{x:Type local:ClassA}" binds to two collections in ClassA "ListOfClassB" and "ListOfClassC". Since no ConverterParameter is defined the next level templates are found using the keys: "IEnumerable[ClassB]" and "IEnumerable[ClassC]" which are automatically generated by the ComplexGroupDataTemplateSelector. For more control of the templates used on the next level and to support more than one collection of the same element type, the next HierachicalDataTemplate for DataType="{x:Type local:ClassC}" also use a ConverterParameter to specific the names of the DataTemplates to be used on the next level. So support for the "Pickles" collection binding will look for a DataTemplate with x:Key="Pickles-Template". Support for the "IceCream" collection binding will look for a DataTemplate with x:Key="IceCream-Template"

For more information please look here: ComplexGroupConverter

The following example shows were the ComplexGroupConverter can be used in your xaml:

<Window x:Class="ComplexDataTemplates.UnitTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ComplexDataTemplates.UnitTest"
    xmlns:complex="clr-namespace:DaisleyHarrison.WPF.ComplexDataTemplates;assembly=ComplexDataTemplates"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <complex:ComplexGroupDataTemplateSelector x:Key="complex-group-data-template-selector"/>
        <complex:ComplexGroupConverter x:Key="complex-group-converter"/>
        <HierarchicalDataTemplate DataType="{x:Type local:ClassA}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}">
                    <Binding Path="ListOfClassB"/>
                    <Binding Path="ListOfClassC"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classA.jpg" VerticalAlignment="Center"  Margin="0,5,0,5"/>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}" VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate x:Key="IEnumerable[ClassB]" ItemsSource="{Binding Path=.}">
            <TextBlock>List of Class Bs</TextBlock>
        </HierarchicalDataTemplate>
         ...
        <HierarchicalDataTemplate DataType="{x:Type local:ClassC}">
            <HierarchicalDataTemplate.ItemsSource>
                <MultiBinding Converter="{StaticResource complex-group-converter}" ConverterParameter="Pickles-Template,IceCream-Template">
                    <Binding Path="Pickles"/>
                    <Binding Path="IceCream"/>
                </MultiBinding>
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">
                <Image Source="Images/classC.jpg" VerticalAlignment="Center" Margin="0,5,0,5"/>
                <TextBlock  VerticalAlignment="Center"  Margin="5,0,0,0">Class C:</TextBlock>
                <TextBlock Text="{Binding Path=Label}" ToolTip="{Binding Path=ToolTip}"  VerticalAlignment="Center"  Margin="5,0,0,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        ...
    <Window.Resources>
    <Grid>
        <TreeView x:Name="testTreeView" ItemTemplateSelector="{StaticResource complex-group-data-template-selector}">
            
        </TreeView>
    </Grid>
</Window>

A complete working example is available in the downloadable source that can be found here: Released Files