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

Remove mouseover for radpanelitem

4 Answers 175 Views

PanelBar

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

4 Answers, 1 is accepted

answered on 30 Mar 2011, 11:44 AM

409070-PanelBarStyle.zip

Hi Chester,

I couldn't rerproduce this issue on our side. It seems that you have defined a custom style? Is this the case? Can you please send us a sample application rerpoducing the issue? You can also have a look at the attached sample that I used for testing - can you reproduce the issue there and how?

Thank you in advance for your cooperation.

Best wishes,
Tina Stancheva
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

answered on 31 Mar 2011, 03:27 AM

customradpanel.png

Hi Tina,

Below is my code for my radpanel project. I assume that the yellow effect when a user hovers to the stackpanel group of hyperlink is caused by the ButtonChrome of telerik controls. But I dont know how to modify it. SImply I just want to disable the mouseover effect. Also, I recently discovered that it can also be pressed (see attached image), maybe that's because of the Button Chrome?

<UserControl

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d"

x:Class="Custom_RadPanel.MainPage"

Width="640" Height="480">

<UserControl.Resources>

<LinearGradientBrush x:Key="shinyblack_expander_fill" EndPoint="0.5,0" StartPoint="0.5,1">

<GradientStop Color="#FF2A2A2A" Offset="0"/>

<GradientStop Color="#FF2A2A2A" Offset="0.5"/>

<GradientStop Color="#FF3D3D3D" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="shinyblack_outline" Color="#FF1A1A1A"/>

<LinearGradientBrush x:Key="shinywhite_fill" EndPoint="0.5,0" StartPoint="0.5,1">

<GradientStop Color="White" Offset="0"/>

<GradientStop Color="sc#1, 0.9743777, 0.9743777, 0.9743777" Offset="0.45783233642578125"/>

<GradientStop Color="sc#1, 0.918671131, 0.918671131, 0.918671131" Offset="0.57741710543632507"/>

<GradientStop Color="sc#1, 0.844770849, 0.844770849, 0.844770849" Offset="0.65749369561672211"/>

<GradientStop Color="sc#1, 0.756390154, 0.756390154, 0.756390154" Offset="0.71980445086956024"/>

<GradientStop Color="sc#1, 0.7011019, 0.7011019, 0.7011019" Offset="0.75"/>

<GradientStop Color="#FFDADADA" Offset="0.75"/>

<GradientStop Color="#FFDADADA" Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="SVG_hyperlink_pressed" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFB0BBC5" Offset="0"/>

<GradientStop Color="#FF919AA3" Offset="0.7"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="shinyblack_normal" EndPoint="0.5,0" StartPoint="0.5,1">

<GradientStop Color="#FF3D3D3D" Offset="0"/>

<GradientStop Color="#FF3D3D3D" Offset="0.5"/>

<GradientStop Color="Gray" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="shinyblack_innerborder" Color="#FF4D4D4D"/>

<LinearGradientBrush x:Key="shinyblack_mouseover" EndPoint="0.5,0" StartPoint="0.5,1">

<GradientStop Color="#FF2A2A2A" Offset="0"/>

<GradientStop Color="#FF2A2A2A" Offset="0.5"/>

<GradientStop Color="Gray" Offset="1"/>

</LinearGradientBrush>

<Style x:Key="SVG_HyperlinkButtonStyle" TargetType="HyperlinkButton">

<Setter Property="Foreground" Value="#FF73A9D8"/>

<Setter Property="Padding" Value="2,0,2,0"/>

<Setter Property="Cursor" Value="Hand"/>

<Setter Property="HorizontalContentAlignment" Value="Left"/>

<Setter Property="VerticalContentAlignment" Value="Top"/>

<Setter Property="Background" Value="Transparent"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="HyperlinkButton">

<Grid Height="18">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.1">

<VisualTransition.GeneratedEasingFunction>

<CubicEase EasingMode="EaseIn"/>

</VisualTransition.GeneratedEasingFunction>

</VisualTransition>

<VisualTransition From="MouseOver" GeneratedDuration="0" To="Pressed">

<VisualTransition.GeneratedEasingFunction>

<CircleEase EasingMode="EaseIn"/>

</VisualTransition.GeneratedEasingFunction>

</VisualTransition>

</VisualStateGroup.Transitions>

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="normal_fill" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="mouseover_fill" d:IsOptimized="True"/>

<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="mouseover_fill" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="normal_fill" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pressed_fill" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>

<DoubleAnimation Duration="0" To="4" Storyboard.TargetProperty="(Rectangle.RadiusX)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="4" Storyboard.TargetProperty="(Rectangle.RadiusY)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pressed_fill" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="2" Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="normal_fill" BorderThickness="1" Grid.ColumnSpan="2" Margin="0" CornerRadius="5" Background="{StaticResource shinywhite_fill}"/>

