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

RadContextMenu in a RadDropDownButton - Issue with styles on sub-menus

1 Answer 122 Views

Buttons

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

This question is locked. New answers and comments are not allowed.

Jonathan asked on 26 Jan 2012, 05:53 PM

Hello,

I'm trying to use a RadDropDownButton as a menu. It was working fine with our styles until I added a couple of sub-menu items. Now the style does not seem to be applied correctly to the sub-menu items.
Any idea what I'm doing wrong please? I'm sure it's something simple I'm missing but I haven't been able to spot it yet. :)
(I've pasted the xaml and styles, etc below.)

Thanks in advance,
Jonathan

XAML for menu:

<telerik:RadDropDownButton KeepOpen="False" x:Name="MainMenuDropDown" CloseOnEscape="True" CloseOnEnter="True" HorizontalAlignment="Left" VerticalAlignment="Center" Width="80" Height="22" Content="File" Style="{StaticResource egRadDropDownButtonAppMenu}" Grid.Column="0" DropDownPlacement="Bottom" Margin="20,20,8,0" DropDownButtonPosition="Right">

<telerik:RadDropDownButton.DropDownContent>

<telerikNavigation:RadContextMenu HorizontalAlignment="Right" Margin="0,0,0,0" BorderThickness="0" Style="{StaticResource egRadContextMenu}">

<telerikNavigation:RadMenuItem Header="Option 1" Style="{StaticResource egRadMenuItem}" >

<telerikNavigation:RadMenuItem.Icon>

<Image Source="Images/OpenModel.png" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</telerikNavigation:RadMenuItem.Icon>

</telerikNavigation:RadMenuItem>

<telerikNavigation:RadMenuItem x:Name="mnuNewMaster" Header="Option 2" Style="{StaticResource egRadMenuItem}">

<telerikNavigation:RadMenuItem ItemContainerStyle="{StaticResource egRadMenuItem}" Style="{StaticResource egRadMenuItem}" Header="Sub-option 1" >

<telerikNavigation:RadMenuItem.Icon>

<Image Source="Images/NewModel.png" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</telerikNavigation:RadMenuItem.Icon>

</telerikNavigation:RadMenuItem>

<telerikNavigation:RadMenuItem Style="{StaticResource egRadMenuItem}" Header="Sub-option 2">

<telerikNavigation:RadMenuItem.Icon>

<Image Source="Images/NewModel.png" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</telerikNavigation:RadMenuItem.Icon>

</telerikNavigation:RadMenuItem>

<telerikNavigation:RadMenuItem Style="{StaticResource egRadMenuItem}" Header="Sub-option 3">

<telerikNavigation:RadMenuItem.Icon>

<Image Source="Images/NewModel.png" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</telerikNavigation:RadMenuItem.Icon>

</telerikNavigation:RadMenuItem>

<telerikNavigation:RadMenuItem Header="Option 3" Style="{StaticResource egRadMenuItem}">

<telerikNavigation:RadMenuItem.Icon>

<Image Source="Images/SaveModel.png" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</telerikNavigation:RadMenuItem.Icon>

</telerikNavigation:RadMenuItem>

<telerikNavigation:RadMenuItem Header="Option 4" Style="{StaticResource egRadMenuItem}">

<telerikNavigation:RadMenuItem.Icon>

<Image Source="Images/SaveAsNewModel.png" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</telerikNavigation:RadMenuItem.Icon>

</telerikNavigation:RadMenuItem>

</telerikNavigation:RadContextMenu>

</telerik:RadDropDownButton.DropDownContent>

</telerik:RadDropDownButton>

Styles:

<SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000"/>

<SolidColorBrush x:Key="CoreButtonOuterBorder"

Color="#bf000000" />

<SolidColorBrush x:Key="CoreButtonBackground"

Color="#bf000000" />

<SolidColorBrush x:Key="CoreButtonInnerBorder"

Color="#BF000000" />

<LinearGradientBrush x:Key="CoreButtonOuterBorder_Pressed"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FF8E8165"

Offset="0" />

<GradientStop Color="#FFC6C0B2"

Offset="1" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="CoreButtonBackground_Pressed"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFFCE79F"

Offset="1" />

<GradientStop Color="#FFF9932E"

Offset="0.51" />

<GradientStop Color="#FFFAAD5F"

Offset="0.5" />

<GradientStop Color="#FFFDD3A8"

Offset="0.07" />

<GradientStop Color="#FFeDc398"

Offset="0" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="CoreButtonInnerBorder_Pressed"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFB69A78"

Offset="0" />

<GradientStop Color="#FFFFD031"

Offset="0.13" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="CoreButtonOuterBorder_Over"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFDBCE99"

Offset="0" />

<GradientStop Color="#FFCCC4AC"

Offset="1" />

<GradientStop Color="#FFB89F73"

Offset="0.5" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="CoreButtonBackground_Over"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFFFE391"

Offset="1" />

<GradientStop Color="#FFFFFDEB"

Offset="0" />

<GradientStop Color="#FFFFD563"

Offset="0.51" />

<GradientStop Color="#FFFFEDB3"

Offset="0.5" />

</LinearGradientBrush>

<SolidColorBrush x:Key="CoreButtonInnerBorder_Over"

Color="#FFFFFDE6" />

<SolidColorBrush x:Key="RibbonButtonDropDownArrow"

Color="#ffffff" />

<SolidColorBrush x:Key="DropDownPopupBackgroundBrush"

Color="#bf000000" />

<SolidColorBrush x:Key="DropDownPopupBorderBrush"

Color="#bf000000" />

<SolidColorBrush x:Key="CoreButtonOuterBorder_Disabled"

Color="#FFAFAFAF" />

<SolidColorBrush x:Key="CoreButtonInnerBorder_Disabled"

Color="#FFE4E4E4" />

<SolidColorBrush x:Key="CoreButtonBackground_Disabled"

Color="#FFE4E4E4" />

<Style x:Key="egRadDropDownButton"

TargetType="telerik:RadDropDownButton">

<Setter Property="BorderThickness"

Value="1" />

<Setter Property="BorderBrush"

Value="{StaticResource CoreButtonOuterBorder}" />

<Setter Property="Background"

Value="{StaticResource CoreButtonBackground}" />

<Setter Property="Foreground"

Value="#ffffffff" />

<Setter Property="HorizontalContentAlignment"

Value="Center" />

<Setter Property="VerticalContentAlignment"

Value="Center" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadDropDownButton">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition From="MouseOver"

GeneratedDuration="00:00:00.1000000" />

</VisualStateGroup.Transitions>

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="mouseOverDecorator"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Duration="00:00:00.0010000"

Storyboard.TargetName="shine"

Storyboard.TargetProperty="(UIElement.Opacity)">

<EasingDoubleKeyFrame KeyTime="00:00:00"

Value="0.4" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Duration="00:00:00.0010000"

Storyboard.TargetName="buttonPressed"

Storyboard.TargetProperty="(UIElement.Opacity)">

<EasingDoubleKeyFrame KeyTime="00:00:00"

Value="0.8" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="backgroundDecorator"

Storyboard.TargetProperty="BorderBrush">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource CoreButtonOuterBorder_Disabled}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="IsOpenState">

