Menu Item MouseOver style

[Emma]

Hi, I am trying to get my menu item text to chnage colour when the mouse is moved over them.
I have tried several things and a solution is not jumping out at me from the dll.

Currently I am trying to use:

<VisualState x:Name="Highlighted">

<Storyboard>

 

<ObjectAnimationUsingKeyFrames

 

Storyboard.TargetName="TextElement"

 

Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Orange" />

 

</ObjectAnimationUsingKeyFrames>

 

</Storyboard>

 

</VisualState>

Within the control template for MenuItemTopLevelSingleControlTemplate. Is that the right one?

 

I know its going into the event because if i change the property to an invalid one, i get a parser error on roll-over.

Any ideas would be appreciated. I am using Silverlight 4 and dll version 4
Thanks

 

[Pana]

Hi Emma,

Can you post the whole style? What is this "TextElement" - ContentPresenter, ContentControl or TextBlock?

Greetings,
Panayot
the Telerik team

[Emma]

TextElement is a TextBlock. The below control template is used as a template for the RadMenuItem, which is used to extend a custom menu control.

<CustomMenu:MenuItemStyleSelector
    x:Key="MenuItemStyleSelector"
    TopLevelParent="{StaticResource MenuItemTopLevelParentStyle}"
    TopLevelSingle="{StaticResource MenuItemTopLevelSingleStyle}"
    SubLevel="{StaticResource MenuItemSubLevelStyle}" />

<Style
        x:Key="MenuItemTopLevelSingleStyle"
        TargetType="telerikNavigation:RadMenuItem">
        <Setter
            Property="Cursor"
            Value="Hand" />
        <Setter
            Property="Template"
            Value="{StaticResource MenuItemTopLevelSingleControlTemplate}" />
        <Setter
            Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel
                        Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<ControlTemplate
        x:Key="MenuItemTopLevelSingleControlTemplate"
        TargetType="telerikNavigation:RadMenuItem">
        <Grid>

            <Rectangle
                x:Name="BackgroundVisual"
                Fill="{StaticResource MenuItemTopLevel_MouseOver}"
                Opacity="0" />
            <TextBlock
                x:Name="TextElement"
                Text="{Binding Text}"
                TextDecorations="None"
                Height="21"
                Foreground="{StaticResource MenuItemForeground}"
                Margin="10,5,10,5"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                FontSize="12"
                Visibility="Visible"/>

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup
                    x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition
                            GeneratedDuration="0:0:0.2" />
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Highlighted">
                        <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="TextElement"
                                Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OrangeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState
                        x:Name="Unfocused" />
                    <VisualState
                        x:Name="Focused">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames
                                Storyboard.TargetName="BackgroundVisual"
                                Storyboard.TargetProperty="Opacity">
                                <LinearDoubleKeyFrame
                                    KeyTime="00:00:00.1"
                                    Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

        </Grid>
    </ControlTemplate>

I hope that makes sense, i can't see why its not working. I have other instances doing similar things, like Hyperlink foreground colours changing but i just can't get this one to work.
Thanks for your help

[Pana]

Hi Emma,

The RadMenuItem states are:

<VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Disabled" />
    <VisualState x:Name="Highlighted" />
    <VisualState x:Name="Normal" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
    <VisualState x:Name="Unfocused" />
    <VisualState x:Name="Focused" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
    <VisualState x:Name="Checked" />
    <VisualState x:Name="Unchecked" />
    <VisualState x:Name="HideIcon" />
</VisualStateGroup>

You have:

<VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Highlighted" />
    <VisualState x:Name="Unfocused" />
    <VisualState x:Name="Focused" />
</VisualStateGroup>

You can not mix VisualStates from different VisualStateGroups that way. The RadMenu will go to one of the CommonStates, one of the FocusStates and one of the CheckedStates any time the states update. So I believe it goes to Highlighted and then to Focused or Unfocused but since you have put them in the same group only one of them can be active at a time. So the Focus or Unfocused win over Highlighted or something like that. Put the Highlighted in separate group and add Normal state in the same group where the Highlighted is.