<Border x:Name="mouseover_fill" BorderThickness="1" Grid.ColumnSpan="2" Margin="0" CornerRadius="5" Background="White" Opacity="0"/>

<Border x:Name="pressed_fill" BorderThickness="1" Margin="0" CornerRadius="5" d:LayoutOverrides="GridBox" Opacity="0" Background="{StaticResource SVG_hyperlink_pressed}"/>

<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="{StaticResource shinywhite_fill}" StrokeThickness="2" Grid.ColumnSpan="2" RadiusX="4" RadiusY="4"/>

<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" VerticalAlignment="Center" Margin="30,0,0,0" d:LayoutOverrides="Width" Opacity="0.7"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<ControlTemplate x:Key="PanelBarItemTopLevelTemplate" TargetType="telerik:RadPanelBarItem">

<Grid x:Name="RootElement">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2">

<VisualTransition.GeneratedEasingFunction>

<QuadraticEase EasingMode="EaseInOut"/>

</VisualTransition.GeneratedEasingFunction>

</VisualTransition>

</VisualStateGroup.Transitions>

<VisualState x:Name="Normal"/>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>

<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="arrow"/>

<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>

<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="arrow" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Header" d:IsOptimized="True"/>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOut"/>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Unselected"/>

<VisualState x:Name="Selected">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectVisual"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Header" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="arrow" d:IsOptimized="True"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStates">

<VisualState x:Name="Expanded">

<Storyboard>

<DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="Angle" Storyboard.TargetName="directionRotation"/>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Collapsed"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="LoadingOnDemandStates">

<VisualState x:Name="LoadingOnDemand"/>

</VisualStateGroup>

<VisualStateGroup x:Name="EditStates">

<VisualState x:Name="Display"/>

<VisualState x:Name="Edit"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="HeaderRow" Height="24">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Border x:Name="NormalVisual" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="5" BorderBrush="{StaticResource shinyblack_outline}">

<Border BorderBrush="{StaticResource shinyblack_normal}" BorderThickness="1" Background="{StaticResource shinyblack_normal}"/>

</Border>

<Border x:Name="MouseOverVisual" BorderBrush="{StaticResource shinyblack_outline}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">

<Border BorderBrush="{StaticResource shinyblack_innerborder}" BorderThickness="1" Background="{StaticResource shinyblack_mouseover}"/>

</Border>

<Border x:Name="SelectVisual" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0" BorderBrush="{StaticResource shinyblack_outline}">

<Border BorderThickness="1" Background="{StaticResource shinyblack_mouseover}" BorderBrush="{StaticResource shinyblack_mouseover}"/>

</Border>

<Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">

<Border x:Name="border" BorderBrush="Transparent" BorderThickness="1" Background="{StaticResource shinyblack_normal}"/>

</Border>

<Path x:Name="arrow" Grid.Column="4" Data="M1,1 L5.25,5.25 L9.5,1" HorizontalAlignment="Right" Margin="6,0" Opacity="0.8" RenderTransformOrigin="0.5 0.5" Stretch="None" Stroke="#FFD7D7D7" StrokeThickness="2" VerticalAlignment="Center" Height="6.25" Width="10.5" d:LayoutOverrides="GridBox">

<Path.RenderTransform>

<RotateTransform x:Name="directionRotation" Angle="0"/>

</Path.RenderTransform>

</Path>

<ContentPresenter x:Name="Header" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Height="14" Margin="8,0,0,0" Opacity="0.8"/>

<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="#FF000000" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>

</Grid>

<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">

<telerik:LayoutTransformControl x:Name="transformationRoot">

<ItemsPresenter/>

</telerik:LayoutTransformControl>

</Grid>

</ControlTemplate>

<ControlTemplate x:Key="PanelBarItemSecondLevelTemplate" TargetType="telerik:RadPanelBarItem">

<Grid x:Name="RootElement">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0:0:0.2" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOut">

<Storyboard>

<DoubleAnimation Duration="0:0:0.2" To="0.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Unselected"/>

<VisualState x:Name="Selected">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionVisual"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStates">

<VisualState x:Name="Expanded">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Collapsed"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="HeaderRow" Background="Transparent">

<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" Opacity="0">

<Border.CornerRadius>

<CornerRadius>1</CornerRadius>

</Border.CornerRadius>

<Border.BorderThickness>

<Thickness>1</Thickness>

</Border.BorderThickness>

<Border BorderBrush="#FFFFFFFF">

<Border.CornerRadius>

<CornerRadius>0</CornerRadius>

</Border.CornerRadius>

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

<Thickness>1</Thickness>

</Border.BorderThickness>

</Border>

<Border x:Name="SelectionVisual" BorderBrush="#FFFFC92B" Opacity="0">

<Border.CornerRadius>

