How to remove mouse hover effect from RadPanebar or any specific styles to be applied to remove highlighting.
Let me know.
9 Answers, 1 is accepted
You can apply a custom theme to any of the controls. For more information you can follow the link below:
http://www.telerik.com/help/wpf/common-styling-appearance-edit-control-templates-blend.html
Please find attached an example.
If you have further questions please do not hesitate to ask us.
I hope this will help you.
Kind regards,
Dimitrina
the Telerik team

However, it does not work if you add "content" into a RadPanelBarItem. e.g. If I add a simple <TextBlock> as content to one of the items, it still gets highlighted in yellow etc.
My modified MainWindow.xaml of the referenced sample is below. You can see that I have added a <TextBlock> to "RadPanelBarItem1.2", which still gets styled in yellow.
How can I change the style of this element?
Thanks and regards
Craig Littlewood
<
Window
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
x:Class
=
"WpfApplication1.MainWindow"
x:Name
=
"Window"
Title
=
"MainWindow"
UseLayoutRounding
=
"True"
Width
=
"640"
Height
=
"480"
>
<
Window.Resources
>
<
Style
x:Key
=
"RadPanelBarItemStyle1"
TargetType
=
"{x:Type telerik:RadPanelBarItem}"
>
<
Setter
Property
=
"Background"
>
<
Setter.Value
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"White"
/>
<
GradientStop
Color
=
"Gainsboro"
Offset
=
"0.43"
/>
<
GradientStop
Color
=
"#FFADADAD"
Offset
=
"0.44"
/>
<
GradientStop
Color
=
"#FFD4D4D4"
Offset
=
"1"
/>
</
LinearGradientBrush
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"BorderBrush"
Value
=
"#FF848484"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"1"
/>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
<
Setter
Property
=
"Padding"
Value
=
"3"
/>
<
Setter
Property
=
"HorizontalContentAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"VerticalContentAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"{x:Type telerik:RadPanelBarItem}"
>
<
Grid
x:Name
=
"RootElement"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
Grid
x:Name
=
"HeaderRow"
Background
=
"Transparent"
>
<!--<
Border
x:Name
=
"MouseOverVisual"
BorderBrush
=
"#FFFFC92B"
BorderThickness
=
"1"
CornerRadius
=
"1"
Opacity
=
"0"
>
<
Border
BorderBrush
=
"White"
BorderThickness
=
"1"
CornerRadius
=
"0"
>
<
Border.Background
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFFFFBA3"
Offset
=
"1"
/>
<
GradientStop
Color
=
"#FFFFFBDA"
Offset
=
"0"
/>
</
LinearGradientBrush
>
</
Border.Background
>
</
Border
>
</
Border
>
<
Border
x:Name
=
"SelectionVisual"
BorderBrush
=
"#FFFFC92B"
BorderThickness
=
"1"
CornerRadius
=
"1"
Opacity
=
"0"
>
<
Border
BorderBrush
=
"White"
BorderThickness
=
"1"
CornerRadius
=
"0"
>
<
Border.Background
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFFCE79F"
Offset
=
"1"
/>
<
GradientStop
Color
=
"#FFFDD3A8"
/>
</
LinearGradientBrush
>
</
Border.Background
>
</
Border
>
</
Border
>-->
<
Border
x:Name
=
"DisabledVisual"
BorderBrush
=
"#FF989898"
BorderThickness
=
"1"
CornerRadius
=
"1"
Opacity
=
"0"
>
<
Border
BorderBrush
=
"Transparent"
BorderThickness
=
"1"
Background
=
"#FFE0E0E0"
CornerRadius
=
"0"
/>
</
Border
>
<
ContentControl
x:Name
=
"Header"
ContentTemplate
=
"{TemplateBinding HeaderTemplate}"
Foreground
=
"{TemplateBinding Foreground}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"{TemplateBinding Padding}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
<
Rectangle
x:Name
=
"FocusVisual"
IsHitTestVisible
=
"False"
RadiusY
=
"2"
RadiusX
=
"2"
Stroke
=
"Black"
StrokeThickness
=
"1"
StrokeDashArray
=
"1 2"
Visibility
=
"Collapsed"
/>
</
Grid
>
<
Grid
x:Name
=
"ItemsContainer"
Grid.Row
=
"1"
Visibility
=
"Collapsed"
>
<
ItemsPresenter
/>
</
Grid
>
</
Grid
>
<
ControlTemplate.Triggers
>
<!--<
Trigger
Property
=
"IsSelected"
Value
=
"True"
>
<
Setter
Property
=
"Opacity"
TargetName
=
"SelectionVisual"
Value
=
"1"
/>
</
Trigger
>-->
<
Trigger
Property
=
"IsFocused"
Value
=
"True"
>
<
Setter
Property
=
"Visibility"
TargetName
=
"FocusVisual"
Value
=
"Visible"
/>
</
Trigger
>
<
Trigger
Property
=
"IsExpanded"
Value
=
"True"
>
<
Setter
Property
=
"Visibility"
TargetName
=
"ItemsContainer"
Value
=
"Visible"
/>
</
Trigger
>
<
Trigger
Property
=
"IsEnabled"
Value
=
"False"
>
<
Setter
Property
=
"Opacity"
TargetName
=
"DisabledVisual"
Value
=
"1"
/>
</
Trigger
>
<!--<
EventTrigger
RoutedEvent
=
"Mouse.MouseEnter"
SourceName
=
"HeaderRow"
>
<
BeginStoryboard
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0:0:0.2"
To
=
"1"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"MouseOverVisual"
/>
</
Storyboard
>
</
BeginStoryboard
>
</
EventTrigger
>
<
EventTrigger
RoutedEvent
=
"Mouse.MouseLeave"
SourceName
=
"HeaderRow"
>
<
BeginStoryboard
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0:0:0.2"
To
=
"0"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"MouseOverVisual"
/>
</
Storyboard
>
</
BeginStoryboard
>
</
EventTrigger
>-->
</
ControlTemplate.Triggers
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"ItemsPanel"
>
<
Setter.Value
>
<
ItemsPanelTemplate
>
<
telerik:PanelBarPanel
IsItemsHost
=
"True"
/>
</
ItemsPanelTemplate
>
</
Setter.Value
>
</
Setter
>
<
Style.Triggers
>
<
Trigger
Property
=
"Level"
Value
=
"1"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"{x:Type telerik:RadPanelBarItem}"
>
<
Grid
x:Name
=
"RootElement"
SnapsToDevicePixels
=
"True"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
Grid
x:Name
=
"HeaderRow"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
<
Border
x:Name
=
"NormalVisual"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Grid.ColumnSpan
=
"5"
>
<
Border
BorderBrush
=
"White"
BorderThickness
=
"1"
Background
=
"{TemplateBinding Background}"
/>
</
Border
>
<!--<
Border
x:Name
=
"MouseOverVisual"
BorderBrush
=
"#FFFFC92B"
BorderThickness
=
"1"
Grid.ColumnSpan
=
"5"
Opacity
=
"0"
>
<
Border
BorderBrush
=
"White"
BorderThickness
=
"1"
>
<
Border.Background
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFFFFBA3"
Offset
=
"1"
/>
<
GradientStop
Color
=
"#FFFFFBDA"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFFFD25A"
Offset
=
"0.43"
/>
<
GradientStop
Color
=
"#FFFEEBAE"
Offset
=
"0.42"
/>
</
LinearGradientBrush
>
</
Border.Background
>
</
Border
>
</
Border
>-->
<!--<
Border
x:Name
=
"SelectVisual"
BorderThickness
=
"1"
Grid.ColumnSpan
=
"5"
Opacity
=
"0"
>
<
Border.BorderBrush
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FF282828"
/>
<
GradientStop
Color
=
"#FF5F5F5F"
Offset
=
"1"
/>
</
LinearGradientBrush
>
</
Border.BorderBrush
>
<
Border
BorderThickness
=
"1"
>
<
Border.BorderBrush
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFB69A78"
/>
<
GradientStop
Color
=
"#FFFFE17A"
Offset
=
"0.126"
/>
</
LinearGradientBrush
>
</
Border.BorderBrush
>
<
Border.Background
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFFFD74E"
Offset
=
"0.996"
/>
<
GradientStop
Color
=
"#FFFFDCAB"
Offset
=
"0.17"
/>
<
GradientStop
Color
=
"#FFFFB062"
Offset
=
"0.57"
/>
<
GradientStop
Color
=
"#FFFFD18F"
Offset
=
"0.56"
/>
<
GradientStop
Color
=
"#FFFFBA74"
/>
</
LinearGradientBrush
>
</
Border.Background
>
</
Border
>
</
Border
>-->
<
Border
x:Name
=
"DisabledVisual"
BorderBrush
=
"#FF989898"
BorderThickness
=
"1"
Grid.ColumnSpan
=
"5"
Opacity
=
"0"
>
<
Border
BorderBrush
=
"Transparent"
BorderThickness
=
"1"
Background
=
"#FFE0E0E0"
/>
</
Border
>
<
Path
x:Name
=
"arrow"
Grid.Column
=
"5"
Data
=
"M1,1.5L4.5,5 8,1.5"
HorizontalAlignment
=
"Right"
Margin
=
"7,0"
Opacity
=
"1"
RenderTransformOrigin
=
"0.5,0.5"
Stretch
=
"None"
Stroke
=
"Black"
StrokeThickness
=
"2"
VerticalAlignment
=
"Center"
>
<
Path.RenderTransform
>
<
RotateTransform
Angle
=
"0"
/>
</
Path.RenderTransform
>
</
Path
>
<
ContentControl
x:Name
=
"Header"
Grid.ColumnSpan
=
"4"
ContentTemplate
=
"{TemplateBinding HeaderTemplate}"
Foreground
=
"{TemplateBinding Foreground}"
FontSize
=
"{TemplateBinding FontSize}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"{TemplateBinding Padding}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
<
Rectangle
x:Name
=
"FocusVisual"
Grid.ColumnSpan
=
"5"
Grid.Column
=
"0"
IsHitTestVisible
=
"False"
Stroke
=
"Black"
StrokeThickness
=
"1"
StrokeDashArray
=
"1 2"
Visibility
=
"Collapsed"
/>
</
Grid
>
<
Grid
x:Name
=
"ItemsContainer"
Grid.Row
=
"1"
Visibility
=
"Collapsed"
>
<
telerik:LayoutTransformControl
x:Name
=
"transformationRoot"
IsTabStop
=
"False"
>
<
ItemsPresenter
/>
</
telerik:LayoutTransformControl
>
</
Grid
>
</
Grid
>
<
ControlTemplate.Triggers
>
<!--<
Trigger
Property
=
"IsSelected"
Value
=
"True"
>
<
Setter
Property
=
"Opacity"
TargetName
=
"SelectVisual"
Value
=
"1"
/>
</
Trigger
>-->
<
Trigger
Property
=
"IsFocused"
Value
=
"True"
>
<
Setter
Property
=
"Visibility"
TargetName
=
"FocusVisual"
Value
=
"Visible"
/>
</
Trigger
>
<
Trigger
Property
=
"IsExpanded"
Value
=
"True"
>
<
Trigger.EnterActions
>
<
BeginStoryboard
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0:0:0.2"
From
=
"0"
To
=
"1"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"ItemsContainer"
/>
</
Storyboard
>
</
BeginStoryboard
>
</
Trigger.EnterActions
>
<
Trigger.ExitActions
>
<
BeginStoryboard
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0"
To
=
"1"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"arrow"
/>
<
DoubleAnimation
Duration
=
"0:0:0.2"
From
=
"0"
To
=
"0"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"ItemsContainer"
/>
</
Storyboard
>
</
BeginStoryboard
>
</
Trigger.ExitActions
>
<!--<Setter Property="Opacity" TargetName="SelectVisual" Value="1"/>-->
<
Setter
Property
=
"LayoutTransform"
TargetName
=
"arrow"
>
<
Setter.Value
>
<
TransformGroup
>
<
RotateTransform
Angle
=
"180"
/>
</
TransformGroup
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"Visibility"
TargetName
=
"ItemsContainer"
Value
=
"Visible"
/>
</
Trigger
>
<
Trigger
Property
=
"IsEnabled"
Value
=
"False"
>
<
Setter
Property
=
"Opacity"
TargetName
=
"DisabledVisual"
Value
=
"1"
/>
<
Setter
Property
=
"Opacity"
TargetName
=
"NormalVisual"
Value
=
"0"
/>
</
Trigger
>
<!--<
Trigger
Property
=
"IsMouseOver"
Value
=
"True"
>
<
Setter
Property
=
"Opacity"
TargetName
=
"MouseOverVisual"
Value
=
"1"
/>
</
Trigger
>-->
</
ControlTemplate.Triggers
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Trigger
>
</
Style.Triggers
>
</
Style
>
</
Window.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
telerik:RadPanelBar
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Top"
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem1"
IsExpanded
=
"True"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem1.1"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
/>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem1.2"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
>
<
TextBlock
Text
=
"RadPanelBarItem1.2 TextBlock content"
/>
</
telerik:RadPanelBarItem
>
</
telerik:RadPanelBarItem
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem2"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem2.1"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
/>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem2.2"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
/>
</
telerik:RadPanelBarItem
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem3"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem3.1"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
/>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem3.2"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
/>
</
telerik:RadPanelBarItem
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem4"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem4.1"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
/>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem4.2"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
/>
</
telerik:RadPanelBarItem
>
</
telerik:RadPanelBar
>
</
Grid
>
</
Window
>
The issue is caused by the fact that the RadPanelBarItemStyle1 custom style isn't applied on the RadPanelBarItem wrapping the TextBlock. In order to apply the RadPanelBarItemStyle1 style to all RadPanelBarItems you can make it implicit (remove its x:Key setting) or you can set the RadPanelBarItem1.2 ItemContainerStyle property so that it can apply your custom style to all children RadPanelBarItems:
<
telerik:RadPanelBar
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Top"
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem1"
IsExpanded
=
"True"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem1.1"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
/>
<
telerik:RadPanelBarItem
Header
=
"RadPanelBarItem1.2"
Style
=
"{DynamicResource RadPanelBarItemStyle1}"
ItemContainerStyle
=
"{DynamicResource
RadPanelBarItemStyle1}"
>
<
TextBlock
Text
=
"RadPanelBarItem1.2 TextBlock content"
/>
</
telerik:RadPanelBarItem
>
</
telerik:RadPanelBarItem
>
...
</
telerik:RadPanelBar
>
I attached a sample solution based on your code snippet where I made the style implicit so that it can dynamically be applied to all RadPanelBarItems in the Window. I hope it helps.
Greetings,
Tina Stancheva
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

