Issues with Header Borders, Row Hover Color, and Customizing Toggle Icons in RadTreeListView

[Anas]

Hi Telerik Team,

I am currently using the RadTreeListView in a WPF project and have encountered the following issues that I am unable to resolve:

1. Unwanted Border Around Column Headers:
   Despite setting BorderBrush and BorderThickness to Transparent or 0 for the headers, there is still a faint border around the header cells. I tried modifying the control templates based on the Telerik documentation but haven't been able to remove it.

2. Row Hover Color Changes to Orange/Golden:
   When I hover over any row, its background color changes to an orange/golden shade, even though I have explicitly set the IsMouseOver trigger to make the row background transparent.

3. Customizing the Toggle Button Icon from Triangle to Arrow:
   I want to replace the default triangular toggle icon (used to expand/collapse rows) with a simple arrow icon, but I’m not sure how to modify the toggle button template correctly.
   Below is a simplified version of my current RadTreeListView XAML:
   

   <telerik:RadTreeListView ItemsSource="{Binding Files}"  
                            Name="fileViewer"  
                            AutoGenerateColumns="False"  
                            Background="Transparent"  
                            Foreground="White"  
                            BorderThickness="0"  
                            RowIndicatorVisibility="Collapsed"  
                            CanUserSortColumns="False">  
   
     <telerik:RadTreeListView.Resources>  
       <Style TargetType="telerik:GridViewHeaderCell">  
         <Setter Property="BorderBrush" Value="Transparent" />  
         <Setter Property="BorderThickness" Value="0" />  
         <Setter Property="Background" Value="Transparent" />  
       </Style>  
   
       <Style TargetType="telerik:TreeListViewRow">  
         <Setter Property="Background" Value="Transparent" />  
         <Style.Triggers>  
           <Trigger Property="IsMouseOver" Value="True">  
             <Setter Property="Background" Value="Transparent" />  
           </Trigger>  
         </Style.Triggers>  
       </Style>  
     </telerik:RadTreeListView.Resources>  
   
     <telerik:RadTreeListView.Columns>  
       <telerik:GridViewDataColumn Header="Name" Width="*" DataMemberBinding="{Binding Name}" />  
       <telerik:GridViewDataColumn Header="Classification" Width="*" DataMemberBinding="{Binding Classifications}" />  
     </telerik:RadTreeListView.Columns>  
   </telerik:RadTreeListView>  
   

[Martin Ivanov]

Hello Anas,

Thank you for the shared image and code snippet. I will start by addressing the 2nd and 3rd points.
 
2. To change the mouseover color for the row, you can extract and modify its ControlTemplate and update the Background of the Border element displayed on mouseover.
3. You can change the toggle button icon by modifying the ControlTemplate of the GridViewToggleButton element.
 
I am attaching a sample project demonstrating the above mentioned suggestions for your reference. Note, that the sample project uses the Windows11 theme along with the implicit theming approach. 
 
In the Windows11 theme the header cells do not have a border around them with the approach that you have used (the style for GridViewHeaderCell). If you are using a different theme, may I ask you to share which one so that I can suggest the best approach for it? You can also modify the shared project in order to demonstrate your scenario and send it back.

Regards,
Martin Ivanov
Progress Telerik

[Anas]

Thank you Martin for you answer. The project you shared above is working fine but when I used the same code in my existing application it didn't work, my application just got crashed even though I installed the packages.
I would also like to highlight one thing that I am not aware about using themes and I am not using any theme in my application.

[Vladimir Stoyanov]

Thank you for the update.

There are two theming mechanisms for the UI for WPF controls - implicit theming and the StyleManager approach. There are also two types of binaries - xaml and noxaml.

The implicit theming approach should be paired up with the noxaml binaries/Nuget packages. This is the approach used in the sample project shared by my colleague Martin and the one we recommend. The noxaml dlls are lighter, since they do not have any styles in them as they are in separate binaries for each theme. When using the noxaml binaries, it is important to merge all of the necessary resources from the chosen theme in the Application's MergedDictionaries.

If you have not specified any theme, most likely you are using the xaml dlls and the default theme for the StyleManager approach which is Office_Black. With this in mind, my suggestion would be to switch to the noxaml dlls and the implicit styling approach. If you have installed the NuGet packages from the shared project on your end, you can make sure that the MergedDictionaries from the chosen theme are also added in the Application's App.xaml Resources.

If you need any further assistance with that, may I ask you to modify the shared project from my colleague's reply in order to demonstrate your scenario or send over a sample project of your own to show your setup? This will allow us to investigate further and provide specific suggestions for your case.

[Anas]

Thank you so much Telerik Team, I have migrated my application to noxaml and the code you shared earlier is working fine in my application