Focused animation on specific TopLevelItem

[Vonziz]

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

[Dani]

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

[Vonziz]

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?

<!-- Example layer colors -->
 <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" />

 <!-- Menu colors -->
 <LinearGradientBrush x:Key="MenuBackground" EndPoint="0.5,1" StartPoint="0.5,0">
   <GradientStop Color="Transparent" Offset="0"/>
   <GradientStop Color="Transparent" Offset="1"/>
 </LinearGradientBrush>

 <!-- TopLevel MenuItem colors -->
 <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>

 <!-- TopLevel section -->
 <SolidColorBrush x:Key="MenuItemSeparatorDark" Color="#FFE4E4E4" />
 <SolidColorBrush x:Key="MenuItemSeparatorLight" Color="White" />

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

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

 <!-- Special Link -->
 <SolidColorBrush x:Key="MenuItemSpecialLinkForeground" Color="#FF0066CC" />

 <!-- Link MenuItem colors -->
 <!-- !! Foreground coloring is hardcoded in the storyboards -->
 <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" />
     <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>
       </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" />
       <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto" />
       <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>

[Vonziz]

Hi Dani,

Any Ideas?

[Dani]

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

[Vonziz]

Works great!!!
Thanks a lot Dani.

Last question : I want to define a style for top level selected menu, how can I make that?

[Dani]

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

[Vonziz]

Hi Dani,

I've integrated your source code in my project but I've got a question : What is the type of CheckedBorder component in the storyboard?

Thanks

[Dani]

Hi,

CheckedBorder is a Border element with collapsed visibility. Its visibility is changed to visible only for the Checked visual state.


Regards,
Dani
the Telerik team

[Vonziz]

Hi Dani!

I've tested your solution and it works partially.

The graphic render is OK but I've got difficulties to set the menu to "checked" by the code.

Have you got an other solution to launch the checkable animation (or other type) without this property?

[Dani]

Hi Nicolas,

As there is no selected state in the RadMenuItem, if you wish to customize the top level menu items when a submenu is open, you can alternatively use the IsSubmenuOpen property of RadMenuItem.

Binding a visual element in the template of the top level items to the IsSubmenuOpen property will allow you to make that element visible only when its submenu is open, thus appearing as selected.

I hope this helps.


All the best,
Dani
the Telerik team