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

Focused animation on specific TopLevelItem

10 Answers 118 Views

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

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

Vonziz asked on 05 Jan 2012, 11:15 AM

Hi,

I try to use the RadMenu Silverlight control but I've got a problem with TopLevelItem style.

I've got some TopLevelItems which don't have any sub items.
And their TopLevelItems don't change their background when they are focused.

My question : How can I launch the focused animation ?

<ControlTemplate x:Key="MenuItemTopLevelControlTemplate" TargetType="telerik:RadMenuItem">

<Grid>

<Rectangle x:Name="BackgroundVisual" Fill="{StaticResource MenuItemTopLevelBackground_MouseOver}" Opacity="0" />

<TextBlock x:Name="TextElement" Text="{Binding Content}" TextDecorations="None" Foreground="#FF58585D" FontWeight="Bold" FontFamily="Trebuchet MS" Margin="20 6 20 6" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="14" />

<TextBlock x:Name="TextElementOver" Text="{Binding Content}" TextDecorations="None" Foreground="White" FontWeight="Bold" FontFamily="Trebuchet MS" Margin="20 6 20 6" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="14" Visibility="Collapsed" />

<Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">

<Border x:Name="PopupContent" Margin="0 1 0 0" BorderBrush="{StaticResource MenuDropDownBorder}" BorderThickness="1" Background="{StaticResource MenuDropDownFrame}" Padding="6">

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

<ItemsPresenter Margin="8 4" />

</Border>

</Popup>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2"/>

</VisualStateGroup.Transitions>

<VisualState x:Name="Unfocused" />

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" Storyboard.TargetProperty="Opacity">

<LinearDoubleKeyFrame KeyTime="00:00:00.1" Value="1" />

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextElementOver" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00.1">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</Grid>

</ControlTemplate>

10 Answers, 1 is accepted

answered on 05 Jan 2012, 01:04 PM

Hi Nicolas,

RadMenu has two types of templates applicable to top-level items. TopLevelHeaderTemplate applies to menu items that have children, i.e. submenu items. TopLevelItemTemplate applies to top-level menu items that do not have submenu items.

I can see that you have customized the TopLevelHeaderTemplate. You are missing a Focused visual state, though.

Also, supposedly, you have not made any changes to the TopLevelItemTemplate, so you should be able to see the focus border when you navigate with the arrows, because by default all top level items display a focus border.

If the problem persists, please post here all xaml mark-up you use for RadMenu.

Hope this helps.

Regards,
Dani
the Telerik team

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

answered on 05 Jan 2012, 02:05 PM

Hi Dani and thanks a lot for your response.

I've made a mistake in my previous post.
You have to replace "MouseOver" by "Focused" in VisualStateManager part.

