WPF ViewTree with TreeViewItems of Different Types

[WPF][Sample]WPF ViewTree with TreeViewItems of Different Types

1. WPF ViewTree with TreeViewItems of Different Types
1. What I want to do
2. Problem: Create a List of Views: but views are of different types
3. Classes Hierarchy
4. Create the collection of views with markup
5. Create the collection of views in code behind file
6. Create the templates for displaying each class
8. Initiate the view tree

What I want to do

A View Tree that contains Collection of different types, but I still want to use the binding facility offer by WPF

Problem: Create a List of Views: but views are of different types

Views are of two different types:

• Grid
• Chart

Grid Views have the following properties:

• Caption
• Editable
  
• ShowRowIndicator
  

Chart Views have the following properties:

• Caption
• ChartType

Classes Hierarchy

IView	Base View Interface public interface IView { string Caption { get; set; } }
IGrid	Interface for Grid view public interface IGrid : IView { bool Editable { get; set; } bool ShowRowIndicator { get; set; } }
IChart	Interface for Chart view public interface IChart : IView { string ChartType { get; set; } }
Grid	Grid View class public class Grid : IGrid { #region Implementation of IView public string Caption { get; set; } #endregion #region Implementation of IGrid public bool Editable { get; set; } public bool ShowRowIndicator { get; set; } #endregion }
Chart	Chart View class public class Chart : IChart { #region Implementation of IView public string Caption { get; set; } #endregion #region Implementation of IChart public string ChartType { get; set; } #endregion }
Views	Collection of IView items public class Views : ObservableCollection<IView> { }
ViewCollection	Collection of a certain type of Views (Grid or Chart) public class ViewCollection { public String ViewCollectionName { get; set; } public bool IsSelected { get; set; } public Views Views { get; set; } }
ViewCollectionList	Collection of ViewCollection items public class ViewCollectionList : ObservableCollection<ViewCollection> { }

Create the collection of views with markup

<Window.Resources>

<Classes:ViewCollectionList x:Key="ViewCollectionList">

<Classes:ViewCollection ViewCollectionName="Grid Views" IsSelected="True">

<Classes:ViewCollection.Views>

<Classes:Views>

<Classes:Grid Caption="Grid 1" Editable="True" ShowRowIndicator="True" />

<Classes:Grid Caption="Grid 2" Editable="False" ShowRowIndicator="False" />

<Classes:Grid Caption="Grid 4" Editable="True" ShowRowIndicator="False" />

</Classes:Views>

</Classes:ViewCollection.Views>

</Classes:ViewCollection>

<Classes:ViewCollection ViewCollectionName="Chart Views" IsSelected="False">

<Classes:ViewCollection.Views>

<Classes:Views>

<Classes:Chart Caption="Chart 1" ChartType="Line" />

<Classes:Chart Caption="Chart 4" ChartType="Bar" />

<Classes:Chart Caption="Chart 2" ChartType="Pie" />

</Classes:Views>

</Classes:ViewCollection.Views>

</Classes:ViewCollection>

</Classes:ViewCollectionList>

</Window.Resources>

Create the collection of views in code behind file

var _list = new ViewCollectionList();

var _collection = new ViewCollection

{

ViewCollectionName = "Grid Views",

Views = new Views

{

new Grid

{

Caption = "Grid 1",

Editable = false,

ShowRowIndicator = true

},

new Grid

{

Caption = "Grid 2",

Editable = false,

ShowRowIndicator = false

},

new Grid

{

Caption = "Grid 3",

Editable = true,

ShowRowIndicator = true

}

}

};

_list.Add(_collection);

_collection = new ViewCollection

{

ViewCollectionName = "Chart Views",

Views = new Views

{

new Chart

{

Caption = "Chart 1",

ChartType = "Line"

},

new Chart

{

Caption = "Chart 2",

ChartType = "Bar"

}

}

};

_list.Add(_collection);

_tree.DataContext = _list;

Create the templates for displaying each class

<Window.Resources>

....

<HierarchicalDataTemplate DataType="{x:Type Classes:ViewCollection}"

ItemsSource="{Binding Path=Views}"

>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Path=ViewCollectionName}" FontWeight="Bold"/>

<TextBlock Text=" " />

<Border Background="LightCyan" >

<StackPanel Orientation="Horizontal">

<TextBlock Text="Is selected: " />

<CheckBox IsChecked ="{Binding IsSelected}" />

</StackPanel>

</Border>

</StackPanel>

</HierarchicalDataTemplate>

<DataTemplate DataType="{x:Type Classes:Grid}">

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Path=Caption}" FontWeight="Bold"/>

<TextBlock Text=" Is Editable: " />

<CheckBox IsChecked="{Binding Path=Editable}" />

<TextBlock Text=" Show Row Indicator: " />

<CheckBox IsChecked="{Binding Path=ShowRowIndicator}" />

</StackPanel>

</DataTemplate>

<DataTemplate DataType="{x:Type Classes:Chart}">

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Path=Caption}" FontWeight="Bold"/>

<TextBlock Text=" Chart Type: " />

<TextBlock Text="{Binding Path=ChartType}" Background="LightGreen"/>

</StackPanel>

</DataTemplate>

</Window.Resources>

Initiate the view tree

<DockPanel>

<TreeView DataContext="{StaticResource ViewCollectionList}" x:Name="_tree">

<TreeViewItem ItemsSource="{Binding}" Header="Views" />

</TreeView>

</DockPanel>