Appearance in WPF TreeView
18 Nov 201821 minutes to read
This section explains the appearance customization options available in the WPF TreeView control.
ItemTemplate
The WPF TreeView allows you to customize the appearance of content view and expander view by setting the ItemTemplate and ExpanderTemplate properties.
<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>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<syncfusion:SfTreeView x:Name="sfTreeView" Grid.Row="1"
ChildPropertyName="SubFiles"
FullRowSelect="True"
ItemsSource="{Binding ImageNodeInfo}" >
<syncfusion:SfTreeView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid>
<Image Source="{Binding ImageIcon}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="16"
Width="16"/>
</Grid>
<Grid Grid.Column="1"
Margin="1,0,0,0"
VerticalAlignment="Center">
<Label Content="{Binding ItemName}"
Foreground="Black"
FontSize="11"
VerticalContentAlignment="Center" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
</syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>
</Grid>
</Window>BindingContext for ItemTemplate
By default, the binding context of TreeViewItem will be the data model object for Bound Mode and TreeViewNode for Unbound Mode.
For Bound Mode, you can change the binding context of the WPF TreeView items by using the ItemTemplateDataContextType property.
<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>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center"
TextWrapping="Wrap"
Padding="5,0,0,0"
FontSize="14"
Margin="5,5,5,20">
<Run Text="This sample demonstrates the default functionalities to include images in SfTreeView."/>
</TextBlock>
<syncfusion:SfTreeView x:Name="sfTreeView" Grid.Row="1"
ChildPropertyName="SubFiles"
FullRowSelect="True"
ItemTemplateDataContextType="Node"
ItemsSource="{Binding ImageNodeInfo}" >
<syncfusion:SfTreeView.ItemTemplate>
<DataTemplate>
<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="11"
VerticalContentAlignment="Center" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
</syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>
</Grid>
</Window>ItemTemplate Selector
The WPF 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.
<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>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;
}
}
View sample in GitHub
Indentation
The WPF TreeView allows you to customize the indent spacing of items by setting the Indentation property. The default value of this property is 20. This property can be customized at runtime.
<Syncfusion:SfTreeView x:Name="sfTreeView" Indentation="40" />SfTreeView sfTreeView = new SfTreeView();
sfTreeView.Indentation = 40;ExpanderWidth
The WPF TreeView allows customizing the width of expander view by setting the ExpanderWidth property. The default value of this property is 20. This property can be customized at runtime.
<Syncfusion:SfTreeView x:Name="sfTreeView" ExpanderWidth="40" />SfTreeView sfTreeView = new SfTreeView();
sfTreeView.ExpanderWidth = "40";ExpanderPosition
The WPF TreeView allows you to change the position of the expander view by setting the ExpanderPosition property. The default value is Start. The property has the following values:
-
Start— Displays the expander view at the start position. -
End— Displays the expander view at the end position.
<Syncfusion:SfTreeView x:Name="sfTreeView" ExpanderPosition="End">SfTreeView sfTreeView = new SfTreeView();
sfTreeView.ExpanderPosition = ExpanderPosition.End;Level based styling
The WPF TreeView allows you to customize the style of TreeViewItem based on different levels by using IValueConverter.
<Window.Resources>
<local:FontAttributeConverter x:Key="FontAttributeConverter"/>
</Window.Resources>
<Window.DataContext>
<local:MailFolderViewModel x:Name="viewModel"/>
</Window.DataContext>
<Grid>
<Syncfusion:SfTreeView HorizontalAlignment="Left" ItemTemplateDataContextType="Node" ItemsSource="{Binding Folders}" ChildPropertyName="SubFolder" >
<Syncfusion:SfTreeView.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Content.FolderName}" FontWeight="{Binding Level, Converter={StaticResource FontAttributeConverter}}"
FontSize="14"/>
</DataTemplate>
</Syncfusion:SfTreeView.ItemTemplate>
</Syncfusion:SfTreeView>
</Grid>public class FontAttributeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var level = (int)value;
return level == 0 ? FontWeights.Bold : FontWeights.Regular;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
View sample in GitHub
Animation
The WPF TreeView supports animating the expand and collapse of the TreeViewNode. To enable or disable the animation, use the IsAnimationEnabled property of SfTreeView.
<Syncfusion:SfTreeView x:Name="sfTreeView" IsAnimationEnabled="true">SfTreeView sfTreeView = new SfTreeView();
sfTreeView.IsAnimationEnabled = true;
You can also explore our WPF TreeView example to know how to represent hierarchical data in a tree-like structure with expand and collapse node options.