Remove MouseOver and Selected Overlay on Child Item

Environment

Product Version	2019.1.220
Product	RadPanelBar for WPF

Description

How to remove mouse over and selected background colors of a child RadPanelBarItem when it is hovered or selected.

Solution

Extract and modify the content of the RadPanelBarItem Template property.

To remove the mouse over overlay:

1. Extract the Style of the RadPanelBarItem.
2. Find the Setter that sets the Template property and go to the ControlTemplate in the setter.
3. Find the VisualState with x:Name="MouseOver" in the template and remove it.
4. Find the Border element with x:Name="MouseOverVisual" and remove it as well.

The following elements are the ones that should be removed from the template:

<VisualState x:Name="MouseOver"> 
    <Storyboard> 
        <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/> 
    </Storyboard> 
</VisualState> 
<!----------------------------> 
<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="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 BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/> 
</Border> 

To remove the selected overlay:

1. Extract the Style of the RadPanelBarItem.
2. Find the Setter that sets the Template property and go to the ControlTemplate in the setter.
3. Find the VisualState with x:Name="Selected" in the ControlTemplate and remove it.
4. Find the Border element with x:Name="SelectedVisual" and remove it as well.

The following elements are the ones that should be removed from the template:

<VisualState x:Name="Selected"> 
    <Storyboard> 
        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedVisual"/> 
    </Storyboard> 
</VisualState> 
<!----------------------------> 
<Border x:Name="SelectedVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="0"> 
    <Border.Background> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="#FFFCE79F" Offset="1"/> 
            <GradientStop Color="#FFFDD3A8"/> 
        </LinearGradientBrush> 
    </Border.Background> 
    <Border BorderBrush="White" BorderThickness="1" Background="{x:Null}" CornerRadius="0"/> 
</Border> 

You can apply the custom style using an implicit style. This is a Style without its x:Key set.

<Style TargetType="telerik:RadPanelBarItem"> 
    <!-- Some setters here --> 
</Style> 

Or you can apply the style via the ItemContainerStyle property of the RadPanelBar control.

The ControlTemplate extracts shown in the code snippets of this topic were extracted from the Office_Black theme.

See Also

• Editing Control Templates