<VisualState x:Name="Closed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<RotateTransform Angle="180" />

</TransformGroup>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Opened">

<Storyboard>

<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownDecorator" Storyboard.TargetProperty="Visibility">

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

</ObjectAnimationUsingKeyFrames>-->

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Duration="00:00:00.0010000"

Storyboard.TargetName="shine"

Storyboard.TargetProperty="(UIElement.Opacity)">

<EasingDoubleKeyFrame KeyTime="00:00:00"

Value="0.4" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Duration="00:00:00.0010000"

Storyboard.TargetName="buttonPressed"

Storyboard.TargetProperty="(UIElement.Opacity)">

<EasingDoubleKeyFrame KeyTime="00:00:00"

Value="0.8" />

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<RotateTransform Angle="0" />

</TransformGroup>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="DropDownButtonPosition">

<VisualState x:Name="DropDownButtonAtLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DropDownButtonAtTop">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DropDownButtonAtRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="2" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DropDownButtonAtBottom">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="2" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="PopupPlacementState">

<VisualState x:Name="PlacementBottom" />

<VisualState x:Name="PlacementTop">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<ScaleTransform ScaleX="1"

ScaleY="-1" />

</TransformGroup>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="PlacementLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<RotateTransform Angle="90" />

</TransformGroup>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="PlacementRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<RotateTransform Angle="-90" />

</TransformGroup>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="DropShadowVisibilityStates">

<VisualState x:Name="HasShadow" />

<VisualState x:Name="WithoutShadow" />

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused" />

<VisualState x:Name="Unfocused" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="backgroundDecorator"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="4">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="0.5*" />

</Grid.RowDefinitions>

<Border x:Name="mouseOverDecorator"

Opacity="0"

Grid.RowSpan="2"

BorderThickness="0"

CornerRadius="4">

<Border.Background>

<RadialGradientBrush GradientOrigin="0.5,1.0"

RadiusX="1"

RadiusY="1"

Center="0.5,1">

<GradientStop Color="#ffd10074"

Offset="0" />

<GradientStop Color="#00da1000"

Offset="1" />

