Changing Treeview Template

Treeview is one of the new controls in the toolkit that was released at PDC. Virtualization is not there, but it should not stop from changing the templates. In .net SDK we find sample data for League,Divisions and Teams. it is Hierarchical Data so works nicely with Treeview. when we set the ItemsSource to this data

tv1.ItemsSource = new LeagueList();

and set the ItemTemplates like this

<controls:HierarchicalDataTemplate x:Key=”dtTeam”>
            <TextBlock Text=”{Binding Name}” />
        </controls:HierarchicalDataTemplate>
        <controls:HierarchicalDataTemplate x:Key=”dtDivision”
                                           ItemsSource=”{Binding Path=Teams}”
                                           ItemTemplate=”{StaticResource dtTeam}”>
            <TextBlock Text=”{Binding Name}” />

        </controls:HierarchicalDataTemplate>
        <controls:HierarchicalDataTemplate x:Key=”dtLeague”
                                           ItemsSource=”{Binding Divisions}”
                                           ItemTemplate=”{StaticResource dtDivision}”>
            <TextBlock Text=”{Binding Name}” />
        </controls:HierarchicalDataTemplate>

we get a nice treeview

we can change the template of Treeview and TreeviewItem to make the items are laid out horizontally instead of vertically.

when we change the template and set the Style and ItemContainerStyle properties of the Treeview to new styles we created, Here is what we get

you can download the code here

Advertisements

2 thoughts on “Changing Treeview Template

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s