Skip to content

SyncfusionExamples/How-to-customize-tree-nodes-using-data-template-selector-in-wpf-treeview

Repository files navigation

How to Customize Tree Nodes Using Data Template Selector in WPF TreeView?

This repository describes how to customize tree nodes using data template selector in WPF TreeView (SfTreeView).

The TreeView allows you to customize the appearance of each item with different templates based on specific constraints by using the ItemTemplateSelector. You can choose a DataTemplate for each item at runtime based on the value of data-bound property using ItemTemplateSelector.

XAML

<Window x:Class="NodeWithImageDemo.MainWindow"
        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"
        xmlns:local="clr-namespace:NodeWithImageDemo"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        mc:Ignorable="d">

    <Window.DataContext>
        <local:FileManagerViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <local:ItemTemplateSelector x:Key="itemTemplateSelector"/>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <syncfusion:SfTreeView x:Name="sfTreeView" 
		                       Grid.Row="1"
                               ChildPropertyName="SubFiles"
                               FullRowSelect="True"
                               ItemTemplateDataContextType="Node"
                               ItemsSource="{Binding ImageNodeInfo}" 
							   ItemTemplateSelector="{StaticResource itemTemplateSelector}" >
        </syncfusion:SfTreeView>
    </Grid>
</Window>

C#

class ItemTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var treeviewNode = item as TreeViewNode;
        if (treeviewNode == null)
            return null;
        if (treeviewNode.Level == 0)
            return Application.Current.MainWindow.FindResource("RootTemplate") as DataTemplate;
        else
            return Application.Current.MainWindow.FindResource("ChildTemplate") as DataTemplate;
    }
}

Customizing the appreance of the tree nodes using DataTemplateSelector

About

This repository describes how to customize tree nodes using data template selector in wpf treeview

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 5

Languages