</RadialGradientBrush>

</Border.Background>

</Border>

<Border x:Name="buttonPressed"

Opacity="0"

Grid.RowSpan="2"

BorderThickness="0"

CornerRadius="4">

<Border.Background>

<RadialGradientBrush GradientOrigin="0.5,1.0"

RadiusX="1"

RadiusY="1"

Center="0.5,1">

<GradientStop Color="#ff00ff00"

Offset="0" />

<GradientStop Color="#0000ff00"

Offset="1" />

</RadialGradientBrush>

</Border.Background>

</Border>

<Border x:Name="shine"

Margin="0"

BorderThickness="0"

CornerRadius="4,4,0,0">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#99FFFFFF"

Offset="0" />

<GradientStop Color="#33FFFFFF"

Offset="1" />

</LinearGradientBrush>

</Border.Background>

</Border>

</Grid>

</Border>

<Border x:Name="DropDownDecorator"

Visibility="Collapsed"

Background="{x:Null}"

BorderBrush="{StaticResource CoreButtonOuterBorder_Pressed}"

BorderThickness="1"

CornerRadius="2">

<Border Margin="0,0,0,0"

Background="{StaticResource CoreButtonBackground_Pressed}"

BorderBrush="{StaticResource CoreButtonInnerBorder_Pressed}"

BorderThickness="1"

CornerRadius="1" />

</Border>

<Border>

<Grid Margin="{TemplateBinding Padding}">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<ContentPresenter x:Name="ContentPresenter"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Grid.Column="1"

Grid.Row="1"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}"

Margin="4,-1,4,0" />

<Path x:Name="DropDownIndicator"

Fill="{StaticResource RibbonButtonDropDownArrow}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

IsHitTestVisible="False"

RenderTransformOrigin="0.5,0.5"

Visibility="{TemplateBinding DropDownIndicatorVisibility}"

Grid.Column="1"

Grid.Row="2"

Data="M 0,0 L 3.5,3.5 L 7,0"

Margin="1" />

</Grid>

</Border>

<telerikPrimitives:Popup x:Name="DropDownPopup">

<Grid>

<Border x:Name="DropDownPopupBorder"

Height="{TemplateBinding DropDownHeight}"

Margin="0,0,4,4"

MinHeight="3"

MinWidth="3"

Width="{TemplateBinding DropDownWidth}"

Background="{StaticResource DropDownPopupBackgroundBrush}"

BorderBrush="{StaticResource DropDownPopupBorderBrush}"

BorderThickness="1"

CornerRadius="2">

<ContentControl x:Name="DropDownPopupContent"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Content="{TemplateBinding DropDownContent}" />

</Border>

</Grid>

</telerikPrimitives:Popup>

<Rectangle x:Name="disabledDecorator"

Fill="#99FFFFFF"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="egRadDropDownButtonAppMenu"

TargetType="telerik:RadDropDownButton">

<Setter Property="BorderThickness"

Value="1" />

<Setter Property="BorderBrush"

Value="{StaticResource CoreButtonOuterBorder}" />

<Setter Property="Background"

Value="{StaticResource CoreButtonBackground}" />

<Setter Property="Foreground"

Value="#ffffffff" />

<Setter Property="HorizontalContentAlignment"

Value="Center" />

<Setter Property="VerticalContentAlignment"

Value="Center" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadDropDownButton">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition From="MouseOver"

GeneratedDuration="00:00:00.1000000" />

</VisualStateGroup.Transitions>

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="mouseOverDecorator"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Duration="00:00:00.0010000"

Storyboard.TargetName="shine"

Storyboard.TargetProperty="(UIElement.Opacity)">

<EasingDoubleKeyFrame KeyTime="00:00:00"

Value="0.4" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Duration="00:00:00.0010000"

Storyboard.TargetName="buttonPressed"

Storyboard.TargetProperty="(UIElement.Opacity)">

<EasingDoubleKeyFrame KeyTime="00:00:00"

Value="0.8" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="backgroundDecorator"

Storyboard.TargetProperty="BorderBrush">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource CoreButtonOuterBorder_Disabled}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="IsOpenState">

<VisualState x:Name="Closed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<RotateTransform Angle="0" />

</TransformGroup>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Opened">

<Storyboard>

<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownDecorator" Storyboard.TargetProperty="Visibility">

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

</ObjectAnimationUsingKeyFrames>-->

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Duration="00:00:00.0010000"

Storyboard.TargetName="shine"

Storyboard.TargetProperty="(UIElement.Opacity)">

<EasingDoubleKeyFrame KeyTime="00:00:00"

Value="0.4" />

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Duration="00:00:00.0010000"

Storyboard.TargetName="buttonPressed"