Sincerely yours,
Panayot
the Telerik team

[Emma]

<VisualStateManager.VisualStateGroups>
                <VisualStateGroup
                    x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition
                            GeneratedDuration="0:0:0.2" />
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Highlighted">
                        <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="TextElement"
                                Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OrangeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Normal" />
                </VisualStateGroup>

                <VisualStateGroup x:Name="FocusStates">
                    <VisualState
                        x:Name="Unfocused" />
                    <VisualState
                        x:Name="Focused">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames
                                Storyboard.TargetName="BackgroundVisual"
                                Storyboard.TargetProperty="Opacity">
                                <LinearDoubleKeyFrame
                                    KeyTime="00:00:00.1"
                                    Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

It now looks like that but it didn't have any effect. I did try putting the storyboard code in the Normal state, aswell, and it did start off orange and when you rolled-over it it briefly went to black and then back to orange. I take the code out of Highlighted and leave it in Normal it doesn't change. So the highlighted state is doing something. Any ideas?
Thanks

[Pana]

Hello Emma,

Can you send me the XAML with the menu itself? I want to know how do you define the RadMenu and RadMenuItems in your project.

Regards,
Panayot
the Telerik team

[Emma]

<UserControl
    x:Class="Internal.SupportSystem.Client.Screens.Root.RootCanvas"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">

    <UserControl.Resources>
        <telerik:HierarchicalDataTemplate
            x:Key="MenuItemTemplate"
            ItemsSource="{Binding MenuItems}">
            <telerik:ContainerBinding.ContainerBindings>
                <telerik:ContainerBindingCollection>
                    <telerik:ContainerBinding
                        PropertyName="Content"
                        Binding="{Binding Text}" />
                    <telerik:ContainerBinding
                        PropertyName="IsSeparator"
                        Binding="{Binding IsSeparator}" />
                </telerik:ContainerBindingCollection>
            </telerik:ContainerBinding.ContainerBindings>
        </telerik:HierarchicalDataTemplate>
    </UserControl.Resources>
    <Grid
        Background="White">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Width="Auto" />
                <ColumnDefinition
                    Width="*" />
            </Grid.ColumnDefinitions>

            <Grid
                Visibility="{Binding ShowMenu, Converter={StaticResource CollapsedOnFalseConverter}}">
                <Grid.RowDefinitions>
                    <RowDefinition
                        Height="Auto" />
                    <RowDefinition
                        Height="1*" />
                </Grid.RowDefinitions>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition
                            Height="Auto" />
                        <RowDefinition
                            Height="Auto" />
                        <RowDefinition
                            Height="Auto" />
                        <RowDefinition
                            Height="Auto" />
                    </Grid.RowDefinitions>
                    <Image
                        Grid.Row="0"
                        Width="130"
                        Height="67"
                        Margin="8,4,8,4"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left"
                        Source="" />
                    <TextBlock
                        Grid.Row="1"
                        Margin="8,4,8,2"
                        FontSize="14"
                        Text="" />
                    <TextBlock
                        Grid.Row="2"
                        Margin="8,0,8,8"
                        FontSize="16"
                        FontWeight="SemiBold"
                        Text="" />
                    <Border
                        Grid.Row="3"
                        BorderBrush="#626469"
                        BorderThickness="0,1,0,1"
                        Background="#E55425">
                        <StackPanel
                            Orientation="Vertical">
                            <TextBlock
                                Margin="8,10,4,2"
                                FontSize="11"
                                Text="Logged in as:"
                                FontWeight="SemiBold"
                                Foreground="White"/>
                            <TextBlock
                                Margin="8,4,4,10"
                                FontSize="11"
                                Text="{Binding UserLoginName}"
                                Foreground="White"/>
                            <HyperlinkButton
                                Margin="10,0,0,0"
                                Click="LogOutButton_Click"
                                Style="{StaticResource WhiteHyperlink}"
                                Content="Log Out"/>
                            <HyperlinkButton
                                Margin="10,0,0,0"
                                Click="ChangePasswordButton_Click"
                                Style="{StaticResource WhiteHyperlink}"
                                Content="Change Password"/>
                        </StackPanel>
                    </Border>
                </Grid>
            </Grid>
            <Border
                Grid.Column="1"
                BorderBrush="#626469"
                BorderThickness="1,0,0,0">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition
                            Height="Auto" />
                        <RowDefinition
                            Height="Auto" />
                        <RowDefinition
                            Height="*" />
                    </Grid.RowDefinitions>
                    <!--Style="{StaticResource MenuStyle}"-->
                    <telerikNavigation:RadMenu
                        Grid.Row="0"
                        Margin="0"
                        Visibility="{Binding ShowMenu, Converter={StaticResource CollapsedOnFalseConverter}}"
                        HorizontalAlignment="Right"
                        HorizontalContentAlignment="Right"
                        MinWidth="640"
                        ItemsSource="{Binding MenuItems}"
                        ItemTemplate="{StaticResource MenuItemTemplate}"
                        ItemClick="RadMenu_ItemClick"
                        ItemContainerStyleSelector="{StaticResource MenuItemStyleSelector}">
                    </telerikNavigation:RadMenu>
                    <TextBlock
                        Grid.Row="1"
                        HorizontalAlignment="Stretch"
                        Padding="10,8,10,8"
                        Margin="0,0,0,4"
                        FontSize="13"
                        FontWeight="SemiBold"
                        Text="{Binding CurrentScreenName}"
                        Foreground="#E55425" />
                    <Grid
                        Grid.Row="2"
                        x:Name="ContentGrid"
                        Background="White"
                        x:FieldModifier="private"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch" />
                </Grid>
            </Border>
        </Grid>
    </Grid>
