.NET MAUI TreeView Item Template
The TreeView ItemTemplate property enables you to customize the text displayed in the TreeView items. Using this property allows you to add additional elements to the text in the TreeView item. The property can be set on TreeView level and/or TreeViewDescriptor level.
In addition to the item's text, TreeView allows you to customize the checkbox, image, and expand/collapse indicator. If you want to replace the entire template of the TreeView, check the TreeView Control Template article.
The examples below shows how to define custom ItemTemplate by using the ItemTemplate property.
Defining an ItemTemplate on RadTreeView Level
1. Define the RadTreeView and ItemTemplate:
<telerik:RadTreeView x:Name="treeView"
ItemsSource="{Binding Items}">
<telerik:TreeViewDescriptor ItemsSourcePath="Children"
DisplayMemberPath="Name"
TargetType="{x:Type local:Item}" />
<!-- modify the label and add additional elements in the label area.
ItemTemplate does not include expand indicator, image, checkbox, only the text, you can add additional elements to it.
For example, I have added a button-->
<telerik:RadTreeView.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="*,auto">
<Label Text="{Binding Name}" BackgroundColor="Yellow"/>
<telerik:TreeViewItemButton Text="Button" Grid.Column="1" WidthRequest="100" BackgroundColor="Green" HorizontalOptions="End"/>
</Grid>
</DataTemplate>
</telerik:RadTreeView.ItemTemplate>
</telerik:RadTreeView>
2. Add the telerik namespaces:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Create a sample Item class:
public class Item
{
public Item(string name)
{
this.Name = name;
this.Children = new ObservableCollection<Item>();
}
public string Name { get; set; }
public IList<Item> Children { get; set; }
}
4. Add the ViewModel class:
public class ViewModel
{
public ViewModel()
{
Items = new ObservableCollection<Item>();
Items.Add(new Item("My Projects")
{
Children = new List<Item>()
{
new Item("Using latest Telerik .NET MAUI controls")
{
Children = new ObservableCollection<Item>()
{
new Item("TreeView"),
new Item("Calendar"),
new Item("RichTextEditor"),
new Item("PdfViewer"),
new Item("SlideView"),
new Item("Chat"),
}
},
new Item("Blank project")
}
});
Items.Add(new Item("Shared Documents")
{
Children = new List<Item>()
{
new Item("Reports")
{
Children = new List<Item>()
{
new Item("October"),
new Item("November"),
new Item("December")
}
}
}
});
}
public ObservableCollection<Item> Items { get; set; }
}
Defining an ItemTemplate on TreeViewDescriptor Level
1. Define the ItemTemplate on TreeViewDescriptor leve:
<telerik:RadTreeView x:Name="treeView"
Grid.Row="1"
ItemsSource="{Binding Countries}">
<telerik:TreeViewDescriptor TargetType="{x:Type local:Country}"
DisplayMemberPath="Name"
ItemsSourcePath="Cities" />
<telerik:TreeViewDescriptor TargetType="{x:Type local:City}">
<telerik:TreeViewDescriptor.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Name}"
FontAttributes="Italic" />
</DataTemplate>
</telerik:TreeViewDescriptor.ItemTemplate>
</telerik:TreeViewDescriptor>
<telerik:RadTreeView.BindingContext>
<local:LocationViewModel/>
</telerik:RadTreeView.BindingContext>
</telerik:RadTreeView>
2. Add the telerik namespaces:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Create a sample data classes:
public class Country : Location
{
public Country()
{
this.Cities = new ObservableCollection<City>();
}
public IList<City> Cities { get; }
}
public class City : Location
{
}
public class Location : NotifyPropertyChangedBase
{
private string name;
public string Name
{
get => this.name;
set => this.UpdateValue(ref this.name, value);
}
}
4. Add the ViewModel class:
public class LocationViewModel : NotifyPropertyChangedBase
{
private ObservableCollection<Country> countries;
private Location selectedLocation;
public LocationViewModel()
{
this.Countries = new ObservableCollection<Country>
{
new Country
{
Name = "Austria",
Cities =
{
new City { Name = "Graz" },
new City { Name = "Innsbruck" },
new City { Name = "Leonding - a city southwest of Linz in the Austrian state of Upper Austria which borders Puchenau and the river Danube in the north, Wilhering and Pasching in the west, Traun in the south and Linz in the east and has a population of more than 27 thousand people, making it the most populous city of the Linz-Land district and the fourth most populous city in Upper Austria" },
new City { Name = "Linz" },
new City { Name = "Ratz" },
new City { Name = "Salzburg" },
new City { Name = "Vienna" },
new City { Name = "Wolfsberg" },
new City { Name = "Zeltweg" }
}
},
new Country
{
Name = "Belgium",
Cities =
{
new City { Name = "Antwerp" },
new City { Name = "Assesse" },
new City { Name = "Bruges" },
new City { Name = "Charleroi" },
new City { Name = "Lint" },
new City { Name = "Ranst" },
new City { Name = "Schaffen" },
new City { Name = "Veurne" },
new City { Name = "Zingem" },
}
},
new Country
{
Name = "Denmark",
Cities =
{
new City { Name = "Aalborg" },
new City { Name = "Aarhus" },
new City { Name = "Billund" },
new City { Name = "Copenhagen" },
new City { Name = "Karup" },
new City { Name = "Odense" },
new City { Name = "Viborg" },
new City { Name = "Vojens" }
}
},
new Country
{
Name = "France",
Cities =
{
new City { Name = "Aurillac" },
new City { Name = "Belley" },
new City { Name = "Carcassonne" },
new City { Name = "Caen" },
new City { Name = "Deauville" },
new City { Name = "La Rochelle" },
new City { Name = "Nice" },
new City { Name = "Marseille" },
new City { Name = "Paris" },
new City { Name = "Rodez" }
}
},
new Country
{
Name = "Germany",
Cities =
{
new City { Name = "Baden-Baden" },
new City { Name = "Berlin" },
new City { Name = "Borkum" },
new City{ Name = "Bremen" },
new City{ Name = "Dortmund" },
new City{ Name = "Dresden" },
new City{ Name = "Hamburg" },
new City{ Name = "Hannover" },
new City{ Name = "Leipzig" },
new City{ Name = "Mannheim" },
new City{ Name = "Munich" },
new City{ Name = "Nuremberg" }
}
},
new Country
{
Name = "Italy",
Cities =
{
new City { Name = "Aosta" },
new City { Name = "Bari" },
new City { Name = "Bologna" },
new City { Name = "Parma" },
new City { Name = "Rimini" },
new City { Name = "Rome" }
}
},
new Country
{
Name = "Netherlands",
Cities =
{
new City { Name = "Amsterdam" },
new City { Name = "Bonaire" },
new City { Name = "Eindhoven" },
new City { Name = "Maastricht" },
new City { Name = "Rotterdam" }
}
},
new Country
{
Name = "Portugal",
Cities =
{
new City { Name = "Braga" },
new City { Name = "Cascais" },
new City { Name = "Lisbon" },
new City { Name = "Porto" }
}
},
new Country
{
Name = "Spain",
Cities =
{
new City { Name = "Alicante" },
new City { Name = "Barcelona" },
new City { Name = "Madrid" },
new City { Name = "Seville" },
new City { Name = "Valencia" },
new City { Name = "Zaragoza" }
}
},
new Country
{
Name = "United Kingdom",
Cities =
{
new City { Name = "Bristol" },
new City { Name = "Liverpool" },
new City { Name = "London" },
new City { Name = "Manchester" },
new City { Name = "Norwich" },
new City { Name = "Southampton" }
}
},
};
}
public Location SelectedLocation
{
get => this.selectedLocation;
set => this.UpdateValue(ref this.selectedLocation, value);
}
public ObservableCollection<Country> Countries
{
get => this.countries;
set => this.UpdateValue(ref this.countries, value);
}
}