Storyboard.TargetProperty="(UIElement.Opacity)">

<EasingDoubleKeyFrame KeyTime="00:00:00"

Value="0.8" />

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<RotateTransform Angle="180" />

</TransformGroup>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="DropDownButtonPosition">

<VisualState x:Name="DropDownButtonAtLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DropDownButtonAtTop">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DropDownButtonAtRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="2" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DropDownButtonAtBottom">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="2" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="PopupPlacementState">

<VisualState x:Name="PlacementBottom" />

<VisualState x:Name="PlacementTop">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<RotateTransform Angle="0" />

</TransformGroup>

<!--<TransformGroup>

<ScaleTransform ScaleX="1"

ScaleY="-1" />

</TransformGroup>-->

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="PlacementLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<RotateTransform Angle="90" />

</TransformGroup>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="PlacementRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="RenderTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<TransformGroup>

<RotateTransform Angle="-90" />

</TransformGroup>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="DropShadowVisibilityStates">

<VisualState x:Name="HasShadow" />

<VisualState x:Name="WithoutShadow" />

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused" />

<VisualState x:Name="Unfocused" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="backgroundDecorator"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="4">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="0.5*" />

</Grid.RowDefinitions>

<Border x:Name="mouseOverDecorator"

Opacity="0"

Grid.RowSpan="2"

BorderThickness="0"

CornerRadius="4">

<Border.Background>

<RadialGradientBrush GradientOrigin="0.5,1.0"

RadiusX="1"

RadiusY="1"

Center="0.5,1">

<GradientStop Color="#ffd10074"

Offset="0" />

<GradientStop Color="#00da1000"

Offset="1" />

</RadialGradientBrush>

</Border.Background>

</Border>

<Border x:Name="buttonPressed"

Opacity="0"

Grid.RowSpan="2"

BorderThickness="0"

CornerRadius="4">

<Border.Background>

<RadialGradientBrush GradientOrigin="0.5,1.0"

RadiusX="1"

RadiusY="1"

Center="0.5,1">

<GradientStop Color="#ff00ff00"

Offset="0" />

<GradientStop Color="#0000ff00"

Offset="1" />

</RadialGradientBrush>

</Border.Background>

</Border>

<Border x:Name="shine"

Margin="0"

BorderThickness="0"

CornerRadius="4,4,0,0">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#99FFFFFF"

Offset="0" />

<GradientStop Color="#33FFFFFF"

Offset="1" />

</LinearGradientBrush>

</Border.Background>

</Border>

</Grid>

</Border>

<Border x:Name="DropDownDecorator"

Visibility="Collapsed"

Background="{x:Null}"

BorderBrush="{StaticResource CoreButtonOuterBorder_Pressed}"

BorderThickness="1"

CornerRadius="2">

<Border Margin="0,0,0,0"

Background="{StaticResource CoreButtonBackground_Pressed}"

BorderBrush="{StaticResource CoreButtonInnerBorder_Pressed}"

BorderThickness="1"

CornerRadius="1" />

</Border>

<Border>

<Grid Margin="{TemplateBinding Padding}">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<ContentPresenter x:Name="ContentPresenter"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Grid.Column="1"

Grid.Row="1"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}"

Margin="4,-1,4,0" />

<Path x:Name="DropDownIndicator"

Fill="{StaticResource RibbonButtonDropDownArrow}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

IsHitTestVisible="False"

RenderTransformOrigin="0.5,0.5"

Visibility="{TemplateBinding DropDownIndicatorVisibility}"

Grid.Column="1"

Grid.Row="2"

Data="M 0,0 L 3.5,3.5 L 7,0"

Margin="1" />

</Grid>

</Border>

<telerikPrimitives:Popup x:Name="DropDownPopup">

<Grid>

<Border x:Name="DropDownPopupBorder"

Height="{TemplateBinding DropDownHeight}"

Margin="0,0,4,4"

MinHeight="3"

MinWidth="3"

Width="{TemplateBinding DropDownWidth}"

Background="{StaticResource DropDownPopupBackgroundBrush}"

BorderBrush="{StaticResource DropDownPopupBorderBrush}"

BorderThickness="1"

CornerRadius="2">

<ContentControl x:Name="DropDownPopupContent"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Content="{TemplateBinding DropDownContent}" />

</Border>

</Grid>

</telerikPrimitives:Popup>

<Rectangle x:Name="disabledDecorator"

Fill="#99FFFFFF"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<SolidColorBrush x:Key="RadMenuPopUp"

Color="#bf000000" />

<Thickness x:Key="RadMenuPopUpOuterBorderThickness">1</Thickness>

<SolidColorBrush x:Key="RadMenuForeground"

