How to change the selected node text color in .NET MAUI TreeView (SfTreeView)?

In .NET MAUI TreeView, you can change the text color of a selected node by using SelectionChanging event.

C#

public class Behavior : Behavior<SfTreeView>
{
    SfTreeView TreeView;
    protected override void OnAttachedTo(SfTreeView treeView)
    {
        TreeView = treeView;
        TreeView.SelectionChanging += OnTreeView_SelectionChanging;
        base.OnAttachedTo(treeView);
    }
    private void OnTreeView_SelectionChanging(object sender, Syncfusion.Maui.TreeView.ItemSelectionChangingEventArgs e)
    {
        if (TreeView.SelectionMode == Syncfusion.Maui.TreeView.TreeViewSelectionMode.Single)
        {
            if (e.AddedItems.Count > 0)
            {
                var item = e.AddedItems[0] as FileManager;
                item.LabelColor = Colors.Red;
            }
            if (e.RemovedItems.Count > 0)
            {
                var item = e.RemovedItems[0] as FileManager;
                item.LabelColor = Colors.Black;
            }
        }
    }
    protected override void OnDetachingFrom(SfTreeView bindable)
    {
        TreeView.SelectionChanging -= OnTreeView_SelectionChanging;
        TreeView = null;
        base.OnDetachingFrom(bindable);
    }
} 

XAML

<syncfusion:SfTreeView x:Name="treeView" 
                       ItemHeight="40" 
                       Indentation="15" 
                       ExpanderWidth="40" 
                       SelectionMode="Single"
                       ChildPropertyName="SubFiles"
                       SelectionBackground="LightGray"
                       ItemsSource="{Binding ImageNodeInfo}"
   	               AutoExpandMode="AllNodesExpanded">
      <syncfusion:SfTreeView.Behaviors>
          <local:Behavior/>
      </syncfusion:SfTreeView.Behaviors>
      <syncfusion:SfTreeView.ItemTemplate>
          <DataTemplate>
              <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>
          </DataTemplate>
      </syncfusion:SfTreeView.ItemTemplate>
  </syncfusion:SfTreeView> 

Output

Download the complete sample from GitHub

Conclusion:

I hope you enjoyed learning how to change the selected node text color in .NET MAUI TreeView.

You can refer to our .NET MAUI TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.

You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!