This is a migrated thread and some comments may be shown as answers.

Removing RadPanelBar highlighting in wpf

9 Answers 480 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

answered on 10 Sep 2010, 11:57 AM

wpfapplication1.zip

Hello Sayali,

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 30 Apr 2012, 10:11 AM

I followed the link referenced in this thread to investigate styling of the RadPanelBar control.
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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

<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="*"/>

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

<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="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 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>

answered on 03 May 2012, 08:42 AM

WpfApplication3.zip

Hi Craig,

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

Justin

commented on 13 Sep 2023, 04:21 PM

How do I only remove the mouse over visual on the RadPanelBarItem in a way that does not affect the styling of the headers? Using your example the headers style no longer matches the theme I have, Office 2019 dark.

Justin

commented on 14 Sep 2023, 12:13 PM | edited

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.

answered on 18 Sep 2023, 06:45 AM

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.

Justin

commented on 19 Sep 2023, 08:48 PM | edited

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>

answered on 20 Sep 2023, 07:01 AM

PanleBarDemo.zip

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.

Justin

commented on 20 Sep 2023, 12:32 PM

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" />