<CornerRadius>1</CornerRadius>

</Border.CornerRadius>

<Border.BorderThickness>

<Thickness>1</Thickness>

</Border.BorderThickness>

<Border BorderBrush="#FFFFFFFF">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFCE79F" Offset="1"/>

<GradientStop Color="#FFFDD3A8"/>

</LinearGradientBrush>

</Border.Background>

<Border.CornerRadius>

<CornerRadius>0</CornerRadius>

</Border.CornerRadius>

<Border.BorderThickness>

<Thickness>1</Thickness>

</Border.BorderThickness>

</Border>

<Border x:Name="DisabledVisual" BorderBrush="#FF989898" Opacity="0">

<Border.CornerRadius>

<CornerRadius>1</CornerRadius>

</Border.CornerRadius>

<Border.BorderThickness>

<Thickness>1</Thickness>

</Border.BorderThickness>

<Border BorderBrush="Transparent" Background="#FFE0E0E0">

<Border.CornerRadius>

<CornerRadius>0</CornerRadius>

</Border.CornerRadius>

<Border.BorderThickness>

<Thickness>1</Thickness>

</Border.BorderThickness>

</Border>

<ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="#FF000000" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>

</Grid>

<Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">

<ItemsPresenter/>

</Grid>

</ControlTemplate>

<Style x:Key="SVG_RadPanelBarItem" TargetType="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="#FF000000"/>

<Setter Property="TabNavigation" Value="Once"/>

<Setter Property="IsTabStop" Value="True"/>

<Setter Property="Template" Value="{StaticResource PanelBarItemTopLevelTemplate}"/>

<Setter Property="Padding" Value="3"/>

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

<Setter Property="VerticalContentAlignment" Value="Stretch"/>

<Setter Property="ChildItemsTemplate" Value="{StaticResource PanelBarItemSecondLevelTemplate}"/>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<telerik:PanelBarPanel/>

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="RadPanelBarStyle1" TargetType="telerik:RadPanelBar">

<Setter Property="ExpandMode" Value="Single"/>

<Setter Property="IsTabStop" Value="true"/>

<Setter Property="VerticalAlignment" Value="Top"/>

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

<Setter Property="VerticalContentAlignment" Value="Stretch"/>

<Setter Property="Foreground" Value="#FF000000"/>

<Setter Property="UseLayoutRounding" Value="True"/>

<Setter Property="TabNavigation" Value="Once"/>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<telerik:PanelBarPanel/>

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadPanelBar">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="OrientationStates">

<VisualState x:Name="Vertical">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="0"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Horizontal">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="-90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="Disabled"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused"/>

<VisualState x:Name="Unfocused"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<telerik:LayoutTransformControl x:Name="transformationRoot">

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">

<ScrollViewer x:Name="ScrollViewer" telerik:ScrollViewerExtensions.EnableMouseWheel="True" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalScrollBarVisibility="Auto" IsTabStop="False" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">

<ItemsPresenter/>

</ScrollViewer>

</Border>

</telerik:LayoutTransformControl>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Orientation" Value="Vertical"/>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<telerik:RadPanelBar Height="340" Width="150" Background="{StaticResource shinyblack_expander_fill}" Foreground="{StaticResource shinyblack_outline}" BorderThickness="1" HorizontalAlignment="Left" Margin="130,70,0,0" Style="{StaticResource RadPanelBarStyle1}">

<telerik:RadPanelBarItem Header="Product" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" IsExpanded="True" Background="{x:Null}" BorderBrush="{x:Null}">

<StackPanel Margin="0,0,0,22" d:LayoutOverrides="Height">

<Grid Height="20" Width="130">

<HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Link" Margin="0"/>

<Image Height="12" Margin="10,2,0,2" Source="Document.png" HorizontalAlignment="Left"/>

</Grid>

<Grid Height="20" Width="130">

<HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Create"/>

<Image Height="12" Margin="10,2,0,2" Source="Wizard.png" HorizontalAlignment="Left"/>

</Grid>

<Grid Height="20" Width="130">

<HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Print"/>

<Image Height="12" Margin="10,2,0,2" Source="Printer.png" HorizontalAlignment="Left"/>

</Grid>

<Grid Height="20" Width="130">

<HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Load Set of Marks" Height="20" VerticalAlignment="Top"/>

<Image Height="12" Margin="10,2,0,2" Source="Target.png" HorizontalAlignment="Left"/>

</Grid>

</StackPanel>

</telerik:RadPanelBarItem>

<telerik:RadPanelBarItem Header="Sales Item" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" BorderBrush="{x:Null}" Background="{x:Null}">

<StackPanel>

<Grid Height="20" Width="130">

<HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Link" Margin="0"/>

<Image Height="12" Margin="10,2,0,2" Source="Document.png" HorizontalAlignment="Left"/>

