Changing the selected item and highlight color of a RadNavigationViewItem

2 Answers 87 Views
NavigationView (Hamburger Menu)
Ryan
Top achievements
Rank 1
Ryan asked on 06 Jul 2021, 02:50 AM

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>...

2 Answers, 1 is accepted

Sort by
0
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
answered on 06 Jul 2021, 03:32 AM

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
Top achievements
Rank 1
commented on 06 Jul 2021, 03:52 AM

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
Top achievements
Rank 4
Bronze
Bronze
Bronze
commented on 06 Jul 2021, 06:38 AM

What is your telerik base theme?
0
Martin Ivanov
Telerik team
answered on 08 Jul 2021, 09:24 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
NavigationView (Hamburger Menu)
Asked by
Ryan
Top achievements
Rank 1
Answers by
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
Martin Ivanov
Telerik team
Share this question
or