</UserControl>

Thats the XAML for the page

[Pana]

Hello Emma,

Here is an example of menu that has Foreground chaged to Red on Highlighted. I do not know why your menu does not work.

<UserControl
    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" xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls" xmlns:Telerik_Windows_Controls_Animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
    x:Class="SilverlightApplication1.MainPage"
    Width="640" Height="480">

    <UserControl.Resources>
        <Thickness x:Key="MenuItemPadding">6 2</Thickness>
        <SolidColorBrush x:Key="PanelBorderBrush" Color="#FF848484"/>
        <CornerRadius x:Key="SplitButton_SpanCornerRadius">1</CornerRadius>
        <telerik:Office_BlackTheme x:Key="Theme"/>
        <SolidColorBrush x:Key="MenuPopupOuterBorder" Color="#FF848484"/>
        <SolidColorBrush x:Key="MenuPopupBackground" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="MenuPopupIconsBackground" Color="#FFF0F0F0"/>
        <SolidColorBrush x:Key="MenuPopupIconsSeparatorLeft" Color="#FF848484"/>
        <SolidColorBrush x:Key="MenuPopupIconsSeparatorRight" Color="Transparent"/>
        <Thickness x:Key="MenuPopupIconsSeparatorMargin">27 0 0 0</Thickness>
        <Thickness x:Key="MenuTopLevelItemMargin">2</Thickness>
        <ControlTemplate x:Key="TopLevelHeaderTemplate" TargetType="telerik:RadMenuItem">
            <Grid x:Name="RootElement" Margin="{StaticResource MenuTopLevelItemMargin}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Highlighted">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Red" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">
                                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="Focused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked"/>
                        <VisualState x:Name="HideIcon">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsHighlighted}" RenderPressed="{TemplateBinding IsSubmenuOpen}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                <Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Path x:Name="Tick" Grid.Column="0" 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" Fill="{TemplateBinding Foreground}" Margin="0 0 4 0" Visibility="Collapsed" VerticalAlignment="Center"/>
                    <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="0 0 4 0" VerticalAlignment="Center"/>
                    <ContentControl x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">
                    <Grid>
                        <Grid x:Name="PopupContentElement" Margin="0 0 3 3">
                            <Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>
                            <Border BorderBrush="{StaticResource MenuPopupOuterBorder}" BorderThickness="1" Background="{StaticResource MenuPopupBackground}">
                                <Grid>
                                    <Rectangle Fill="{StaticResource MenuPopupIconsBackground}" HorizontalAlignment="Left" Width="27"/>
                                    <Grid HorizontalAlignment="Left" Margin="{StaticResource MenuPopupIconsSeparatorMargin}" Width="2">
                                        <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorLeft}" HorizontalAlignment="Left" Width="1"/>
                                        <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorRight}" HorizontalAlignment="Right" Width="1"/>
                                    </Grid>
                                    <ItemsPresenter Margin="1"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </Grid>
                </Popup>
            </Grid>
        </ControlTemplate>
        <ControlTemplate x:Key="TopLevelItemTemplate" TargetType="telerik:RadMenuItem">
            <Grid x:Name="RootElement" Margin="{StaticResource MenuTopLevelItemMargin}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">
                                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Highlighted">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Red" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="Focused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked"/>
                        <VisualState x:Name="HideIcon">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsHighlighted}" RenderPressed="{TemplateBinding IsFocused}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                <Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Path x:Name="Tick" Grid.Column="0" 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" Fill="{TemplateBinding Foreground}" Margin="0 0 4 0" Visibility="Collapsed" VerticalAlignment="Center"/>
                    <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="0 0 4 0" VerticalAlignment="Center"/>
                    <ContentControl x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </Grid>
        </ControlTemplate>
        <SolidColorBrush x:Key="ButtonIconBackground_Normal" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="ButtonIconForeground_Normal" Color="#FF000000"/>
        <Thickness x:Key="MenuSubItemMargin">2</Thickness>
        <ControlTemplate x:Key="SubMenuHeaderTemplate" TargetType="telerik:RadMenuItem">
            <Grid x:Name="RootElement" Background="{TemplateBinding Background}" Margin="{StaticResource MenuSubItemMargin}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Highlighted">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Red" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">
                                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="Focused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked"/>
                        <VisualState x:Name="HideIcon"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderHighlighted="{TemplateBinding IsHighlighted}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                <Grid x:Name="ContentGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="26"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <ContentControl x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Path x:Name="ExpandIconBackground" Grid.Column="2" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 3,4 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" Fill="{StaticResource ButtonIconBackground_Normal}" Height="7" Margin="6 7 6 5" VerticalAlignment="Center" Width="4"/>
                    <Path x:Name="ExpandIconForeground" Grid.Column="2" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 3,4 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" Fill="{StaticResource ButtonIconForeground_Normal}" Height="7" Margin="6 6 6 6" VerticalAlignment="Center" Width="4"/>
                </Grid>
                <Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">
                    <Grid>
                        <Grid x:Name="PopupContentElement" Margin="0 0 3 3">
                            <Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>
                            <Border BorderBrush="{StaticResource MenuPopupOuterBorder}" BorderThickness="1" Background="{StaticResource MenuPopupBackground}">
                                <Grid>
                                    <Rectangle Fill="{StaticResource MenuPopupIconsBackground}" HorizontalAlignment="Left" Width="27"/>
                                    <Grid HorizontalAlignment="Left" Margin="{StaticResource MenuPopupIconsSeparatorMargin}" Width="2">
                                        <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorLeft}" HorizontalAlignment="Left" Width="1"/>
                                        <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorRight}" HorizontalAlignment="Right" Width="1"/>
                                    </Grid>
                                    <ItemsPresenter Margin="1"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </Grid>
                </Popup>
            </Grid>
        </ControlTemplate>
        <ControlTemplate x:Key="SubMenuItemTemplate" TargetType="telerik:RadMenuItem">
            <Grid x:Name="RootElement" Background="{TemplateBinding Background}" Margin="{StaticResource MenuSubItemMargin}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Highlighted">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Red" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">
                                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="Focused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked"/>
                        <VisualState x:Name="HideIcon">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderHighlighted="{TemplateBinding IsHighlighted}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                <Grid x:Name="ContentGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="26"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Path x:Name="Tick" Grid.Column="0" 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" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Visibility="Collapsed" VerticalAlignment="Center"/>
                    <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <ContentControl x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </Grid>
        </ControlTemplate>
        <SolidColorBrush x:Key="MenuItemSeparatorTop" Color="#FF848484"/>
        <SolidColorBrush x:Key="MenuItemSeparatorBottom" Color="Transparent"/>
        <Thickness x:Key="MenuItemSeparatorMargin">31 4 4 3</Thickness>
        <ControlTemplate x:Key="SeparatorTemplate" TargetType="telerik:RadMenuItem">
            <Grid Height="2" Margin="{StaticResource MenuItemSeparatorMargin}">
                <Rectangle Fill="{StaticResource MenuItemSeparatorTop}" Height="1" VerticalAlignment="Top"/>
                <Rectangle Fill="{StaticResource MenuItemSeparatorBottom}" Height="1" VerticalAlignment="Bottom"/>
            </Grid>
        </ControlTemplate>
        <Style x:Key="RadMenuItemStyle" TargetType="telerik:RadMenuItem">
            <Setter Property="Padding" Value="{StaticResource MenuItemPadding}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="{StaticResource PanelBorderBrush}"/>
            <Setter Property="BorderThickness" Value="0"/>
            <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="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Telerik_Windows_Controls_Animation:AnimationManager.AnimationSelector">
                <Setter.Value>
                    <Telerik_Windows_Controls_Animation:AnimationSelector>
                        <Telerik_Windows_Controls_Animation:SlideAnimation AnimationName="Expand" Direction="In" SlideMode="Top" TargetElementName="PopupContentElement"/>
                    </Telerik_Windows_Controls_Animation:AnimationSelector>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMenu VerticalAlignment="Top">
            <telerik:RadMenuItem Header="Item 1" Style="{StaticResource RadMenuItemStyle}">
                <telerik:RadMenuItem Header="Sub Item 1" Style="{StaticResource RadMenuItemStyle}"/>
                <telerik:RadMenuItem Header="Sub Item 2" Style="{StaticResource RadMenuItemStyle}"/>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Header="Item 2" Style="{StaticResource RadMenuItemStyle}">
                <telerik:RadMenuItem Header="Sub Item 3" Style="{StaticResource RadMenuItemStyle}"/>
                <telerik:RadMenuItem Header="Sub Item 4" Style="{StaticResource RadMenuItemStyle}"/>
                <telerik:RadMenuItem Header="Sub Item 5" Style="{StaticResource RadMenuItemStyle}"/>
            </telerik:RadMenuItem>
        </telerik:RadMenu>
    </Grid>
