Changing the selected item and highlight color of a RadNavigationViewItem

[Ryan]

I'm using a RadNavigationView in my application that has an existing theme applied - I want to keep this theme rather than use the Telerik themes.  I've been able to manually style most of the control to match the existing theme, with the exception of the mouse over and selected item color. No matter what I try, it is always the default orange color.

Is there any guidance about that shows an example of how to take a standard RadNavigationView, and adjust the highlight colors of the RadNavigationViewItem?

Thanks in advance!       

        
<telerik:RadNavigationView DockPanel.Dock="Bottom" 
                                   ItemsSource="{Binding Items}" 
                                   IsPaneOpen="True" 
                                   SelectedItem="{Binding Item}"
                                   DisplayMemberPath="DisplayName"
                                   DisplayMode="Expanded"
                                   PaneToggleButtonVisibility="Visible"  
                                   ExpandedPaneWidth="300"
                                   AllowMultipleExpandedItems="True" 
                                   PaneBackground="{DynamicResource MahApps.HamburgerMenu.Pane.Background}"
                                   PaneHeaderBackground="{DynamicResource MahApps.HamburgerMenu.Pane.Background}"
        ><Style TargetType="telerik:RadNavigationViewItem" >
                    <Setter Property="Background" Value="{DynamicResource MahApps.HamburgerMenu.Pane.Background}"/>
                    <Setter Property="BorderThickness" Value="0" />                    <Setter Property="Foreground" Value="{DynamicResource MahApps.HamburgerMenu.Pane.Foreground}" />
                    <Setter Property="FontSize" Value="16"/>
                    <Setter Property="ItemsSource" Value="{Binding Items}" />
                    <Setter Property="DisplayMemberPath" Value="DisplayName" />
                    <Setter Property="Icon" Value="{Binding Icon, Mode=OneWay}" />
                    
                </Style>
<telerik:RadNavigationView.ContentTemplate>...
                

            

[Psyduck]

Hello.

 

This is a document worth referring to.

https://docs.telerik.com/devtools/wpf/styling-and-appearance/theme-helper

 

 

xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls"

<Style TargetType="telerikNavigation:RadNavigationViewItem">
	<Setter Property="helpers:ThemeHelper.MouseOverBrush" Value="{StaticResource NavigationView_NavItemBackground_Selected}"/>
	<Setter Property="helpers:ThemeHelper.PressedBrush" Value="{StaticResource NavigationView_NavItemBackground_Selected}"/>
</Style>

In the case of the above style, the mouseover of the navigation item and the background when selected are changed.

 

 

[Ryan]

I had seen that page, but it has a callout that says

"The ThemeHelper class currently works out-of-the-box with the VisualStudio2019, Crystal, Fluent, Material themes. Please note that not all properties will work for any given control at the moment. To see which properties are fully supported for a specific control, please check its ControlTemplate."

I'm not using those themes at all, so it doesn't appear to do anything (it actually looks to reset the whole style of the navviewitem to a default state, and doesn't change the color of the selected item at all)

[Psyduck]

What is your telerik base theme?

[Martin Ivanov]

Hello Ryan,

My guess here is that you are using the default Office_Black theme. In that case, you will need to extract the ControlTemplate of RadNavigationViewItem and update the corresponding selection and mouse over visuals. You can apply the modified template using the Template property of RadNavigationViewItem.

<Style TargetType="telerik:RadNavigationViewItem" >
          <Setter Property="Template" Value="{StaticResource CustomTemplate}"/>

In case you are using one of the latest Telerik themes, you can use the ThemeHelper attached properties in order to change colors, as pointed by KIM.

Regards,
Martin Ivanov
Progress Telerik