This resolved my problem.
Thanks for your help.
Regards
Craig

I am testing the rad controls for wpf.
Is there any way to do this without changing the style of the header?
I am interested in the header matches the selected template.
Thanks and sorry for my english.

Thanks!
Hello Sayali,
To customize the mouseover state of RadPanelBarItems, you'll have to extract the control template for our older themes and make the desired modifications there. For newer themes, you can utilize telerik:ThemeHelper for this purpose. Let us know which theme you are using and we will be glad to assist you further.
Regards,
Masha
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.
I am using the Office 2019 theme. When I extracted the control template for RadPanelBarItem the theme was ignored. If I can use ThemeHelper with Office 2019 theme that would be fantastic.
Thanks
Here is my issue. When mouse enters the top RadPanelBarItem the RadTreeView disappears due to the mouseover.
Here is what I get when I try to edit the template for RadPanelBarItem.
Hello,
Please check the code snippet below, how to remove the mouseover state from RadPanelBarItem in Office2019 theme:
xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls"
<Style TargetType="telerikNavigation:RadPanelBarItem" BasedOn={StaticResource RadPanelbarItemBaseStyle>
<Setter Property="helpers:ThemeHelper.MouseOverBrush" Value="Transparent"/>
</Style>
I hope this helps.
Regards,
Masha
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.
Thank you for the response. The is an error with the static resource name. The name 'RadPanelbarItemBaseStyle' does not exist.
This is part of my App.xaml:
<ResourceDictionary.MergedDictionaries>
<!-- Telerik -->
<ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/System.Windows.xaml"/>
<ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.xaml"/>
<ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
</ResourceDictionary.MergedDictionaries>
Hello Justin,
Please review the attached project where the approach is demonstrated. I guess the error is occurring because Telerik.Windows.Controls.Navigation.xaml has not been merged, which is necessary for RadPanelBar.
I hope this helps.
Regards,
Masha
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.
Thank you for the working project. That helped point out what I was doing wrong.
The fix was to add an extra line to my App.xaml:
<ResourceDictionary Source="/Telerik.Windows.Themes.Office2019;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />