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

RadMenu Hover Behaviors

22 Answers 548 Views

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

Elke asked on 11 Jun 2010, 02:02 PM

Been following the directions in this article Styling the RadMenuItem. When I create the style for the RadMenuItem, I do not get any of the options for editing the MouseOver behavior, as shown in the linked guide. Did anything regarding this feature change?

I need to change the hover style color for my menu, including in the sub-menus. Have been trying for 2 days to find a solution and no one is answering my questions.

Thanks!

    
            <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation" xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" 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" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:Telerik_Windows_Controls_TabControl="clr-namespace:Telerik.Windows.Controls.TabControl;assembly=Telerik.Windows.Controls.Navigation"  
        
              telerik:StyleManager.Theme="Vista" 
        
              x:Class="InteLite.Portal.MainPage" 
        
              d:DesignWidth="640" d:DesignHeight="480" mc:Ignorable="d"> 
        
                <UserControl.Resources> 
        
                    <Thickness x:Key="MenuItemPadding">6,0</Thickness> 
        
                    <SolidColorBrush x:Key="PanelBorderBrush" Color="#FF848484"/> 
        
                    <CornerRadius x:Key="SplitButton_SpanCornerRadius">1</CornerRadius> 
        
                    <telerik:Office_SilverTheme x:Key="Theme" IsApplicationTheme="False" Source="/Telerik.Windows.Themes.Office_Silver;component/themes/Generic.xaml"/> 
        
                    <SolidColorBrush x:Key="MenuPopupOuterBorder" Color="#FF555555"/> 
        
                    <SolidColorBrush x:Key="MenuPopupBackground" Color="#FF454545"/> 
        
                    <SolidColorBrush x:Key="MenuPopupIconsBackground" Color="#FF454545"/> 
        
                    <SolidColorBrush x:Key="MenuPopupIconsSeparatorLeft" Color="Transparent"/> 
        
                    <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"/> 
        
                                    <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}" d:IsHidden="True"/> 
        
                            <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"/> 
        
                                <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" Background="Black"> 
        
                                        <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"/> 
        
                                    <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"/> 
        
                                <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" Background="{TemplateBinding Background}" Margin="{StaticResource MenuSubItemMargin}"> 
        
                            <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}"/> 
        
                            <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"/> 
        
                                <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> 
        
                            <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"/> 
        
                                    <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}" /> 
        
                            <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"/> 
        
                                <ContentPresenter 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="RadMenuItemStyle1" 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> 
        
                        <Setter Property="Foreground" Value="{StaticResource MenuPopupBackground}"/> 
        
                    </Style> 
        
                </UserControl.Resources> 
        
                <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}"> 
        
                   <telerik:RadMenu telerik:StyleManager.Theme="Office Silver"/> 
        
                    <Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}"> 
        
                        <ScrollViewer BorderThickness="0" VerticalScrollBarVisibility="Auto" Padding="0"> 
        
                            <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}"  Navigating="ContentFrame_Navigating" 
        
                                          Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed" Background="White"> 
        
                                <navigation:Frame.UriMapper> 
        
                                    <uriMapper:UriMapper> 
        
                                        <uriMapper:UriMapping Uri="" MappedUri="/Views/Performance/Dashboard.xaml"/> 
        
                                        <uriMapper:UriMapping Uri="/Home" MappedUri="/Views/Performance/Dashboard.xaml"/> 
        
                                        <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/> 
        
                                    </uriMapper:UriMapper> 
        
                                </navigation:Frame.UriMapper> 
        
                            </navigation:Frame> 
        
                        </ScrollViewer> 
        
                    </Border> 
        
                    <Grid Style="{StaticResource NavigationOuterGridStyle}"> 
        
                        <Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}" Background="#FF222222"> 
        
                            <Border x:Name="BrandingBorder" Style="{StaticResource BrandingBorderStyle}"> 
        
                                <StackPanel x:Name="BrandingStackPanel" Style="{StaticResource BrandingStackPanelStyle}"> 
        
                                    <!--<Image Source="Images/ORION-Logo-LYA-WT.png" Stretch="Fill" />--> 
        
                                    <ContentControl Style="{StaticResource LogoIcon}"/> 
        
                                    <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}"  
        
                                           Text="{Binding ApplicationStrings.ApplicationName, Source={StaticResource ResourceWrapper}}" Foreground="White"/> 
        
                                </StackPanel> 
        
                            </Border> 
        
                            <Border x:Name="menuContainer" Style="{StaticResource MenuContainerStyle}"> 
        
                                <telerik:RadMenu x:Name="mainMenu" ClickToOpen="False" BorderBrush="#FF555555" Margin="0" Padding="0"> 
        
                                    <telerik:RadMenu.Background> 
        
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
        
                                            <GradientStop Color="#FF262525" Offset="1"/> 
        
                                            <GradientStop Color="#FF454545"/> 
        
                                        </LinearGradientBrush> 
        
                                    </telerik:RadMenu.Background> 
        
                                    <telerik:RadMenuItem Header="Home" Click="mnuItem_Click" Tag="/Home" Foreground="White" FontSize="11" Style="{StaticResource RadMenuItemStyle1}" Background="Transparent"> 
        
                                        <telerik:RadMenuItem.Icon> 
        
                                            <Image Source="Images/home.png" Stretch="Uniform"/> 
        
                                        </telerik:RadMenuItem.Icon> 
        
                                    </telerik:RadMenuItem> 
        
                                    <telerik:RadMenuItem x:Name="mnuItemReports" Header="Reports" IsCheckable="False" Foreground="White" FontSize="11" Style="{StaticResource RadMenuItemStyle1}" > 
        
                                        <telerik:RadMenuItem.Icon> 
        
                                            <Image Source="Images/reports.png" Stretch="Uniform"/> 
        
                                        </telerik:RadMenuItem.Icon> 
        
                                        <telerik:RadMenuItem Header="Savings" Click="mnuItem_Click" Tag="/Reports/Savings" IsCheckable="False" Background="#FF454545" > 
        
                                            <telerik:RadMenuItem.Icon> 
        
                                                <Image Source="Images/savingsReport.png" Stretch="Uniform"/> 
        
                                            </telerik:RadMenuItem.Icon> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem Header="Installation Impact" Click="mnuItem_Click" Tag="/Reports/InstallationImpact" IsCheckable="False" Background="#FF454545"> 
        
                                            <telerik:RadMenuItem.Icon> 
        
                                                <Image Source="Images/installationReport.png" Stretch="Uniform"/> 
        
                                            </telerik:RadMenuItem.Icon> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem Header="Comparison" Click="mnuItem_Click" Tag="/Reports/Comparison" IsCheckable="False" Background="#FF454545"> 
        
                                            <telerik:RadMenuItem.Icon> 
        
                                                <Image Source="Images/comparisonReport.png" Stretch="Uniform"/> 
        
                                            </telerik:RadMenuItem.Icon> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem Header="Zone Usage" Click="mnuItem_Click" Tag="/Reports/ZoneUsage" IsCheckable="False" Background="#FF454545"> 
        
                                            <telerik:RadMenuItem.Icon> 
        
                                                <Image Source="Images/zone_usage.png" Stretch="Uniform"/> 
        
                                            </telerik:RadMenuItem.Icon> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem Header="Power Monitoring" Click="mnuItem_Click" Tag="/PowerMonitoring/RealTimeMonitoring" IsCheckable="False" Background="#FF454545"> 
        
                                            <telerik:RadMenuItem.Icon> 
        
                                                <Image Source="Images/zone_usage.png" Stretch="Uniform"/> 
        
                                            </telerik:RadMenuItem.Icon> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem Header="Meter Setup" Click="mnuItem_Click" Tag="/PowerMonitoring/MeterSetup" IsCheckable="False" Background="#FF454545"> 
        
                                            <telerik:RadMenuItem.Icon> 
        
                                                <Image Source="Images/zone_usage.png" Stretch="Uniform"/> 
        
                                            </telerik:RadMenuItem.Icon> 
        
                                        </telerik:RadMenuItem> 
        
                                    </telerik:RadMenuItem> 
        
                                    <telerik:RadMenuItem Header="Configuration" Click="mnuItem_Click" Tag="/Configurations/Home" Foreground="White" FontSize="11" Height="30" VerticalAlignment="Bottom" > 
        
                                        <!--<telerikNavigation:RadMenuItem Header="Setup Ambient Sensors" Click="mnuItem_Click" Tag="/Configurations/AmbientSensor/AmbientSensorSetup" IsCheckable="False" /> 
        
                                        <telerikNavigation:RadMenuItem Header="Define Zones" Click="mnuItem_Click" Tag="/Configurations/ZoneSetup/ZoneSetup" IsCheckable="False" /> 
        
                                        <telerikNavigation:RadMenuItem Header="Manage Schedules" Click="mnuItem_Click" Tag="/Configurations/ZoneSchedule/ZoneSchedule" IsCheckable="False" /> 
        
                                        <telerikNavigation:RadMenuItem Header="Setup Zone Savings Strategy" Click="mnuItem_Click" Tag="/Configurations/ZoneSavingsStrategy/ZoneSavingsStrategy" IsCheckable="False" />--> 
        
                                    </telerik:RadMenuItem> 
        
            </telerik:RadMenu> 
        
                            </Border> 
        
                            <Border x:Name="loginContainer" Style="{StaticResource LoginContainerStyle}"> 
        
                                <!-- LoginStatus will be added here in code behind. This is required for the designer view to work --> 
        
                            </Border> 
        
                        </Grid> 
        
                    </Grid> 
        
                </Grid> 
        
            </UserControl>

