Skip to content

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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

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

 
 
 

Contributors

Languages