Color="#FFffffff" />

<LinearGradientBrush x:Key="RadMenuPopUpOuterBorder"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFEAEAEA"

Offset="0" />

<GradientStop Color="#FFC4C4C4"

Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="RadMenuPopUpInnerBorder"

Color="#FFB2B2B2" />

<Thickness x:Key="RadMenuPopUpInnerBorderThickness">1</Thickness>

<SolidColorBrush x:Key="RadMenuPopUpLeftColumnInnerBorder"

Color="#FFe2e0e3" />

<SolidColorBrush x:Key="RadMenuPopUpLeftColumnBackground"

Color="#e2e2e2" />

<SolidColorBrush x:Key="RadMenuPopUpLeftColumnOuterBorder"

Color="#7FFFFFFF" />

<CornerRadius x:Key="RadMenuPopUpInnerBorderCornerRadius">1</CornerRadius>

<CornerRadius x:Key="RadMenuPopUpOuterBorderCornerRadius">2</CornerRadius>

<Style x:Key="egRadContextMenu"

TargetType="telerikNavigation:RadContextMenu">

<Setter Property="Background"

Value="{StaticResource RadMenuPopUp}" />

<Setter Property="VerticalContentAlignment"

Value="Center" />

<Setter Property="BorderThickness"

Value="{StaticResource RadMenuPopUpOuterBorderThickness}" />

<Setter Property="Foreground"

Value="{StaticResource RadMenuForeground}" />

<Setter Property="BorderBrush"

Value="{StaticResource RadMenuPopUpOuterBorder}" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikNavigation:RadContextMenu">

<Border x:Name="DropDownBorder"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpOuterBorderCornerRadius}">

<Border x:Name="backgroundBorder"

Background="{TemplateBinding Background}"

BorderBrush="{StaticResource RadMenuPopUpInnerBorder}"

BorderThickness="{StaticResource RadMenuPopUpInnerBorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpInnerBorderCornerRadius}">

<Grid>

<Border HorizontalAlignment="Left"

Width="25"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnInnerBorder}"

BorderThickness="0 0 1 0">

<Border Width="24"

Background="{StaticResource RadMenuPopUpLeftColumnBackground}"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnOuterBorder}"

BorderThickness="0 0 1 0" />

</Border>

<ItemsPresenter Margin="{TemplateBinding Padding}" />

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Thickness x:Key="RadMenuTabMargin">2</Thickness>

<LinearGradientBrush x:Key="RadMenuTabBackground"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFFDDB73"

Offset="1" />

<GradientStop Color="#FFFEF4CA"

Offset="0" />

</LinearGradientBrush>

<SolidColorBrush x:Key="RadMenuTabBorder"

Color="#FFFFBC6B" />

<Thickness x:Key="RadMenuTabBorderThickness">1</Thickness>

<CornerRadius x:Key="RadMenuTabCornerRadius">0</CornerRadius>

<Thickness x:Key="RadMenuTabContentMargin">8,2,8,0</Thickness>

<Thickness x:Key="RadMenuTabContentPadding">0</Thickness>

<SolidColorBrush x:Key="RadMenuPopUp2"

Color="#FFf5f5f5" />

<SolidColorBrush x:Key="RadMenuNavigationDisabledBackground"

Color="#99FFFFFF" />

<SolidColorBrush x:Key="RadMenuTabBorder_pressed"

Color="#FFFA8C3B" />

<LinearGradientBrush x:Key="RadMenuTabBackground_pressed"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFFEB85D"

Offset="1" />

<GradientStop Color="#FFFB933C"

Offset="0" />

</LinearGradientBrush>

<ControlTemplate x:Key="TopLevelHeaderTemplate"

TargetType="telerikNavigation:RadMenuItem">

<Grid x:Name="RootElement"

Background="Transparent">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStateGroup">

<VisualState x:Name="Highlighted">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Bg"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Bg"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Bg"

Storyboard.TargetProperty="BorderBrush">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource RadMenuTabBorder_pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Bg"

Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource RadMenuTabBackground_pressed}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="DisabledBox"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Content"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0.33" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Normal" />

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStateGroup">

<VisualState x:Name="Checked">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Icon"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="GlyphPanel"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked" />

<VisualState x:Name="HideIcon">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Icon"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}" />

<Border x:Name="Bg"

Margin="{StaticResource RadMenuTabMargin}"

Opacity="0"

Background="{StaticResource RadMenuTabBackground}"

BorderBrush="{StaticResource RadMenuTabBorder}"

BorderThickness="{StaticResource RadMenuTabBorderThickness}"

CornerRadius="{StaticResource RadMenuTabCornerRadius}" />