</UserControl>

I hope the attached code will help you style your menu.

Greetings,
Panayot
the Telerik team

[Emma]

Thanks, i'll give it a go and let you know

Cheers for your help

[Pana]

Hi Emma,

Ok, I hope it will help you.

All the best,
Panayot
the Telerik team

[Yolanda]

Hello Telerik Team!

Sorry for opening an old post again. I almost have the same problem as Emma
I have a question about your solution. If I understand well, to change the highlighted colour, we need to write this

<VisualState x:Name="Highlighted">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Red" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
</VisualState>

Instead of

<VisualState x:Name="Highlighted"/>

in every menu control template

I have tried this with my RadMenuStyle but I have this exception :
Impossible de résoudre TargetProperty Foreground dans l'objet spécifié. (Impossible to solve the TargetProperty Foreground in the specified object)
   à MS.Internal.XcpImports.VisualStateManager_GoToState(Control reference, String StateName, Boolean useTransitions, Boolean& refreshInheritanceContext)
   à System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)
   à Telerik.Windows.Controls.RadMenuItem.GoToState(Boolean useTransitions, String[] stateNames)
   à Telerik.Windows.Controls.RadMenuItem.ChangeVisualState(Boolean useTransitions)
   à Telerik.Windows.Controls.RadMenuItem.OnIsHighlighted(DependencyObject d, DependencyPropertyChangedEventArgs e)
   à Telerik.Windows.PropertyMetadata.<>c__DisplayClass1.<Create>b__0(DependencyObject d, DependencyPropertyChangedEventArgs e)
   à System.Windows.DependencyObject.RaisePropertyChangeNotifications(DependencyProperty dp, Object oldValue, Object newValue)
   à System.Windows.DependencyObject.UpdateEffectiveValue(DependencyProperty property, EffectiveValueEntry oldEntry, EffectiveValueEntry& newEntry, ValueOperation operation)
   à System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value, Boolean allowReadOnlySet)
   à System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value)
   à Telerik.Windows.DependencyObjectExtensions.SetValue(DependencyObject element, DependencyPropertyKey key, Object value)
   à Telerik.Windows.Controls.RadMenuItem.set_IsHighlighted(Boolean value)
   à Telerik.Windows.Controls.RadMenuItem.HandleMouseEnter()
   à Telerik.Windows.Controls.RadMenuItem.OnMouseEnter(MouseEventArgs e)
   à System.Windows.Controls.Control.OnMouseEnter(Control ctrl, EventArgs e)
   à MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)

