Silverlight vs WPF - Treeview with HierarchialDataTemplate

So, the following is easy enough in WPF, but how would you do it in Silverlight?

Please note that the trick here is to display both Groups, and Entries on the same level. Additonally you dont know how deep the entries are nested, they might be on the first, or the nth level. This is hard in Silverlight because you lack the DataType="{x:Type local:Group}" property in the H开发者_JS百科.DataTemplate (or any DataTemplate). Building my own custom DataTempalteSelector also didnt work, because the Hierarchial ItemsSource gets lost. (Which just gave me a new idea which I will investigate shortly)

Example:

Group1
--Entry
--Entry
Group2
--Group4
----Group1
------Entry
------Entry
----Entry
----Entry
--Entry
--Entry
Group3
--Entry
--Entry

Your Classes:

public class Entry
{
    public int Key { get; set; }
    public string Name { get; set; }
}

public class Group
{
    public int Key { get; set; }
    public string Name { get; set; }

    public IList<Group> SubGroups { get; set; }
    public IList<Entry> Entries { get; set; }
}

Your xaml:

   <TreeView Name="GroupView" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding}">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:Group}" ItemsSource={Binding Items}">
                <TextBlock Text="{Binding Path=Name}" />
            </HierarchicalDataTemplate>
            <DataTemplate DataType="{x:Type local:Entry}" >
                <TextBlock Text="{Binding Path=Name}" />
            </DataTemplate>
        </TreeView.Resources>
    </TreeView>

The TreeView control from the Silverlight toolkit supports hierarchical data templates.

Check out this article for sample usage, but it looks identical to me to the WPF built in one.

You can download the Silverlight toolkit here.

Here is an example of using the HierarchicalDataTemplate with a HeaderedItemsControl in Silverlight (Songhay.Silverlight.BiggestBox.Views.ClientView.xaml):

<UserControl x:Class="Songhay.Silverlight.BiggestBox.Views.ClientView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
    xmlns:sdk="clr-namespace:System.Windows;assembly=System.Windows.Controls"
    xmlns:sdkctrls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
    xmlns:v="clr-namespace:Songhay.Silverlight.BiggestBox.Views"
    xmlns:m="clr-namespace:Songhay.Silverlight.BiggestBox.ViewModels">
    <UserControl.Resources>

        <Style x:Key="StackPanelRoot" TargetType="StackPanel">
            <Setter Property="Background" Value="Seashell" />
            <Setter Property="Height" Value="598" />
            <Setter Property="Width" Value="1024" />
        </Style>

        <Style x:Key="GridRoot" TargetType="Grid">
            <Setter Property="Height" Value="570" />
        </Style>

        <Style x:Key="ClientGridSplitter" TargetType="sdkctrls:GridSplitter">
            <Setter Property="Background" Value="#FFE0EEE0" />
            <Setter Property="Height" Value="8" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
        </Style>

        <m:ClientViewModel x:Key="ClientViewModelDataSource" d:IsDataSource="True"/>

        <Style TargetType="sdkctrls:HeaderedItemsControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="sdkctrls:HeaderedItemsControl">
                        <StackPanel>
                            <ItemsPresenter Margin="10,0,0,0" />
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ScrollViewerIndexItems" TargetType="ScrollViewer">
            <Setter Property="Margin" Value="10" />
            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
        </Style>

        <Style x:Key="StackPanelIndexItems" TargetType="StackPanel">
            <Setter Property="Background" Value="#ff9" />
            <Setter Property="Orientation" Value="Horizontal" />
        </Style>

    </UserControl.Resources>

    <UserControl.DataContext>
        <Binding Source="{StaticResource ClientViewModelDataSource}"/>
    </UserControl.DataContext>

    <Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center">
        <StackPanel x:Name="RootPanel" Style="{StaticResource StackPanelRoot}">
            <Grid Style="{StaticResource GridRoot}">
                <Grid.RowDefinitions>
                    <RowDefinition MinHeight="128" MaxHeight="360" Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="1.5*" />
                </Grid.RowDefinitions>
                <v:HeaderView Grid.Row="0" />
                <sdkctrls:GridSplitter Grid.Row="1" Style="{StaticResource ClientGridSplitter}" />
                <StackPanel Grid.Row="2"
                    Orientation="Horizontal"
                    Style="{StaticResource StackPanelIndexItems}">
                    <ScrollViewer Style="{StaticResource ScrollViewerIndexItems}">
                        <sdkctrls:HeaderedItemsControl
                            Header="{Binding IndexTitle}"
                            ItemsSource="{Binding Outlines}">
                            <sdkctrls:HeaderedItemsControl.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock FontSize="24" FontWeight="Bold" Text="{Binding}" />
                                </DataTemplate>
                            </sdkctrls:HeaderedItemsControl.HeaderTemplate>
                            <sdkctrls:HeaderedItemsControl.ItemTemplate>
                                <sdk:HierarchicalDataTemplate>
                                    <StackPanel>
                                        <TextBlock FontSize="12" FontWeight="Bold" Margin="0,10,0,0" Text="{Binding Text}" />
                                        <sdkctrls:HeaderedItemsControl ItemsSource="{Binding Outlines}" Margin="10,0,10,0">
                                            <sdkctrls:HeaderedItemsControl.ItemTemplate>
                                                <sdk:HierarchicalDataTemplate>
                                                    <HyperlinkButton
                                                        ClickMode="Press"
                                                        Command="{Binding IndexItemCommand, Source={StaticResource ClientViewModelDataSource}}"
                                                        CommandParameter="{Binding Url}"
                                                        FontSize="12">
                                                        <HyperlinkButton.Content>
                                                            <TextBlock Text="{Binding Text}" />
                                                        </HyperlinkButton.Content>
                                                    </HyperlinkButton>
                                                </sdk:HierarchicalDataTemplate>
                                            </sdkctrls:HeaderedItemsControl.ItemTemplate>
                                        </sdkctrls:HeaderedItemsControl>
                                    </StackPanel>
                                </sdk:HierarchicalDataTemplate>
                            </sdkctrls:HeaderedItemsControl.ItemTemplate>
                        </sdkctrls:HeaderedItemsControl>
                    </ScrollViewer>
                    <navigation:Frame x:Name="IndexFrame" Width="685">
                    </navigation:Frame>
                </StackPanel>
            </Grid>
            <v:FooterView Height="30" />
        </StackPanel>
    </Border>
</UserControl>