This source code comes from your official samples (http://demos.telerik.com/silverlight/#Menu/Customization).

And I think that this customization sample doesn't make difference between TopLevelHeaderTemplate and TopLevelItemTamplate.

Can you give me a way to make this difference?

<LinearGradientBrush x:Key="HeaderBackground" EndPoint="0 1">

<GradientStop Offset="0" Color="#868686" />

<GradientStop Offset="1" Color="#0D0D0D" />

</LinearGradientBrush>

<SolidColorBrush x:Key="TitleForeground" Color="#D3D3D3" />

<SolidColorBrush x:Key="SubTitleForeground" Color="#5ABAB6" />

<SolidColorBrush x:Key="ApplicationBackground" Color="#FFE5E5E5" />

<SolidColorBrush x:Key="ApplicationBorderBrush" Color="#FFB5B5B5" />

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

<GradientStop Color="Transparent" Offset="0"/>

<GradientStop Color="Transparent" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="MenuDropDownBorder" Color="#8854BBE8" />

<SolidColorBrush x:Key="MenuDropDownFrame" Color="#66333333" />

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

<SolidColorBrush x:Key="MenuDropDownBackground" Color="#FFF7F7F7" />

<LinearGradientBrush x:Key="MenuItemTopLevelBackground_MouseOver" EndPoint="0 1">

<GradientStop Color="#FF7dccee" Offset="0" />

<GradientStop Color="#FF799fd9" Offset="0.06" />

<GradientStop Color="#FF8ebdea" Offset="0.48" />

<GradientStop Color="#FF348bda" Offset="0.49" />

<GradientStop Color="#FF54bce9" Offset="0.83" />

<GradientStop Color="#FF54bce9" Offset="0.98" />

</LinearGradientBrush>

<SolidColorBrush x:Key="MenuItemSeparatorDark" Color="#FFE4E4E4" />

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

<SolidColorBrush x:Key="MenuItemTitleForeground" Color="#FF0099CC" />

<SolidColorBrush x:Key="MenuItemParagraphForeground" Color="#FF595959" />

<SolidColorBrush x:Key="MenuItemSpecialLinkForeground" Color="#FF0066CC" />

<ControlTemplate x:Key="MenuItemParagraphControlTemplate" TargetType="telerik:RadMenuItem">

<TextBlock x:Name="TextElement" Text="{Binding Content}" Foreground="{StaticResource MenuItemParagraphForeground}" TextWrapping="Wrap" FontSize="11" />

</ControlTemplate>

<ControlTemplate x:Key="MenuItemTitleControlTemplate" TargetType="telerik:RadMenuItem">

<TextBlock x:Name="TextElement" Text="{Binding Content}" Foreground="{StaticResource MenuItemTitleForeground}" FontSize="16" />

</ControlTemplate>

<ControlTemplate x:Key="MenuItemLinkControlTemplate" TargetType="telerik:RadMenuItem">

<TextBlock x:Name="TextElement" Text="{Binding Content}" TextDecorations="None" Foreground="#FF2C2C2C" FontSize="12">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Unfocused"/>

<VisualState x:Name="Focused">

<Storyboard>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="TextElement" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">

<LinearColorKeyFrame KeyTime="00:00:00" Value="#FF0066CC" />

</ColorAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextElement" Storyboard.TargetProperty="TextDecorations">

<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Underline" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</TextBlock>

</ControlTemplate>

<ControlTemplate x:Key="MenuItemSpecialLinkControlTemplate" TargetType="telerik:RadMenuItem">

<TextBlock x:Name="TextElement" TextDecorations="None" Foreground="{StaticResource MenuItemSpecialLinkForeground}" FontSize="11">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Unfocused"/>

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextElement" Storyboard.TargetProperty="TextDecorations">

<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Underline" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Run Text="» " />

<Run Text="{Binding Content}" />

</TextBlock>

</ControlTemplate>

<ControlTemplate x:Key="MenuItemTopLevelControlTemplate" TargetType="telerik:RadMenuItem">

<Grid>

<Rectangle x:Name="BackgroundVisual" Fill="{StaticResource MenuItemTopLevelBackground_MouseOver}" Opacity="0" />

<Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">

<Border x:Name="PopupContent" Margin="0 1 0 0" BorderBrush="{StaticResource MenuDropDownBorder}" BorderThickness="1" Background="{StaticResource MenuDropDownFrame}" Padding="6">

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

<ItemsPresenter Margin="8 4" />

</Border>

</Popup>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2"/>

</VisualStateGroup.Transitions>

<VisualState x:Name="Unfocused" />

<VisualState x:Name="Focused">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" Storyboard.TargetProperty="Opacity">

<LinearDoubleKeyFrame KeyTime="00:00:00.1" Value="1" />

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextElementOver" Storyboard.TargetProperty="(UIElement.Visibility)">

<DiscreteObjectKeyFrame KeyTime="00:00:00.1">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</Grid>

</ControlTemplate>

<ControlTemplate x:Key="MenuItemTopLevelSectionControlTemplate" TargetType="telerik:RadMenuItem">

<Grid>

<ItemsPresenter />

<Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">

<Rectangle />

</Popup>

</Grid>

</ControlTemplate>

<ControlTemplate x:Key="MenuItemTopLevelSectionSeparatorControlTemplate" TargetType="telerik:RadMenuItem">

<Border BorderThickness="1 0 0 0" Background="{StaticResource MenuItemSeparatorLight}" BorderBrush="{StaticResource MenuItemSeparatorDark}" Width="2" Margin="4 32 8 8" />

</ControlTemplate>

<ControlTemplate x:Key="MenuItemGalleryControlTemplate" TargetType="telerik:RadMenuItem">

<Grid>

<ItemsPresenter />

<Popup x:Name="PART_Popup">

<Rectangle />

</Popup>

</Grid>

</ControlTemplate>

<ControlTemplate x:Key="MenuItemImageControlTemplate" TargetType="telerik:RadMenuItem">

<Image Source="{Binding Content}" Cursor="Hand" Stretch="None" HorizontalAlignment="Left" />

</ControlTemplate>

<ControlTemplate x:Key="ParagraphImageMenuItemControlTemplate" TargetType="telerik:RadMenuItem">

<Grid Cursor="Hand">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Image Grid.RowSpan="2" Grid.Column="0" Margin="4" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None" Source="{Binding Image}" />

<TextBlock x:Name="TitleElement" Grid.Row="0" Grid.Column="1" Margin="4 4 4 -5" MaxWidth="200" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="13" Text="{Binding Title}" Foreground="Black" />

<TextBlock x:Name="SummaryElement" Grid.Row="1" Grid.Column="1" Margin="4 -5 4 4" MaxWidth="200" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding Summary}" FontSize="11" Foreground="{StaticResource MenuItemParagraphForeground}" />

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Unfocused"/>