<Border Padding="{StaticResource RadMenuTabContentPadding}">

<telerik:RadDockPanel MinHeight="24">

<ContentPresenter x:Name="Icon"

Margin="4,0,0,0"

VerticalAlignment="Center"

Content="{TemplateBinding Icon}" />

<Path x:Name="GlyphPanel"

Fill="{TemplateBinding Foreground}"

Margin="4,0,0,0"

VerticalAlignment="Center"

Visibility="Collapsed"

Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" />

<ContentPresenter x:Name="Content"

Cursor="{TemplateBinding Cursor}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{StaticResource RadMenuTabContentMargin}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

</telerik:RadDockPanel>

</Border>

<Popup x:Name="PART_Popup">

<Border x:Name="DropDownBorder"

Background="{Binding BorderBrush, ElementName=backgroundBorder}"

BorderBrush="{StaticResource RadMenuPopUpOuterBorder}"

BorderThickness="{StaticResource RadMenuPopUpOuterBorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpOuterBorderCornerRadius}">

<Border x:Name="backgroundBorder"

Background="{StaticResource RadMenuPopUp2}"

BorderBrush="{StaticResource RadMenuPopUpInnerBorder}"

BorderThickness="{StaticResource RadMenuPopUpInnerBorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpInnerBorderCornerRadius}">

<Grid>

<Border HorizontalAlignment="Left"

Width="25"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnInnerBorder}"

BorderThickness="0 0 1 0">

<Border Width="24"

Background="{StaticResource RadMenuPopUpLeftColumnBackground}"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnOuterBorder}"

BorderThickness="0 0 1 0" />

</Border>

<ItemsPresenter />

</Grid>

</Border>

</Popup>

<Rectangle x:Name="DisabledBox"

Fill="{StaticResource RadMenuNavigationDisabledBackground}"

IsHitTestVisible="False"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

<ControlTemplate x:Key="TopLevelItemTemplate"

TargetType="telerikNavigation:RadMenuItem">

<Grid x:Name="RootElement"

Background="Transparent">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStateGroup">

<VisualState x:Name="Highlighted">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Bg"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Bg"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Bg"

Storyboard.TargetProperty="BorderBrush">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource RadMenuTabBorder_pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Bg"

Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource RadMenuTabBackground_pressed}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="DisabledBox"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Content"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0.33" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Normal" />

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStateGroup">

<VisualState x:Name="Checked">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Icon"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="GlyphPanel"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked" />

<VisualState x:Name="HideIcon">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Icon"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}" />

<Border x:Name="Bg"

Margin="{StaticResource RadMenuTabMargin}"

Opacity="0"

Background="{StaticResource RadMenuTabBackground}"

BorderBrush="{StaticResource RadMenuTabBorder}"

BorderThickness="{StaticResource RadMenuTabBorderThickness}"

CornerRadius="{StaticResource RadMenuTabCornerRadius}" />

<Border Padding="{StaticResource RadMenuTabContentPadding}">

<telerik:RadDockPanel MinHeight="24">

<ContentPresenter x:Name="Icon"

HorizontalAlignment="Center"

Margin="4,0,0,0"

VerticalAlignment="Center"

Content="{TemplateBinding Icon}" />

<Path x:Name="GlyphPanel"

Fill="{TemplateBinding Foreground}"

Margin="4,0,0,0"

VerticalAlignment="Center"

Visibility="Collapsed"

Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" />

<ContentPresenter x:Name="Content"

Cursor="{TemplateBinding Cursor}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{StaticResource RadMenuTabContentMargin}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

</telerik:RadDockPanel>

</Border>

<Rectangle x:Name="DisabledBox"

Fill="{StaticResource RadMenuNavigationDisabledBackground}"

IsHitTestVisible="False"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

<Thickness x:Key="RadMenuNavigationMargin">2 1</Thickness>

<CornerRadius x:Key="RadMenuNavigationCornerRadius">2</CornerRadius>

<LinearGradientBrush x:Key="NavigationMouseoverFill"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#BFFFADD4"

Offset="0" />

<GradientStop Color="#BFD1078C"

Offset="1" />

<GradientStop Color="#BFD67FBE"

Offset="0.5" />

<GradientStop Color="#BFD10074"

Offset="0.51" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="NavigationMouseoverStroke"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFE8E0C2"

Offset="0" />

<GradientStop Color="#FFE6E2D0"

Offset="1" />

</LinearGradientBrush>

<ControlTemplate x:Key="SubMenuHeaderTemplate"

TargetType="telerikNavigation:RadMenuItem">

<Grid x:Name="RootElement"

Background="Transparent">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStateGroup">

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource NavigationMouseoverFill}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="BorderBrush">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource NavigationMouseoverStroke}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="DisabledBox"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0"

Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="Opacity"