22 Answers, 1 is accepted

answered on 14 Jun 2010, 02:31 PM

screen-shot-2010-06-14-at-8-24-08-am.png

So I have progressed a bit further with this but am still not 100% on the right track. I can get the background to change on hover, but two things are happening now.

1. The defined theme (vista) is showing behind the onhover background
2. The onhover background is not expanding to the width of the control.

I have attached a screenshot as an example.

Here is my code as well (pertinent parts)

    
            <LinearGradientBrush x:Key="NavigationMouseoverFill" EndPoint="0.5,1" StartPoint="0.5,0"> 
        
              <GradientStop Color="Black" Offset="0"/> 
        
              <GradientStop Color="#FF888888" Offset="1"/> 
        
              <GradientStop Color="#FF030303" Offset="0.014"/> 
        
            </LinearGradientBrush> 
        
            <VisualState x:Name="Highlighted">  
        
              <Storyboard>  
        
                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="Background">  
        
                  <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource NavigationMouseoverFill}"/>  
        
                </ObjectAnimationUsingKeyFrames>  
        
              </Storyboard>  
        
            </VisualState>

answered on 14 Jun 2010, 05:13 PM

Hello Elke,

The ButtonChrome control used in the RadMenuItem's template is used to render various control states. As it may seem complicated in your state to edit the chrome in order to get the menu states changed it introduces a lot of consistency through the various controls that support states. You can edit the chrome's Highlighted state which is used to render some viusals in the RadMenuItem or you can remove the ButtonChrome and just use the RadMenuItem's states to animate some Rectangles or Borders.

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.

