Open Sub-Menus on mouse over to to reduce clicks

[Richard]

First off, thank you for adding the sub-items on the hamburger menu, it's a great feature. 

I'm trying to reduce the number of clicks a user has to perform to get to a sub-menu in the worst-case scenario if they are already looking at an open sub-menu and want to go to another sub-menu of a different option it can take 3 clicks. 

1st Click closes the sub-menu of the current item
2nd Click opens the sub-menu of the new item
3rd Click activates the sub-menu On Click event. 

Is there a way to have the sub menus automatically open on mouse over to reduce this to one click?

Thanks,
Richard

[Dinko | Tech Support Engineer]

Hello Richard,

Thank you for the provided images.

What you can try is to subscribe globally to all RadNavigationViewItems MouseEnter event by using EventManager.RegisterClassHandler() method. In the event handler, you can get the current item and set its IsExpanded property to true. The code snippet below demonstrate this approach.

public MainWindow()
{
    InitializeComponent();
    EventManager.RegisterClassHandler(typeof(RadNavigationViewItem), RadNavigationViewItem.MouseEnterEvent, new RoutedEventHandler(OnMouseEnterEvent));
}

private void OnMouseEnterEvent(object sender, RoutedEventArgs e)
{
    var navigationViewItem = sender as RadNavigationViewItem;
    if(navigationViewItem != null)
    {
        navigationViewItem.IsExpanded = true;
    }
}

Regards,
Dinko
Progress Telerik

[Richard]

Hi Dinko,

Thank for the reply, the mouse over works great if the menu is open, the mouse over fires for each menu items as you move the mouse up and down.

However, if the panel is closed then the mouse over only fires for the Nav item where you entered the menu. You can no longer mouse up and down the menu and have the items expand automatically as they do when the panel is open. It looks like the pop out of the sub menu steals the mouse over event from the rest of the menu.

Do you know if a possible work around for this?  It is soooo close the behaviour I’m looking for.

Cheers,
Richard

[Dinko | Tech Support Engineer]

Hi Richard,

After digging some time, I think I was able to find a solution to this. In a few words, when an item is expanded, we are showing a transparent Rectangle underneath the expanded content, which is stretch across the navigationview. This way, we are trying to prevent the item expanded content to collapse when hovering a control that gets focus. In your case, you can get the Rectangle in the Loaded event of the RadNavigationView and set the Visibility property to Collapse initially.

private void NavigationView_Loaded(object sender, RoutedEventArgs e)
{
    var rectangle = this.navigationView.ChildrenOfType<Rectangle>().FirstOrDefault(x=>x.Name == "PART_DismissOverlay");
    rectangle.Visibility = Visibility.Collapsed;
}   

In addition, the RadNavigationViewItem derives from ButtonBase. So you can consider using the build-in ClickMode property instead of setting the IsExpanded property. You can set it in Style. The ClickMode property can be set to Hover. This way when the mouse enter the boundaries of the item it will trigger click event.

<Style TargetType="telerik:RadNavigationViewItem" >
    <Setter Property="ClickMode" Value="Hover" /> 
</Style>

Regards,
Dinko
Progress Telerik

[Richard]

Thank you Dinko for helping me out on this one. I really appreciate it.

 

Richard