<VisualState x:Name="Focused">

<Storyboard>

<ColorAnimationUsingKeyFrames Storyboard.TargetName="TitleElement" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">

<LinearColorKeyFrame KeyTime="00:00:00" Value="#FF0066CC" />

</ColorAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleElement" Storyboard.TargetProperty="TextDecorations">

<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Underline" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</Grid>

</ControlTemplate>

<Style x:Key="MenuStyle" TargetType="telerik:RadMenu">

<Setter Property="HorizontalAlignment" Value="Stretch" />

<Setter Property="VerticalAlignment" Value="Top" />

<Setter Property="Background" Value="{StaticResource MenuBackground}"/>

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

</Style>

<Style x:Key="MenuItemTopLevelStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="SeparatorTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<StackPanel Orientation="Horizontal" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

<Setter Property="telerik:AnimationManager.AnimationSelector">

<Setter.Value>

<telerik:AnimationSelector>

<telerik:SlideAnimation Direction="In" SlideMode="Top" AnimationName="Expand" TargetElementName="PopupContent" />

</telerik:AnimationSelector>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="MenuItemTopLevelSectionStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource MenuItemTopLevelSectionControlTemplate}"/>

<Setter Property="SeparatorTemplateKey" Value="{StaticResource MenuItemTopLevelSectionSeparatorControlTemplate}"/>

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuItemTopLevelSectionControlTemplate}"/>

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuItemTopLevelSectionControlTemplate}"/>

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuItemTopLevelSectionControlTemplate}"/>

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuItemTopLevelSectionControlTemplate}"/>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<StackPanel Orientation="Vertical" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="MenuItemGalleryStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource MenuItemGalleryControlTemplate}"/>

<Setter Property="SeparatorTemplateKey" Value="{StaticResource MenuItemGalleryControlTemplate}"/>

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuItemGalleryControlTemplate}"/>

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuItemGalleryControlTemplate}"/>

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuItemGalleryControlTemplate}"/>

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuItemGalleryControlTemplate}"/>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<StackPanel Orientation="Horizontal" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="MenuItemImageStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource MenuItemImageControlTemplate}"/>

<Setter Property="SeparatorTemplateKey" Value="{StaticResource MenuItemImageControlTemplate}"/>

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuItemImageControlTemplate}"/>

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuItemImageControlTemplate}"/>

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuItemImageControlTemplate}"/>

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuItemImageControlTemplate}"/>

<Setter Property="Margin" Value="4 4 12 4" />

</Style>

<Style x:Key="MenuItemParagraphStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource MenuItemParagraphControlTemplate}"/>

<Setter Property="SeparatorTemplateKey" Value="{StaticResource MenuItemParagraphControlTemplate}"/>

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuItemParagraphControlTemplate}"/>

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuItemParagraphControlTemplate}"/>

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuItemParagraphControlTemplate}"/>

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuItemParagraphControlTemplate}"/>

<Setter Property="Margin" Value="4" />

<Setter Property="MaxWidth" Value="300" />

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

</Style>

<Style x:Key="MenuItemTitleStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource MenuItemTitleControlTemplate}"/>

<Setter Property="SeparatorTemplateKey" Value="{StaticResource MenuItemTitleControlTemplate}"/>

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuItemTitleControlTemplate}"/>

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuItemTitleControlTemplate}"/>

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuItemTitleControlTemplate}"/>

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuItemTitleControlTemplate}"/>

<Setter Property="Margin" Value="4 3 4 1" />

<Setter Property="MinWidth" Value="150" />

</Style>

<Style x:Key="MenuItemLinkStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource MenuItemLinkControlTemplate}" />

<Setter Property="SeparatorTemplateKey" Value="{StaticResource MenuItemLinkControlTemplate}" />

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuItemLinkControlTemplate}" />

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuItemLinkControlTemplate}" />

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuItemLinkControlTemplate}" />

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuItemLinkControlTemplate}" />

<Setter Property="Margin" Value="4 3 4 2" />

</Style>

<Style x:Key="MenuItemSpecialLinkStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource MenuItemSpecialLinkControlTemplate}" />

<Setter Property="SeparatorTemplateKey" Value="{StaticResource MenuItemSpecialLinkControlTemplate}" />

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuItemSpecialLinkControlTemplate}" />

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuItemSpecialLinkControlTemplate}" />

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuItemSpecialLinkControlTemplate}" />

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuItemSpecialLinkControlTemplate}" />

<Setter Property="Margin" Value="4 2 4 6" />

</Style>

<Style x:Key="ParagraphImageMenuItemStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource ParagraphImageMenuItemControlTemplate}" />

<Setter Property="SeparatorTemplateKey" Value="{StaticResource ParagraphImageMenuItemControlTemplate}" />

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource ParagraphImageMenuItemControlTemplate}" />

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource ParagraphImageMenuItemControlTemplate}" />

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource ParagraphImageMenuItemControlTemplate}" />

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource ParagraphImageMenuItemControlTemplate}" />

<Setter Property="Margin" Value="0 0 0 4" />

</Style>

<telerik:HierarchicalDataTemplate x:Key="MenuItemTemplate" ItemsSource="{Binding}">

<telerik:ContainerBinding.ContainerBindings>

<telerik:ContainerBindingCollection>

<telerik:ContainerBinding PropertyName="Tag" Binding="{Binding Navigation}" />

<telerik:ContainerBinding PropertyName="CommandParameter" Binding="{Binding Page}" />

<telerik:ContainerBinding PropertyName="Header" Binding="{Binding Content}" />

<telerik:ContainerBinding PropertyName="IsSeparator" Binding="{Binding IsSeparator}" />

</telerik:ContainerBindingCollection>

</telerik:ContainerBinding.ContainerBindings>

<TextBlock Text="{Binding Content}" />

</telerik:HierarchicalDataTemplate>

answered on 09 Jan 2012, 10:36 AM

Hi Nicolas,

The RadMenu Customization example indeed uses a single template for both top level items and top level header items. This is, of course, only because it suits the custom scenario of the example.

