Menu Titles without submenu are not Highlighted in 2011 Q1

[Giuseppe]

Hi,

Here attached i have sent you screenshots of the MenuCustomization example in 2010 Q3 issue and 2011 Q1.

The problem is that i have tried to use the 2010 Q3 Menu Customization where i have attached a new 
MenuTitle without a sub menu, this will  be normally Highlighted (VisualStateManager is correctly triggerd) 
and a blue background can be noticed when the user passes over (MouseOver) the menu title,
this works fine and is what i needed.

The same code in 2011 Q3  returns no effect when a MouseOver event is triggered.

Kind Regards

Giuseppe

[Dani]

Hello Giuseppe,

The Customization example of RadMenu has not been modified in 2011 Q1. It works as expected at our side. Please, find a short video to verify the correct behavior of the MenuItem.

The MouseOver state in RadMenu practically behaves just as if the menu item is focused. Therefore, in  MenuItemTopLevelControlTemplate the Focus state is responsible for the visual effect you are referring to. All it takes for it to work properly is to have these states in the MenuItemTopLevelControlTemplate:

<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>
                           </Storyboard>
                       </VisualState>
                   </VisualStateGroup>
               </VisualStateManager.VisualStateGroups>

Kind regards,
Dani
the Telerik team

[Giuseppe]

 

Hi Dani,

Thank you for your reply but i think that maybe i have not been quite clear enough in posting my question.

I have seen your attached video.

I understand that when the MenuTitle has sub items attached the MenuTitle is highlighted when the mouse passes over this Title opening the submenu.  

In fact 2011 Q1 it works fine (like you can see in the demo example) UNTIL you attach a MeunuTitle with NO sub menu items
unlike the 2010 Q3 issue where this behavior is working fine.

What i would like to say is that if you take the telerik's source example code (2011 Q3 vs 2010 Q1) and try to add the two
code lines that i have attached in the screenshots you can see that i am just adding a new MenuTitle entry "Without submenu items", then recompile and run the example, You will then notice different behaviors between the two issues. 

As i said the behavior is that 2010 Q3 Will Highlight the MenuTitle and 2011 Q1 Will Not Highlight the Title.

I have also seen your attached code for the VisualStateManager where the event of MouseOver is triggered to fire the Highlight of the Title.

I think that the problem is that 2011 Q1 does not fire this event when the MouseOver occurs when there are 
no submenu items attached to the MenuTitle.

Thank you for the help and time spent on this.

Kind Regards,
Giuseppe
 

[Dani]

Hello Giuseppe,

Please, try the following: use the Highlighted state for TopLevel menu items that do not have a submenu item to take advantage of the MouseOver effect. Duplicate the existing MenuitemTopLevelControlTemplate and use the duplicate for the TopLevelItemTemplateKey:

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

        </Style>

In MenuItemTopLevelControlTemplate2, modify the visual states:

<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">
                      <VisualState x:Name="Unfocused"/>
                      <VisualState x:Name="Focused"/>
                  </VisualStateGroup>
                  <VisualStateGroup x:Name="CheckStates">
                      <VisualState x:Name="Checked"/>
                      <VisualState x:Name="Unchecked"/>
                      <VisualState x:Name="HideIcon"/>
                  </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>

This approach should produce the effect you wish to achieve. Let me know, if you need any further guidance.

Greetings,
Dani
the Telerik team

[Giuseppe]

Hi Dani,

Thanks a lot team!!
This is what exactly wanted:)

Kind Regards,

Giuseppe