Customize color of Selection Indicator from NavigationItemView

[Patrick]

 

Hi team,

I am wondering how to customize the color of the selection indicator, the small vertical colored bar that appears when an item in the Navigation control is selected.

The current color seems to be the accent color of the device, for example, on Windows, the accent color from the theme Windows customization.

I tried to change the BackgroundColor on the NavigationViewItemView, but that doesn't work for the small indicator.

In your project sample, the small menu where you can select "First look," "Configuration," etc., is built with a telerik:NonVirtualizedItemsControl.

And this control have that style targetted telerik:NonVirtualizedItemsControlItemContainer

    <Style x:Key="SelectedManagerMenuItemStyle" TargetType="telerik:NonVirtualizedItemsControlItemContainer">
        <Setter Property="BackgroundColor" Value="{StaticResource AccentColor8}" />
    </Style>

And THAT change the indicator for the selected item like I need for the Navigation Controle.

My question is how to change the color of that indicator ?

 

[Patrick]

Hmmm, well, I saw other controls like RadComboBox that have that selection indicator. Is there a way to override the system accent color from the app?

I also tried to change that property like you did in the sample project, directly in the App() constructor:

Application.AccentColor = Color.FromArgb("#8660C5");

But it seems like this has no effect.

[Lance | Senior Manager Technical Support]

Hi Patrick, I can confirm that it uses the AccentColor. Here is a screenshot of the ControlTemplate responsible for the visual element on WinUI

Unfortunately, even after overriding the entire template, I was not able to change the color either.

So, to get you some help with this,  I have escalated this thread to the UI for Maui team, who will be able to assist further. Someone form the team will reply with an answer.

[Yana]

Hi Patrick,

Indeed, as Lance suggested, you'd need to override the NavigationViewItem template in order to modify that accent color.  The suggested solution does not work as the ItemStyle property is applied only for auto-generated items ( through the NavigationView's ItemsSource property).

In the concrete case, you can just use an implicit style like this:

<Style TargetType="telerik:NavigationViewItemView">
    <Setter Property="ControlTemplate" Value="{OnPlatform Default={StaticResource NavigationViewItemView_ControlTemplate}, 
                                                            WinUI={StaticResource NavigationViewItemView_ControlTemplate_WinUI}}" />
</Style>

Please find attached a sample app which demonstrates the exact approach.

I hope I was of help. Let me know if you have any additional questions on this.

Regards,
Yana
Progress Telerik

[Patrick]

It's perfect ! Overriding the ControlTemplate work perfectly !!!

Thanks !