To="0" />

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Content"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0.33" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Normal">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Transparent" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStateGroup">

<VisualState x:Name="Checked">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Icon"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="GlyphPanel"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked" />

<VisualState x:Name="HideIcon">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Icon"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Rectangle x:Name="Bg"

Fill="{TemplateBinding Background}"

Stroke="{TemplateBinding BorderBrush}"

StrokeThickness="1" />

<Border x:Name="InnerBorder"

Margin="{StaticResource RadMenuNavigationMargin}"

Background="Transparent"

BorderThickness="1"

CornerRadius="{StaticResource RadMenuNavigationCornerRadius}" />

<Grid MinHeight="26">

<Grid.ColumnDefinitions>

<ColumnDefinition MinWidth="24"

Width="Auto" />

<ColumnDefinition Width="4" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="37" />

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="17" />

</Grid.ColumnDefinitions>

<ContentPresenter x:Name="Icon"

HorizontalAlignment="Center"

Margin="1,0,0,0"

VerticalAlignment="Center"

Content="{TemplateBinding Icon}" />

<Path x:Name="GlyphPanel"

Fill="{TemplateBinding Foreground}"

Height="11"

Margin="1,0,0,0"

Width="9"

Visibility="Collapsed"

Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" />

<ContentPresenter x:Name="Content"

Cursor="{TemplateBinding Cursor}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Grid.Column="2"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

<Path Fill="{TemplateBinding Foreground}"

Margin="1,0,0,0"

VerticalAlignment="Center"

Width="9"

Grid.Column="5"

Data="M 0,0 L 4,3.5 L 0,7 Z" />

</Grid>

<Popup x:Name="PART_Popup"

HorizontalOffset="-3"

VerticalOffset="-2">

<Border x:Name="DropDownBorder"

Background="{Binding BorderBrush, ElementName=backgroundBorder}"

BorderBrush="{StaticResource RadMenuPopUpOuterBorder}"

BorderThickness="{StaticResource RadMenuPopUpOuterBorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpOuterBorderCornerRadius}">

<Border x:Name="backgroundBorder"

Background="{StaticResource RadMenuPopUp2}"

BorderBrush="{StaticResource RadMenuPopUpInnerBorder}"

BorderThickness="{StaticResource RadMenuPopUpInnerBorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpInnerBorderCornerRadius}">

<Grid>

<Border HorizontalAlignment="Left"

Width="25"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnInnerBorder}"

BorderThickness="0 0 1 0">

<Border Width="24"

Background="{StaticResource RadMenuPopUpLeftColumnBackground}"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnOuterBorder}"

BorderThickness="0 0 1 0" />

</Border>

<ItemsPresenter />

</Grid>

</Border>

</Popup>

<Rectangle x:Name="DisabledBox"

Fill="{StaticResource RadMenuNavigationDisabledBackground}"

IsHitTestVisible="False"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

<ControlTemplate x:Key="SubMenuItemTemplate"

TargetType="telerikNavigation:RadMenuItem">

<Grid x:Name="RootElement"

Background="Transparent">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStateGroup">

<VisualState x:Name="Highlighted">

<Storyboard>

<DoubleAnimation Duration="0"

Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="Opacity"

To="1" />

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="DisabledBox"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0"

Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="Opacity"

To="0" />

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Content"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0.33" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Normal" />

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStateGroup">

<VisualState x:Name="Checked">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Icon"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="GlyphPanel"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked" />

<VisualState x:Name="HideIcon">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Icon"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<!--<Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>-->

<Border x:Name="InnerBorder"

Margin="{StaticResource RadMenuNavigationMargin}"

Opacity="0"

Background="{StaticResource NavigationMouseoverFill}"

BorderBrush="{StaticResource NavigationMouseoverStroke}"

BorderThickness="1"

CornerRadius="{StaticResource RadMenuNavigationCornerRadius}" />

<Grid MinHeight="26">

<Grid.ColumnDefinitions>

<ColumnDefinition MinWidth="24"

Width="Auto" />

<ColumnDefinition Width="4" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="37" />

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="17" />

</Grid.ColumnDefinitions>

<ContentPresenter x:Name="Icon"

Margin="1,0,0,0"

VerticalAlignment="Center"

Content="{TemplateBinding Icon}" />

<Path x:Name="GlyphPanel"

Fill="{TemplateBinding Foreground}"

Height="11"

Margin="1,0,0,0"

Width="9"

Visibility="Collapsed"

Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" />

<ContentPresenter x:Name="Content"

Cursor="{TemplateBinding Cursor}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Grid.Column="2"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

</Grid>

