Style Selector on Items
The .NET MAUI TreeView exposes a conditional styling feature that allows you to apply different styles to each item depending on a specific condition.
The following example shows how to use the ItemStyleSelector:
1. Set the ItemStyleSelector property to the RadTreeView:
<telerik:RadTreeView x:Name="treeView"
ItemsSource="{Binding Countries}"
ItemStyleSelector="{StaticResource LocationsStyleSelector}"
SelectedItem="{Binding SelectedLocation}">
<telerik:TreeViewDescriptor TargetType="{x:Type local:Country}"
DisplayMemberPath="Name"
ItemsSourcePath="Cities" />
<telerik:TreeViewDescriptor TargetType="{x:Type local:City}"
DisplayMemberPath="Name" />
<telerik:RadTreeView.BindingContext>
<local:LocationViewModel/>
</telerik:RadTreeView.BindingContext>
</telerik:RadTreeView>
2. Define the style selector in XAML:
<ResourceDictionary>
<Style x:Key="ItemStyle" TargetType="telerik:TreeViewItemView">
<Setter Property="IsImageVisible" Value="True" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="PointerOver">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#268660C5" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="#61000000" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#408660C5" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style x:Key="CityItemStyle" TargetType="telerik:TreeViewItemView" BasedOn="{StaticResource ItemStyle}">
<Setter Property="ImageSource">
<FontImageSource Glyph=""
FontFamily="TelerikFontExamples"
Color="{Binding TextColor, Source={x:RelativeSource AncestorType={x:Type telerik:TreeViewItemView}}}"
Size="16" />
</Setter>
</Style>
<Style x:Key="CountryItemStyle" TargetType="telerik:TreeViewItemView" BasedOn="{StaticResource ItemStyle}">
<Setter Property="ImageSource">
<FontImageSource Glyph=""
FontFamily="TelerikFontExamples"
Color="{Binding TextColor, Source={x:RelativeSource AncestorType={x:Type telerik:TreeViewItemView}}}"
Size="16" />
</Setter>
</Style>
<selector:LocationsStyleSelector x:Key="LocationsStyleSelector"
CityStyle="{StaticResource CityItemStyle}"
CountryStyle="{StaticResource CountryItemStyle}" />
</ResourceDictionary>
3. Add the custom LocationStyleSelector class that inherits from IStyleSelector:
public class LocationsStyleSelector : IStyleSelector
{
public Style CityStyle { get; set; }
public Style CountryStyle { get; set; }
public Style SelectStyle(object item, BindableObject bindable)
{
return item switch
{
City => this.CityStyle,
Country => this.CountryStyle,
_ => null
};
}
}
4. Set the style to the RadTreeView:
<telerik:RadTreeView x:Name="treeView"
CheckBoxMode="Recursive"
ItemStyle="{StaticResource TreeViewItemStyle}"
ItemsSource="{Binding Countries}"
SelectedItem="{Binding SelectedLocation}">
<telerik:TreeViewDescriptor TargetType="{x:Type local:Country}"
DisplayMemberPath="Name"
ItemsSourcePath="Cities" />
<telerik:TreeViewDescriptor TargetType="{x:Type local:City}"
DisplayMemberPath="Name"
ItemStyle="{StaticResource CityDescriptorStyle}" />
<telerik:RadTreeView.BindingContext>
<local:LocationViewModel/>
</telerik:RadTreeView.BindingContext>
</telerik:RadTreeView>
5. Add the location data model:
public class Location : NotifyPropertyChangedBase
{
private string name;
public string Name
{
get => this.name;
set => this.UpdateValue(ref this.name, value);
}
}
6. Add the country data model:
public class Country : Location
{
public Country()
{
this.Cities = new ObservableCollection<City>();
}
public IList<City> Cities { get; }
}
7. Add the city data model:
public class City : Location
{
}
8. Add the ViewModel:
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);
}
}
For a runnable example demonstrating the TreeView ItemStyleSelector, see the SDKBrowser Demo Application and go to TreeView > Styling.