Did I make a mistake?
Thanks!


Just for information, here is my Menu Style before the modification

<ResourceDictionary
    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" xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls">
    <!-- Resource dictionary entries should be defined here. -->

    <SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000"/>
    <SolidColorBrush x:Key="MenuBackground" Color="#FF1A478A"/>
    <SolidColorBrush x:Key="MenuOuterBorder" Color="Transparent"/>
    <Thickness x:Key="MenuBorderThickness">0</Thickness>
    <Thickness x:Key="MenuItemPadding">6,2,7,2</Thickness>
    <SolidColorBrush x:Key="PanelBorderBrush" Color="White"/>
    <CornerRadius x:Key="SplitButton_SpanCornerRadius">1</CornerRadius>
    <SolidColorBrush x:Key="MenuPopupOuterBorder" Color="#FF848484"/>
    <SolidColorBrush x:Key="MenuPopupBackground" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="MenuPopupIconsBackground" Color="#FFF0F0F0"/>
    <SolidColorBrush x:Key="MenuPopupIconsSeparatorLeft" Color="#FF848484"/>
    <SolidColorBrush x:Key="MenuPopupIconsSeparatorRight" Color="Transparent"/>
    <Thickness x:Key="MenuPopupIconsSeparatorMargin">0</Thickness>
    <Thickness x:Key="MenuTopLevelItemMargin">0</Thickness>
    <ControlTemplate x:Key="TopLevelHeaderTemplate" TargetType="telerik:RadMenuItem">
        <Grid x:Name="RootElement" Margin="{StaticResource MenuTopLevelItemMargin}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Highlighted"/>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">
                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Normal"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Unfocused"/>
                    <VisualState x:Name="Focused"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                    <VisualState x:Name="HideIcon">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
            <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsHighlighted}" RenderPressed="{TemplateBinding IsSubmenuOpen}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
            <Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Path x:Name="Tick" Grid.Column="0" 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" Fill="{TemplateBinding Foreground}" Margin="0 0 4 0" Visibility="Collapsed" VerticalAlignment="Center"/>
                <ContentPresenter x:Name="Icon" ContentTemplate="{TemplateBinding IconTemplate}" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="0 0 4 0"/>
                <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
            <Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">
                <Grid>
                    <Grid x:Name="PopupContentElement" Margin="0 0 3 3">
                        <Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>
                        <Border BorderBrush="{StaticResource MenuPopupOuterBorder}" BorderThickness="1" Background="{StaticResource MenuPopupBackground}">
                            <Grid>
                                <Grid HorizontalAlignment="Left" Width="{Binding Menu.IconColumnWidth, RelativeSource={RelativeSource TemplatedParent}}">
                                    <Rectangle Fill="{StaticResource MenuPopupIconsBackground}" Margin="0 0 2 0"/>
                                    <Grid HorizontalAlignment="Right" Margin="{StaticResource MenuPopupIconsSeparatorMargin}">
                                        <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorLeft}" HorizontalAlignment="Right" Margin="0 0 1 0" Width="1"/>
                                        <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorRight}" HorizontalAlignment="Right" Margin="0 0 0 0" Width="1"/>
                                    </Grid>
                                </Grid>
                                <ItemsPresenter Margin="1"/>
                            </Grid>
                        </Border>
                    </Grid>
                </Grid>
            </Popup>
        </Grid>
    </ControlTemplate>
    <ControlTemplate x:Key="TopLevelItemTemplate" TargetType="telerik:RadMenuItem">
        <Grid x:Name="RootElement" Margin="{StaticResource MenuTopLevelItemMargin}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">
                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Highlighted"/>
                    <VisualState x:Name="Normal"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Unfocused"/>
                    <VisualState x:Name="Focused"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                    <VisualState x:Name="HideIcon">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
            <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsHighlighted}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
            <Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Path x:Name="Tick" Grid.Column="0" 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" Fill="{TemplateBinding Foreground}" Margin="0 0 4 0" Visibility="Collapsed" VerticalAlignment="Center"/>
                <ContentPresenter x:Name="Icon" ContentTemplate="{TemplateBinding IconTemplate}" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="0 0 4 0"/>
                <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
        </Grid>
    </ControlTemplate>
    <SolidColorBrush x:Key="ButtonIconBackground_Normal" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="ButtonIconForeground_Normal" Color="#FF000000"/>
    <Thickness x:Key="MenuSubItemMargin">2</Thickness>
    <ControlTemplate x:Key="SubMenuHeaderTemplate" TargetType="telerik:RadMenuItem">
        <Grid x:Name="RootElement">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Highlighted"/>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">
                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Normal"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Unfocused"/>
                    <VisualState x:Name="Focused"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                    <VisualState x:Name="HideIcon"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
            <Grid Margin="{StaticResource MenuSubItemMargin}">
                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderHighlighted="{TemplateBinding IsHighlighted}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                <Grid x:Name="ContentGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid Width="{Binding Menu.IconColumnWidth, RelativeSource={RelativeSource TemplatedParent}}">
                        <ContentPresenter x:Name="Icon" ContentTemplate="{TemplateBinding IconTemplate}" Content="{TemplateBinding Icon}" Margin="2 2 10 2"/>
                    </Grid>
                    <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Path x:Name="ExpandIconBackground" Grid.Column="2" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 3,4 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" Fill="{StaticResource ButtonIconBackground_Normal}" Height="7" Margin="6 7 6 5" VerticalAlignment="Center" Width="4"/>
                    <Path x:Name="ExpandIconForeground" Grid.Column="2" Data="M0,0 L0,7 1,7 1,6 2,6 2,5 3,5 3,4 4,4 4,3 3,3 3,2 2,2 2,1 1,1 1,0 z" Fill="{StaticResource ButtonIconForeground_Normal}" Height="7" Margin="6 6 6 6" VerticalAlignment="Center" Width="4"/>
                </Grid>
            </Grid>
            <Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">
                <Grid>
                    <Grid x:Name="PopupContentElement" Margin="0 0 3 3">
                        <Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>
                        <Border BorderBrush="{StaticResource MenuPopupOuterBorder}" BorderThickness="1" Background="{StaticResource MenuPopupBackground}">
                            <Grid>
                                <Grid HorizontalAlignment="Left" Width="{Binding Menu.IconColumnWidth, RelativeSource={RelativeSource TemplatedParent}}">
                                    <Rectangle Fill="{StaticResource MenuPopupIconsBackground}" Margin="0 0 2 0"/>
                                    <Grid HorizontalAlignment="Right" Margin="{StaticResource MenuPopupIconsSeparatorMargin}">
                                        <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorLeft}" HorizontalAlignment="Right" Margin="0 0 1 0" Width="1"/>
                                        <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorRight}" HorizontalAlignment="Right" Margin="0 0 0 0" Width="1"/>
                                    </Grid>
                                </Grid>
                                <ItemsPresenter Margin="1"/>
                            </Grid>
                        </Border>
                    </Grid>
                </Grid>
            </Popup>
        </Grid>
    </ControlTemplate>
    <ControlTemplate x:Key="SubMenuItemTemplate" TargetType="telerik:RadMenuItem">
        <Grid x:Name="RootElement">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Highlighted"/>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">
                                <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Normal"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Unfocused"/>
                    <VisualState x:Name="Focused"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                    <VisualState x:Name="HideIcon">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
            <Grid Margin="{StaticResource MenuSubItemMargin}">
                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" RenderNormal="False" RenderHighlighted="{TemplateBinding IsHighlighted}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                <Grid x:Name="ContentGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid Width="{Binding Menu.IconColumnWidth, RelativeSource={RelativeSource TemplatedParent}}">
                        <Path x:Name="Tick" Grid.Column="0" 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" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Visibility="Collapsed" VerticalAlignment="Center"/>
                        <ContentPresenter x:Name="Icon" ContentTemplate="{TemplateBinding IconTemplate}" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="2 2 10 2"/>
                    </Grid>
                    <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </Grid>
        </Grid>
    </ControlTemplate>
    <SolidColorBrush x:Key="MenuItemSeparatorTop" Color="#FF848484"/>
    <SolidColorBrush x:Key="MenuItemSeparatorBottom" Color="Transparent"/>
    <Thickness x:Key="MenuItemSeparatorMargin">31 4 4 3</Thickness>
    <ControlTemplate x:Key="SeparatorTemplate" TargetType="telerik:RadMenuItem">
        <Grid Height="2" Margin="{StaticResource MenuItemSeparatorMargin}">
            <Rectangle Fill="{StaticResource MenuItemSeparatorTop}" Height="1" VerticalAlignment="Top"/>
            <Rectangle Fill="{StaticResource MenuItemSeparatorBottom}" Height="1" VerticalAlignment="Bottom"/>
        </Grid>
    </ControlTemplate>
    <Style x:Key="RadMenuItemStyle" TargetType="telerik:RadMenuItem">
        <Setter Property="Padding" Value="{StaticResource MenuItemPadding}"/>
        <Setter Property="Background" Value="{StaticResource MenuBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource PanelBorderBrush}"/>
        <Setter Property="BorderThickness" Value="0,0,1,0"/>
        <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="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="StaysOpenOnClick" Value="True"/>
    </Style>
    <Style x:Key="RadMenuStyle" TargetType="telerik:RadMenu">
        <Setter Property="IconColumnWidth" Value="0"/>
        <Setter Property="Background" Value="{StaticResource MenuBackground}"/>
        <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/>
        <Setter Property="BorderBrush" Value="{StaticResource MenuOuterBorder}"/>
        <Setter Property="BorderThickness" Value="{StaticResource MenuBorderThickness}"/>
        <Setter Property="telerik:AnimationManager.AnimationSelector">
            <Setter.Value>
                <telerik:AnimationSelector>
                    <telerik:SlideAnimation AnimationName="Expand" Direction="In" SlideMode="Top" TargetElementName="PopupContentElement"/>
                </telerik:AnimationSelector>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:RadWrapPanel/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadMenu">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                        <ItemsPresenter/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle" Value="{StaticResource RadMenuItemStyle}"/>
    </Style>

</ResourceDictionary>

[Pana]

Hello Yolanda,

ContentPresenter does not have Foreground property. You can replace it with ContentControl. In case you do so do not forget the Content="{TemplateBinding Content}" and ContentTemplate="{TemplateBinding ContentTemplate}" bindings.

Greetings,
Pana
the Telerik team