<Rectangle x:Name="DisabledBox"

Fill="{StaticResource RadMenuNavigationDisabledBackground}"

IsHitTestVisible="False"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

<SolidColorBrush x:Key="RadMenuItemSeparatorTopStroke"

Color="#FFe2e0e3" />

<SolidColorBrush x:Key="RadMenuItemSeparatorBottomStroke"

Color="#7FFFFFFF" />

<ControlTemplate x:Key="SeparatorTemplate"

TargetType="telerikNavigation:RadMenuItem">

<Grid>

<Rectangle Fill="{StaticResource RadMenuItemSeparatorTopStroke}"

Height="1"

Margin="24,6,1,5" />

<Rectangle Fill="{StaticResource RadMenuItemSeparatorBottomStroke}"

Height="1"

Margin="25,7,1,4" />

<Rectangle x:Name="Bg"

Fill="{TemplateBinding Background}"

Stroke="{TemplateBinding BorderBrush}"

StrokeThickness="1" />

</Grid>

</ControlTemplate>

<Style x:Key="egRadMenuItem"

TargetType="telerikNavigation:RadMenuItem">

<Setter Property="TopLevelHeaderTemplateKey"

Value="{StaticResource TopLevelHeaderTemplate}" />

<Setter Property="TopLevelItemTemplateKey"

Value="{StaticResource TopLevelItemTemplate}" />

<Setter Property="SubmenuHeaderTemplateKey"

Value="{StaticResource SubMenuHeaderTemplate}" />

<Setter Property="SubmenuItemTemplateKey"

Value="{StaticResource SubMenuItemTemplate}" />

<Setter Property="SeparatorTemplateKey"

Value="{StaticResource SeparatorTemplate}" />

<Setter Property="Template"

Value="{StaticResource SubMenuItemTemplate}" />

<Setter Property="Padding"

Value="2 0 0 0" />

<Setter Property="HorizontalContentAlignment"

Value="Left" />

<Setter Property="VerticalContentAlignment"

Value="Center" />

<Setter Property="BorderThickness"

Value="1" />

</Style>

1 Answer, 1 is accepted

answered on 31 Jan 2012, 03:33 PM

Hello Jonathan,

You should change the background style of the Border with name: "backgroundBorder" in SubMenuHeaderTemplate. Currently it is set like this:

<Popup x:Name="PART_Popup"

HorizontalOffset="-3"

VerticalOffset="-2">

<Border x:Name="DropDownBorder"

Background="{Binding BorderBrush, ElementName=backgroundBorder}"

BorderBrush="{StaticResource RadMenuPopUpOuterBorder}"

BorderThickness="{StaticResource RadMenuPopUpOuterBorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpOuterBorderCornerRadius}">

<Border x:Name="backgroundBorder"

Background="{StaticResource RadMenuPopUp2}"

BorderBrush="{StaticResource RadMenuPopUpInnerBorder}"

BorderThickness="{StaticResource RadMenuPopUpInnerBorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpInnerBorderCornerRadius}">

<Grid>

<Border HorizontalAlignment="Left"

Width="25"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnInnerBorder}"

BorderThickness="0 0 1 0">

<Border Width="24"

Background="{StaticResource RadMenuPopUpLeftColumnBackground}"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnOuterBorder}"

BorderThickness="0 0 1 0" />

</Border>

<ItemsPresenter />

</Grid>

</Border>

</Popup>

It should be modified like this:

<Popup x:Name="PART_Popup"

HorizontalOffset="-3"

VerticalOffset="-2">

<Border x:Name="DropDownBorder"

Background="{Binding BorderBrush, ElementName=backgroundBorder}"

BorderBrush="{StaticResource RadMenuPopUpOuterBorder}"

BorderThickness="{StaticResource RadMenuPopUpOuterBorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpOuterBorderCornerRadius}">

<Border x:Name="backgroundBorder"

Background="{StaticResource DropDownPopupBackgroundBrush}"

BorderBrush="{StaticResource RadMenuPopUpInnerBorder}"

BorderThickness="{StaticResource RadMenuPopUpInnerBorderThickness}"

CornerRadius="{StaticResource RadMenuPopUpInnerBorderCornerRadius}">

<Grid>

<Border HorizontalAlignment="Left"

Width="25"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnInnerBorder}"

BorderThickness="0 0 1 0">

<Border Width="24"

Background="{StaticResource RadMenuPopUpLeftColumnBackground}"

BorderBrush="{StaticResource RadMenuPopUpLeftColumnOuterBorder}"

BorderThickness="0 0 1 0" />

</Border>

<ItemsPresenter />

</Grid>

</Border>

</Popup>

Hope this helps.

Greetings,
Yana
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>