Category / Section
How to customize the icons in Syncfusion WPF TreeView Control?
2 mins read
Follow the below steps, can customize the TreeViewAdv icon using MVVM.
Step 1: Create a Model class to responsible for exposing data from the ViewModel.
Step 2: Create a view model class and add the properties to bind the values. The ImagePosition property to determine the position of the TreeViewAdv icon.
Step 3: Define the TreeViewAdv control and bind the ItemSource property.
Step 4: Define the DataContext and ItemTemplate of TreeViewAdv to appear the items.
Step 5: Define the ItemContainerStyle for add the icons to respective RightImageSource and LeftImageSource collection based on ImagePosition property.
XAML
<Grid>
<syncfusion:TreeViewAdv x:Name="TreeViewAdv" ItemsSource="{Binding TreeItems}" Width="150" Height="150">
<syncfusion:TreeViewAdv.DataContext>
<local:ViewModel/>
</syncfusion:TreeViewAdv.DataContext>
<syncfusion:TreeViewAdv.ItemTemplate>
<HierarchicalDataTemplate>
<TextBlock Text="{Binding Header}"/>
</HierarchicalDataTemplate>
</syncfusion:TreeViewAdv.ItemTemplate>
<syncfusion:TreeViewAdv.ItemContainerStyle>
<Style TargetType="syncfusion:TreeViewItemAdv">
<Style.Triggers>
<DataTrigger Binding="{Binding ImagePosition}" Value="Right">
<Setter Property="RightImageSource" Value="{Binding Image}"/>
</DataTrigger>
<DataTrigger Binding="{Binding ImagePosition}" Value="Left">
<Setter Property="LeftImageSource" Value="{Binding Image}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</syncfusion:TreeViewAdv.ItemContainerStyle>
</syncfusion:TreeViewAdv>
</Grid>
ViewModel
class ViewModel
{
public ObservableCollection<Model> TreeItems { get; set; }
public ViewModel()
{
TreeItems = PopulateData();
}
private ObservableCollection<Model> PopulateData()
{
TreeItems = new ObservableCollection<Model>();
Model Root1 = new Model() { Header = "Mailbox", Image = "Images/root.png", ImagePosition = "Right" };
TreeItems.Add(Root1);
Model Root2 = new Model() { Header = "Calendar", Image = "Images/calendar.png", ImagePosition = "Right" };
TreeItems.Add(Root2);
Model Root3 = new Model() { Header = "Contacts", Image = "Images/contacts.png", ImagePosition = "Right" };
TreeItems.Add(Root3);
Model Root4 = new Model() { Header = "Deleted Items", Image = "Images/deleted.png", ImagePosition = "Left" };
TreeItems.Add(Root4);
Model Root5 = new Model() { Header = "Drafts", Image = "Images/drafts.png", ImagePosition = "Left" };
TreeItems.Add(Root5);
return TreeItems;
}
}
Model
class Model
{
public string Header { get; set; }
public string Image { get; set; }
public string ImagePosition { get; set; }
}