answered on 21 Jun 2010, 06:44 AM

radmenueditingtemplate.zip

Hello Elke,

RadMenuItem in RadMenu or RadMenuItem have one of its TemplateKeys applied from code behind so you may find it hard to generate the templates. The easiest way is to drag RadMenuItem and ButtonChrome on the design surface, edit them to generate the required resources and then apply the styles on the real RadMenuItems. Check the attached file. It contains a movie (*.swf drag it in browser to view it) that will show you how you can edit the hover in blend. I have also attached the project with which I made the demo.

Regards,
Panayot
the Telerik team

Accepted

answered on 22 Jun 2010, 08:29 AM

Hi Elke,

The ButtonChrome has MouseOver state and Pressed state which are used by the two top level menu item templates you can edit them and apply the ButtonChrome Style in the templates. The states however use color animations so you will have to be more careful editing them.

To remove the space for the icons you will have to edit all 'Header' templates of the RadMenuItems. They will have a popup defined in them as PART. These Popups contain the ItemsContentPresenter which displays the sub menu and also the graphics for the popup background. You will have to remove the left gray line from them. However this will not remove the space reserved for an icon in the RadMenuItems. You will have to edit the 2 SubMenu.. templates. They have a grid with tick and ContentPresenter displaying the icon in the left part of the menu, ContentPresenter for the header and eventually a right arrow. You will have to remove the first grid column with the tick and icon ContentPresenter.

Sincerely yours,
Panayot
the Telerik team

answered on 18 Aug 2010, 07:26 AM

Hello Ulrich Fiege,

In fact you can use the ButtonChrome only with the menu. You can create an implicit style for the ButtonChromes in the Resources ResourceDictionary of the RadMenu. The menu uses the chrome's MouseOver, Pressed and most importantly Highlighted states so if you change them the menu will have the new colors applied as MouseOver. The Highlighted state is for sub menu items and the MouseOver and Pressed for top level items. The implicit style will apply in all the chromes in the menu and the menu will have the MouseOver changed.

Sincerely yours,
Panayot
the Telerik team

answered on 18 Aug 2010, 02:10 PM

styleingmenuwithchrome.zip

custmomenumouseover.zip

Hello Ulrich Fiege,

Here is a short movie that displays how you can apply the styles to the ButtonChromes in the menu from the outside. The example project that I used to create the movie is also attached.

Sincerely yours,
Panayot
the Telerik team

answered on 06 Sep 2010, 08:59 AM

scr.jpg

Hello, i have try'd the first sample to make a custom menu with custom buttonchrome template.
It seems that the menu template is not complete. How can i change these colors like in the
screenshot? It would be helpful to have a complete sample with menu and chrome template.
thank you and greetings ....

answered on 09 Sep 2010, 08:51 AM

Hello Ulrich,

