Category / Section
How to change the TreeView selected node text color in Xamarin.Forms (SfTreeView)
1 min read
In Xamarin.Forms TreeView, you can change the text color of selected node by using SelectionChanging event.
C#
TextColor updated in SelectionChanging event, based on selection added or removed.
public class Behavior : Behavior<SfTreeView> { SfTreeView TreeView; protected override void OnAttachedTo(SfTreeView treeView) { TreeView = treeView; TreeView.SelectionChanging += TreeView_SelectionChanging; base.OnAttachedTo(treeView); } private void TreeView_SelectionChanging(object sender, Syncfusion.XForms.TreeView.ItemSelectionChangingEventArgs e) { if (TreeView.SelectionMode == Syncfusion.XForms.TreeView.SelectionMode.Single) { if (e.AddedItems.Count > 0) { var item = e.AddedItems[0] as FileManager; item.LabelColor = Color.Red; } if (e.RemovedItems.Count > 0) { var item = e.RemovedItems[0] as FileManager; item.LabelColor = Color.Black; } } } protected override void OnDetachingFrom(SfTreeView bindable) { TreeView.SelectionChanging -= TreeView_SelectionChanging; base.OnDetachingFrom(bindable); } }
LabelColor bound to the Label added to SfTreeView in the ItemTemplate and Behaviour.
<syncfusion:SfTreeView x:Name="treeView" ItemHeight="40" Indentation="15" ExpanderWidth="40" SelectionMode="Single" ChildPropertyName="SubFiles" SelectionBackgroundColor="LightGray" ItemsSource="{Binding ImageNodeInfo}" AutoExpandMode="AllNodesExpanded"> <syncfusion:SfTreeView.Behaviors> <local:Behavior/> </syncfusion:SfTreeView.Behaviors> <syncfusion:SfTreeView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <Grid x:Name="grid" RowSpacing="0" BackgroundColor="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="0" Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="40" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid Padding="5,5,5,5"> <Image Source="{Binding ImageIcon}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="35" WidthRequest="35"/> </Grid> <Grid Grid.Column="1" RowSpacing="1" Padding="1,0,0,0" VerticalOptions="Center"> <Label x:Name="TextLabel" LineBreakMode="NoWrap" Text="{Binding ItemName}" TextColor="{Binding LabelColor}" VerticalTextAlignment="Center"> <Label.FontSize> <OnPlatform x:TypeArguments="x:Double"> <On Platform="Android,iOS"> <OnIdiom x:TypeArguments="x:Double" Phone="16" Tablet="18" /> </On> </OnPlatform> </Label.FontSize> </Label> </Grid> </Grid> <StackLayout Grid.Row="1" HeightRequest="1"/> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </syncfusion:SfTreeView.ItemTemplate> </syncfusion:SfTreeView>
Output