RadMenu Hover Behaviors

23 posts, 1 answers
  1. Elke
    Elke avatar
    26 posts
    Member since:
    Jun 2010

    Posted 11 Jun 2010 Link to this post

    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> 

  2. Elke
    Elke avatar
    26 posts
    Member since:
    Jun 2010

    Posted 14 Jun 2010 Link to this post

    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>  



  3. DevCraft banner
  4. Pana
    Admin
    Pana avatar
    748 posts

    Posted 14 Jun 2010 Link to this post

    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.
  5. Elke
    Elke avatar
    26 posts
    Member since:
    Jun 2010

    Posted 18 Jun 2010 Link to this post

    I have tried to edit the radMenuItem template (a copy) in blend, but when I attempt to do so, nothing happens.  How can I access the button chrome?
  6. Pana
    Admin
    Pana avatar
    748 posts

    Posted 21 Jun 2010 Link to this post

    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
  7. Elke
    Elke avatar
    26 posts
    Member since:
    Jun 2010

    Posted 21 Jun 2010 Link to this post

    Thanks for your help, the video looks like it has the information needed to push me in the right direction. Much appreciated!
  8. Elke
    Elke avatar
    26 posts
    Member since:
    Jun 2010

    Posted 21 Jun 2010 Link to this post

    Thank you so much, it has worked wonderfully so far.

    I have 2 more questions regarding this topic.

    The first is can I apply this to the Top Level Menu Item as well?

    The second, is there a way to remove or minimize the width of the icon column so that it's smaller? I don't plan on using icons for this particular project.

    Thanks!
  9. Answer
    Pana
    Admin
    Pana avatar
    748 posts

    Posted 22 Jun 2010 Link to this post

    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
  10. Elke
    Elke avatar
    26 posts
    Member since:
    Jun 2010

    Posted 24 Jun 2010 Link to this post

    Thanks for all the help. Using the information you gave me I was able to successfully style the navigation the way I wanted, and remove the columns in areas I needed to.

    Appreciate it!
  11. Ulrich Fiege
    Ulrich  Fiege avatar
    62 posts
    Member since:
    Sep 2005

    Posted 18 Aug 2010 Link to this post

    Hello, i also try'd the example and i get a style error. Are there
    changes in the template to the current SL4 .812 SP1 release? Is it possible only use
    the button chrome template with radmenu?
    Thanks ....
  12. Pana
    Admin
    Pana avatar
    748 posts

    Posted 18 Aug 2010 Link to this post

    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
    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. Ulrich Fiege
    Ulrich  Fiege avatar
    62 posts
    Member since:
    Sep 2005

    Posted 18 Aug 2010 Link to this post

    Thank you for your fast answer. I my case i need only for radmenu special mouseover colors without to change the
    original theme file. Can you please send me a sample how to use a custom chrome style with radmenu?
    Thank you ...
     
  14. Pana
    Admin
    Pana avatar
    748 posts

    Posted 18 Aug 2010 Link to this post

    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
    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
  15. Ulrich Fiege
    Ulrich  Fiege avatar
    62 posts
    Member since:
    Sep 2005

    Posted 23 Aug 2010 Link to this post

    Thank you, i try'd the code snipped and it works ok but i have the problem, that
    i want to use the blue theme with this chrome template. I can use this template only when i set the
    theme from radmenu to nothing. How can i combine the style from radmenu and this template. Maybe without
    the huge source template from radmenu?
    Thanks ....
  16. Pana
    Admin
    Pana avatar
    748 posts

    Posted 23 Aug 2010 Link to this post

    Hello Ulrich Fiege,

    You can not. You will have to edit the control templates of the controls you want to change and locally apply the chrome Style to the ButtonChromes in the ControlTemplates. The controls set local styles on the smaller controls within when a theme is applied so the implicit style does not work in that case.

    Kind 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
  17. Ulrich Fiege
    Ulrich  Fiege avatar
    62 posts
    Member since:
    Sep 2005

    Posted 06 Sep 2010 Link to this post

    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 ....
  18. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 09 Sep 2010 Link to this post

    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
    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
  19. Niranjan
    Niranjan avatar
    23 posts
    Member since:
    Feb 2009

    Posted 19 Oct 2010 Link to this post

    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
  20. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 25 Oct 2010 Link to this post

    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
    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. ss
    ss avatar
    37 posts
    Member since:
    Nov 2010

    Posted 29 Jun 2011 Link to this post

    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 TargetType="telerikNavigation:RadMenuItem" x:Name="Base_RadMenuItem">

     

     

     

     

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

     

     

     

     

    <Setter Property="BorderThickness" Value="0" />

     

     

     

     

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

     

     

     

     

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

     

     

     

     

    <Setter Property="FontSize" Value="12"/>

     

     

     

     

    <Setter Property="BorderBrush" Value="#3871B9"/>

     

     

     

     

    </Style>

     

     

     

     

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

     

     

     

     

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

     

     

     

     

    <GradientStop Color="#FFC3D6EC" />

     

     

     

     

    </LinearGradientBrush>

     

     

     

     

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

     

     

     

     

    <SolidColorBrush x:Key="MenuPopupBackground" Color="White"/>

     

     

     

     

    <SolidColorBrush x:Key="MenuPopupIconsBackground" Color="White"/>

     

     

     

     

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

     

     

     

     

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

     

     

     

     

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

     

     

     

     

    <Setter Property="Foreground" Value="Black"/>

     

     

     

     

    </Style>

     

     

     

     

     

    <!-- RadMenu -->

     

     

     

     

    <Style TargetType="telerikNavigation:RadMenu" x:Name="Base_RadMenu">

     

     

     

     

    <Setter Property="Background" Value="#3871B9" />

     

     

     

     

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

     

     

     

     

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

     

     

     

     

    <Setter Property="FontSize" Value="13"/>

     

     

     

     

    <Setter Property="ItemContainerStyle" Value="{StaticResource RadMenuItemStyle}"/>

     

     

     

     

    <Setter Property="IconColumnWidth" Value="35"/>

     

     

     

     

     

    </Style>

     


  22. Dani
    Admin
    Dani avatar
    848 posts

    Posted 04 Jul 2011 Link to this post

    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">
                        <!-- NOTE: add the mouseover animation -->
                        <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/>
                    <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>
                </Grid>
            </Popup>
        </Grid>
    </ControlTemplate>

    I hope this helps.

    Kind regards,
    Dani
    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
  23. ss
    ss avatar
    37 posts
    Member since:
    Nov 2010

    Posted 05 Jul 2011 Link to this post

    thnaks alot.its working perfectly.

    and how to set teh corner raddious for radmenu item?
  24. Dani
    Admin
    Dani avatar
    848 posts

    Posted 06 Jul 2011 Link to this post

    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!

Back to Top
DevCraft banner