|
1 | | -# How to customize tree nodes using data template selector in wpf treeview? |
2 | | -This repository describes how to customize tree nodes using data template selector in wpf treeview |
| 1 | +# How to customize tree nodes using data template selector in WPF TreeView |
| 2 | + |
| 3 | +This repository describes how to customize tree nodes using data template selector in [WPF TreeView](https://www.syncfusion.com/wpf-controls/treeview) (SfTreeView) |
| 4 | + |
| 5 | +The TreeView allows you to customize the appearance of each item with different templates based on specific constraints by using the [ItemTemplateSelector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_ItemTemplateSelector). You can choose a [DataTemplate](https://docs.microsoft.com/en-us/dotnet/api/system.windows.datatemplate?view=netcore-3.1) for each item at runtime based on the value of data-bound property using `ItemTemplateSelector`. |
| 6 | + |
| 7 | +#### XAML |
| 8 | + |
| 9 | +``` xml |
| 10 | +<Window x:Class="NodeWithImageDemo.MainWindow" |
| 11 | + xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| 12 | + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| 13 | + xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
| 14 | + xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
| 15 | + xmlns:local="clr-namespace:NodeWithImageDemo" |
| 16 | + xmlns:syncfusion="http://schemas.syncfusion.com/wpf" |
| 17 | + mc:Ignorable="d"> |
| 18 | + |
| 19 | + <Window.DataContext> |
| 20 | + <local:FileManagerViewModel/> |
| 21 | + </Window.DataContext> |
| 22 | + <Window.Resources> |
| 23 | + <local:ItemTemplateSelector x:Key="itemTemplateSelector"/> |
| 24 | + </Window.Resources> |
| 25 | + <Grid> |
| 26 | + <Grid.RowDefinitions> |
| 27 | + <RowDefinition Height="Auto"/> |
| 28 | + <RowDefinition/> |
| 29 | + </Grid.RowDefinitions> |
| 30 | + |
| 31 | + <syncfusion:SfTreeView x:Name="sfTreeView" |
| 32 | + Grid.Row="1" |
| 33 | + ChildPropertyName="SubFiles" |
| 34 | + FullRowSelect="True" |
| 35 | + ItemTemplateDataContextType="Node" |
| 36 | + ItemsSource="{Binding ImageNodeInfo}" |
| 37 | + ItemTemplateSelector="{StaticResource itemTemplateSelector}" > |
| 38 | + </syncfusion:SfTreeView> |
| 39 | + </Grid> |
| 40 | +</Window> |
| 41 | +``` |
| 42 | + |
| 43 | +#### C# |
| 44 | + |
| 45 | +``` csharp |
| 46 | +class ItemTemplateSelector : DataTemplateSelector |
| 47 | +{ |
| 48 | + public override DataTemplate SelectTemplate(object item, DependencyObject container) |
| 49 | + { |
| 50 | + var treeviewNode = item as TreeViewNode; |
| 51 | + if (treeviewNode == null) |
| 52 | + return null; |
| 53 | + if (treeviewNode.Level == 0) |
| 54 | + return Application.Current.MainWindow.FindResource("RootTemplate") as DataTemplate; |
| 55 | + else |
| 56 | + return Application.Current.MainWindow.FindResource("ChildTemplate") as DataTemplate; |
| 57 | + } |
| 58 | +} |
| 59 | +``` |
0 commit comments