</Grid>

<Grid Height="20" Width="130">

<HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Create"/>

<Image Height="12" Margin="10,2,0,2" Source="Wizard.png" HorizontalAlignment="Left"/>

</Grid>

<Grid Height="20" Width="130">

<HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Load Set of Marks"/>

<Image Height="12" Margin="10,2,0,2" Source="Target.png" HorizontalAlignment="Left"/>

</Grid>

</StackPanel>

</telerik:RadPanelBarItem>

<telerik:RadPanelBarItem Header="Client" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" Background="{x:Null}" BorderBrush="{x:Null}"/>

<telerik:RadPanelBarItem Header="User" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" BorderBrush="{x:Null}" Background="{x:Null}"/>

<telerik:RadPanelBarItem Header="Proposal" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" Background="{x:Null}" BorderBrush="{x:Null}"/>

<telerik:RadPanelBarItem Header="Invoice" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" Background="{x:Null}" BorderBrush="{x:Null}"/>

</telerik:RadPanelBar>

</Grid>

</UserControl>

Thanks,
Chester

PS: why is it the Attached FIle doesnt accept .zip files?

Accepted

answered on 05 Apr 2011, 06:19 PM

409070-PanelBarCustomStyle.zip

Hello Chester,

Since the RadPanelBar inherits the RadTreeView control, it is designed to display a hierarchy. Therefore when you define a StackPanel inside the RadPanelBarItem, this StackPanel is considered as the first item from the RadPanelBarItem.Items collection and therefore the StackPanel is wrapped in a RadPanelBarItem and the PanelBarItemSecondLevelTemplate ControlTemplate defines how it should be rendered. Therefore if you need to remove the MouseOver effect you can remove the MouseOver and MouseOut VisualStates from the PanelBarItemSecondLevelTemplate template. Furthermore, you might need to remove the SelectionStates as well.

However, if you need to see each HyperlinkButton as a different PanelBarItem and keep its MouseOver effect, you will have to change the definition of the RadPanelBarItems like so:

<telerik:RadPanelBarItem Header="Product"

FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro"

Foreground="#FFD7D7D7"

IsExpanded="True"

Background="{x:Null}"

BorderBrush="{x:Null}">

<telerik:RadPanelBarItem>

<telerik:RadPanelBarItem.Header>

<Grid HorizontalAlignment="Stretch">

<HyperlinkButton HorizontalAlignment="Stretch"

Foreground="{StaticResource shinyblack_outline}"

FontFamily="Myriad Web Pro"

Style="{StaticResource SVG_HyperlinkButtonStyle}"

Content="Link"

Margin="0" />

<Image Height="12"

Margin="10,2,0,2"

Source="Administration.png"

HorizontalAlignment="Left" />

</Grid>

</telerik:RadPanelBarItem.Header>

</telerik:RadPanelBarItem>

<telerik:RadPanelBarItem>

<telerik:RadPanelBarItem.Header>

<Grid Height="20"

Width="130">

<HyperlinkButton Width="130"

Foreground="{StaticResource shinyblack_outline}"

FontFamily="Myriad Web Pro"

Style="{StaticResource SVG_HyperlinkButtonStyle}"

Content="Create" />

<Image Height="12"

Margin="10,2,0,2"

Source="Administration.png"

HorizontalAlignment="Left" />

</Grid>

</telerik:RadPanelBarItem.Header>

</telerik:RadPanelBarItem>

<telerik:RadPanelBarItem>

<telerik:RadPanelBarItem.Header>

<Grid Height="20"

Width="130">

<HyperlinkButton Width="130"

Foreground="{StaticResource shinyblack_outline}"

FontFamily="Myriad Web Pro"

Style="{StaticResource SVG_HyperlinkButtonStyle}"

Content="Print" />

<Image Height="12"

Margin="10,2,0,2"

Source="Administration.png"

HorizontalAlignment="Left" />

</Grid>

</telerik:RadPanelBarItem.Header>

</telerik:RadPanelBarItem>

<telerik:RadPanelBarItem>

<telerik:RadPanelBarItem.Header>

<Grid Height="20"

Width="130">

<HyperlinkButton Width="130"

Foreground="{StaticResource shinyblack_outline}"

FontFamily="Myriad Web Pro"

Style="{StaticResource SVG_HyperlinkButtonStyle}"

Content="Load Set of Marks"

Height="20"

VerticalAlignment="Top" />

<Image Height="12"

Margin="10,2,0,2"

Source="Administration.png"

HorizontalAlignment="Left" />

</Grid>

</telerik:RadPanelBarItem.Header>

</telerik:RadPanelBarItem>

I attached a sample project illustrating the first approach. I hope it helps.

Greetings,
Tina Stancheva
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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Remove mouseover for radpanelitem

4 Answers, 1 is accepted