Menu Item MouseOver style

12 posts, 0 answers
  1. Emma
    Emma avatar
    9 posts
    Member since:
    Aug 2010

    Posted 10 Aug 2010 Link to this post

    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

     

  2.
  3. Pana
    Admin
    Pana avatar
    748 posts

    Posted 10 Aug 2010 Link to this post

    Hi Emma,

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

    Greetings,
    Panayot
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Emma
    Emma avatar
    9 posts
    Member since:
    Aug 2010

    Posted 10 Aug 2010 Link to this post

    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
  7. Pana
    Admin
    Pana avatar
    748 posts

    Posted 10 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Emma
    Emma avatar
    9 posts
    Member since:
    Aug 2010

    Posted 10 Aug 2010 Link to this post

    <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
  11. Pana
    Admin
    Pana avatar
    748 posts

    Posted 10 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Emma
    Emma avatar
    9 posts
    Member since:
    Aug 2010

    Posted 10 Aug 2010 Link to this post

    <UserControl
        x:Class="Internal.SupportSystem.Client.Screens.Root.RootCanvas"
        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
  14.
  15. Pana
    Admin
    Pana avatar
    748 posts

    Posted 12 Aug 2010 Link to this post

    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: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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  17. Emma
    Emma avatar
    9 posts
    Member since:
    Aug 2010

    Posted 12 Aug 2010 Link to this post

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

    Cheers for your help
  19. Pana
    Admin
    Pana avatar
    748 posts

    Posted 12 Aug 2010 Link to this post

    Hi Emma,

    Ok, I hope it will help you.

    All the best,
    Panayot
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  21. Yolanda
    Yolanda avatar
    23 posts
    Member since:
    Aug 2010

    Posted 28 Jan 2011 Link to this post

    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: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>
  23. Pana
    Admin
    Pana avatar
    748 posts

    Posted 01 Feb 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Back to Top