In the MenuItemTopLevelSectionStyle you will notice that the MenuItemTopLevelControlTemplate is responsible for all top level items. To force the selector to distinguish between top level items and top level header items, you will need to duplicate the MenuItemTopLevelControlTemplate and customize it to fit top level items only, i.e. to edit its Focus state as per your requirements.

Please, check the source below. It uses a duplicate MenuItemTopLevelControlTemplate2:

<Style x:Key="MenuItemTopLevelStyle" TargetType="telerik:RadMenuItem">

<Setter Property="Template" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="SeparatorTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="SubmenuItemTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate2}"/>

<Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource MenuItemTopLevelControlTemplate}"/>

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<StackPanel Orientation="Horizontal" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

<Setter Property="telerik:AnimationManager.AnimationSelector">

<Setter.Value>

<telerik:AnimationSelector>

<telerik:SlideAnimation Direction="In" SlideMode="Top" AnimationName="Expand" TargetElementName="PopupContent" />

</telerik:AnimationSelector>

</Setter.Value>

</Setter>

</Style>

<ControlTemplate x:Key="MenuItemTopLevelControlTemplate2" TargetType="telerik:RadMenuItem">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Disabled"/>

<VisualState x:Name="Highlighted">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" Storyboard.TargetProperty="Opacity">

<LinearDoubleKeyFrame KeyTime="00:00:00.1" Value="1" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Normal"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0:0:0.2"/>

</VisualStateGroup.Transitions>

<VisualState x:Name="Unfocused" />

<VisualState x:Name="Focused">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" Storyboard.TargetProperty="Opacity">

<LinearDoubleKeyFrame KeyTime="00:00:00.1" Value="1" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">

<VisualState x:Name="Checked"/>

<VisualState x:Name="Unchecked"/>

<VisualState x:Name="HideIcon"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Rectangle x:Name="BackgroundVisual" Fill="{StaticResource MenuItemTopLevelBackground_MouseOver2}" Opacity="0" />

<TextBlock x:Name="TextElement" Text="{Binding Content}" TextDecorations="None" Foreground="White" FontWeight="Bold" Margin="20 6 40 6" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="14" />

</Grid>

</ControlTemplate>

I hope this will be helpful.

Kind regards,
Dani
the Telerik team

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

answered on 10 Jan 2012, 10:08 AM

Hello,

RadMenuItems do not have a true Selected state. They have a Checked state.

To make your menu items from the Customization example checkable, add a bool property to the MenuItemViewModel:

private bool isCheckable = false;

public bool IsCheckable

{

get

{

return isCheckable;

}

set

{

isCheckable = value;

}

Bind it with a ContainerBinding:

<telerik:HierarchicalDataTemplate x:Key="MenuItemTemplate" ItemsSource="{Binding}">

<telerik:ContainerBinding.ContainerBindings>

<telerik:ContainerBindingCollection>

<telerik:ContainerBinding PropertyName="Header" Binding="{Binding Content}" /> <telerik:ContainerBinding PropertyName="IsSeparator" Binding="{Binding IsSeparator}" />

<telerik:ContainerBinding PropertyName="IsCheckable" Binding="{Binding IsCheckable}" />

</telerik:ContainerBindingCollection>

</telerik:ContainerBinding.ContainerBindings>

<TextBlock Text="{Binding Content}" />

</telerik:HierarchicalDataTemplate>

Make your items checkable:

<local:MenuItemViewModel Content="Gallery" Type="TopLevel" IsCheckable="True">

Add the state in MenuItemTopLevelControlTemplate2:

<VisualState x:Name="Checked">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckedBorder" Storyboard.TargetProperty="Opacity">

<LinearDoubleKeyFrame KeyTime="00:00:00.1" Value="1" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

This will result in your items changing when clicked.

Please, note that the checkable menu items work just like a toggle button, where positions are similar to on/off states. To make a menu item unchecked when another menu item has been checked is currently not possible.

I hope this helps.

Kind regards,
Dani
the Telerik team

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