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

TemplateSelector/App.config

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+    <startup useLegacyV2RuntimeActivationPolicy="true"> 
+        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/>
+
+    </startup>
+</configuration>

TemplateSelector/App.xaml

@@ -0,0 +1,9 @@
+<Application x:Class="NodeWithImageDemo.App"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:NodeWithImageDemo"
+             StartupUri="MainWindow.xaml">
+    <Application.Resources>
+
+    </Application.Resources>
+</Application>

TemplateSelector/App.xaml.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Configuration;
+using System.Data;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Windows;
+
+namespace NodeWithImageDemo
+{
+    /// <summary>
+    /// Interaction logic for App.xaml
+    /// </summary>
+    public partial class App : Application
+    {
+    }
+}

TemplateSelector/Helper/ItemTemplateSelector.cs

@@ -0,0 +1,25 @@
+using Syncfusion.UI.Xaml.TreeView.Engine;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+
+namespace NodeWithImageDemo
+{
+    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("headerTemplate") as DataTemplate;
+            else
+                return Application.Current.MainWindow.FindResource("descriptionTemplate") as DataTemplate;
+        }
+    }
+}

TemplateSelector/MainWindow.xaml

@@ -0,0 +1,82 @@
+<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"
+        Title="TemplateSelector">
+
+    <Window.DataContext>
+        <local:FileManagerViewModel/>
+    </Window.DataContext>
+    <Window.Resources>
+        <DataTemplate x:Key="descriptionTemplate">
+            <Grid x:Name="grid">
+                <Grid Grid.Row="0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="20" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <Grid>
+                        <Image Source="{Binding Content.ImageIcon}"
+                                               VerticalAlignment="Center"
+                                               HorizontalAlignment="Center"
+                                               Height="16"
+                                               Width="16"/>
+                    </Grid>
+                    <Grid Grid.Column="1"
+                                              Margin="1,0,0,0"
+                                              VerticalAlignment="Center">
+                        <Label Content="{Binding Content.ItemName}"
+                                                   Foreground="Black"
+                                                   FontSize="12"
+                                                   VerticalContentAlignment="Center" />
+                    </Grid>
+                </Grid>
+            </Grid>
+        </DataTemplate>
+        <DataTemplate x:Key="headerTemplate">
+            <Grid x:Name="grid">
+                <Grid Grid.Row="0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="20" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <Grid>
+                        <Image Source="{Binding Content.ImageIcon}"
+                                               VerticalAlignment="Center"
+                                               HorizontalAlignment="Center"
+                                               Height="16"
+                                               Width="16"/>
+                    </Grid>
+                    <Grid Grid.Column="1"
+                                              Margin="1,0,0,0"
+                                              VerticalAlignment="Center">
+                        <Label Content="{Binding Content.ItemName}"
+                                                   Foreground="Teal"
+                                                   FontSize="14"
+                                                   VerticalContentAlignment="Center" />
+                    </Grid>
+                </Grid>
+            </Grid>
+        </DataTemplate>
+        <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}" 
+                               ItemHeight="28"  ExpanderWidth="20" IsAnimationEnabled="True">
+        </syncfusion:SfTreeView>
+    </Grid>
+</Window>

TemplateSelector/MainWindow.xaml.cs

@@ -0,0 +1,15 @@
+using System.Windows;
+
+namespace NodeWithImageDemo
+{
+    /// <summary>
+    /// Interaction logic for MainWindow.xaml
+    /// </summary>
+    public partial class MainWindow : Window
+    {
+        public MainWindow()
+        {
+            InitializeComponent();
+        }
+    }
+}

TemplateSelector/Model/FileManager.cs

@@ -0,0 +1,195 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Media;
+
+namespace NodeWithImageDemo
+{
+    public class FileManager : INotifyPropertyChanged
+    {
+        private string fileName;
+        private ImageSource imageIcon;
+        private ObservableCollection<FileManager> subFiles;
+
+        public ObservableCollection<FileManager> SubFiles
+        {
+            get { return subFiles; }
+            set
+            {
+                subFiles = value;
+                RaisedOnPropertyChanged("SubFiles");
+            }
+        }
+
+        public string ItemName
+        {
+            get { return fileName; }
+            set
+            {
+                fileName = value;
+                RaisedOnPropertyChanged("FolderName");
+            }
+        }
+
+        public ImageSource ImageIcon
+        {
+            get { return imageIcon; }
+            set
+            {
+                imageIcon = value;
+                RaisedOnPropertyChanged("ImageIcon");
+            }
+        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        public void RaisedOnPropertyChanged(string _PropertyName)
+        {
+            if (PropertyChanged != null)
+            {
+                PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
+            }
+        }
+    }
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//        private string fileName;
+//        private ImageSource imageIcon;
+//        private ObservableCollection<FileManager> subFiles;
+
+//        public ObservableCollection<FileManager> SubFiles
+//        {
+//            get { return subFiles; }
+//            set
+//            {
+//                subFiles = value;
+//                RaisedOnPropertyChanged("SubFiles");
+//            }
+//        }
+
+//        public string ItemName
+//        {
+//            get { return fileName; }
+//            set
+//            {
+//                fileName = value;
+//                RaisedOnPropertyChanged("ItemName");
+//            }
+//        }
+
+//        public ImageSource ImageIcon
+//        {
+//            get { return imageIcon; }
+//            set
+//            {
+//                imageIcon = value;
+//                RaisedOnPropertyChanged("ImageIcon");
+//            }
+//        }
+
+//        public event PropertyChangedEventHandler PropertyChanged;
+
+//        public void RaisedOnPropertyChanged(string _PropertyName)
+//        {
+//            if (PropertyChanged != null)
+//            {
+//                PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
+//            }
+//        }
+//    }
+//}