To change the colours in the screenshot you will have to do:
1. The RadMenu has different templates for items with and without children on top level, and for the subitems with and without children.The SubMenuHeaderTemplate applies for the subitems with children. To change the colour of the IconColumn of the SubMenuItem you will have to edit this template if it has children or SubMenuItemTemplate for items with no children. Right click the RadMenu and choose from the menu Edit Template->Edit a Copy and Blend will generate for you all the templates and styles needed.
2. As for the clicked state of the TopLevelItem - it is illustrated in the short video sent in one of the previous post and applied also in the sample project. Could you please share with us what difficulties do you experience changing it?

Please let us know if you have further questions.

Kind regards,
Konstantina
the Telerik team

answered on 19 Oct 2010, 02:22 PM

Hi

I was trying your sample custmomenumouseover.zip.

In this sample, I modified the code to show the top level menu bar in my custom template. So whenever silverlight application size is changed, it displays last possible menus visible.

Now, if popup menu when becomes visible, navigating on other menus (in top level) displays the submenus according to mouse over position ( Effect something similar to menus in VS 2010/VS 2008 )

When popup is visible, user resizes the silverlight application. The issue with this is that popup remains visible, but the top level menu for which menu is shown becomes invisible because of custom panel used for displaying top level menus.

In my custom panel, I get the the menu control. How can hide or make invisible the popup menu explicitly ??
What property i need to use for same.

Thanks & Regards
Rajesh

answered on 25 Oct 2010, 10:59 AM

Hi Niranjan,

Thank you for contacting us.

Open/Close of RadMenu from code is not supported yet. We have added this feature in our Public Issue Tracking System (PITS). You can view it here. It also refers to the closing. You can vote for it, track its status and see when it is going to be implemented.
Sorry for the caused inconvenience.

Please let us know if you have any other questions.

Regards,
Konstantina
the Telerik team

answered on 29 Jun 2011, 10:10 AM

hi,

the below style i am using for radmenu .i wnat to chnage the font weight with bold onmouseover time.can you help on htis.
but i should not change my currentstyle which i am using.
without distrubing the currentstyle i want to chnage the font weight on mouseove time.

</Style>

</LinearGradientBrush>

<telerik:Office_SilverTheme x:Key="Theme" IsApplicationTheme="False" Source="/Telerik.Windows.Themes.Office_Silver;component/themes/Generic.xaml"/>

<VisualStateManager.VisualStateGroups>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateGroup>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<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}" d:IsHidden="True"/>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

<Grid>

<Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>

<Grid>

</Grid>

</Grid>

</Border>

</Grid>

</Popup>

</Grid>

</ControlTemplate>

<VisualStateManager.VisualStateGroups>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateGroup>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

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

</Grid.ColumnDefinitions>

</Grid>

</ControlTemplate>

<VisualStateManager.VisualStateGroups>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateGroup>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

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

</Grid.ColumnDefinitions>

</Grid>

<Grid>

<Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>

<Grid>

</Grid>

</Grid>

</Border>

</Grid>

</Popup>

</Grid>

</ControlTemplate>

<VisualStateManager.VisualStateGroups>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateGroup>

</ObjectAnimationUsingKeyFrames>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</ControlTemplate>

</Grid>

</ControlTemplate>

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

</Style>

answered on 04 Jul 2011, 04:55 PM

Hello Reddy,

Please, check the following style that has has its RadMenuItem font weight bolded when the menu item enters MouseOver visual state. Search for the word NOTE to spot the two changes. In order to have this working for all RadMenuItems, you should apply the changes to the other three ControlTemplates of the RadMenuItem as well:

<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 Duration="0" Storyboard.TargetProperty="FontWeight" Storyboard.TargetName="Content">

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

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

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

<!--NOTE: replace the ContentPresenter with a ContentControl so that you can take advantage of the FontWeight property-->

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

<Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>

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

<Grid>

<Rectangle Fill="{StaticResource BlueBrush}" 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>

</Popup>

</Grid>

</ControlTemplate>

I hope this helps.

Kind regards,
Dani
the Telerik team

answered on 06 Jul 2011, 08:06 AM

Hi Reddy,

There are four types of RadMenuItems and a control template for each of them - TopLevelHeaderTemplate, TopLevelItemTemplate, SubMenuHeaderTemplate, SubMenuitemTemplate. Each of these control templates contains a ButtonChrome control that is responsible for the appearance and visual states of the menu item. To change the corner radius, you need to create a Style for the ButtonChrome, modify it to reflect your requirements and apply it to all four ButtonChrome controls. You can generate and customize the ButtonChromeStyle in Expression Blend.

I hope this helps.

Greetings,
Dani
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

RadMenu Hover Behaviors

22 Answers, 1 is accepted