Problem with DropDownButton and ContextMenu

[Patrick]

Hello,
in my ribbon, I have added a DropDownButton that contains a ContextMenu, following the example in Telerik documentation.
This works well... until the menu contains a sub menu. In this case, as soon as the sub menu is opened, the menu is not closed when we click outside it, only the sub menu is closed.
Patrick

[Petar Marchev]

Hello Patrick,

I created a small test project and I was unable to reproduce the issue you have described. I am sending the project to you for a reference.

On the click of the drop down button a context menu is shown. When I hover over Menu 2 a sub menu is opened (A, B and C). When I go to click the click here button, the context menu and the sub menu are collapsed. Try to run the project and see if you get the same behavior (I tested this with binaries from the last official SP release). If you need further assistance I will ask that you provide a small project that we can run and that reproduces the glitch. Then we can start looking for solutions. 

Regards,
Petar Marchev
Telerik

 

 

[Patrick]

Hello Petar,
thanks for your answer.
I've made some tests and the main difference between my application and your test case is that the content of the drop down button is a control that contains the menu. In my case it is a control to manage the resources, but it can be seen with a simple Border.

If you replace MainWindow.xaml with the following code, you will see the problem:

<Window x:Class="wpf_RibbonView_814947.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <telerik:RadRibbonDropDownButton Text="drop down button" VerticalAlignment="Top">
            <telerik:RadRibbonDropDownButton.DropDownContent>
                <Border>
                    <telerik:RadContextMenu>
                        <telerik:RadContextMenu.Items>
                            <telerik:RadMenuItem Header="Menu 1" />
                            <telerik:RadMenuItem Header="Menu 2" ItemsSource="ABC" />
                        </telerik:RadContextMenu.Items>
                    </telerik:RadContextMenu>
                </Border>
            </telerik:RadRibbonDropDownButton.DropDownContent>
        </telerik:RadRibbonDropDownButton>
        <Button Content="click here" HorizontalAlignment="Right" VerticalAlignment="Top" />
    </Grid>
</Window>

Patrick

[Petar Marchev]

Hi Patrick,

Thank you for the clarification. I was now able to reproduce the issue.

The reason this happens is that the context menu loses focus when the submenus open and it cannot detect a later click outside of its boundaries. This surely looks like a bug but I have currently put it for investigation because we need to check if this is a new bug or a different representation of an already logged bug. I hope that you will be able to work this around by not inserting an additional Border element and leave the DropDownContent to be a RadContextMenu.

Regards,
Petar Marchev
Telerik

 

 

[Patrick]

Hello Petar,
unfortunately, I can't remove the control in between because, as I said, it is not a Border but a control to manage the resources.
Can you please add a follow up after your investigation?
Patrick

[Petar Marchev]

Hello Patrick,

We will contact you again when we have a certain statement for this case. Until we fix the issue, you can try and use the work around I implemented in the attached project. I have used the MouseDown event of the window to see if the drop down button is opened and if the user clicked somewhere outside the drop down button. Have in mind that this code is not well tested so carefully review if it is possible to include some modification of it in your actual application.

Regards,
Petar Marchev
Telerik

 

 

[Sugumar]

Hi,

I had same problem and resolved using below mentioned implementation.
Posting it here which may help for others. :-)

1. Add MouseLeave acb for the meu item.
2. Add delegate command in ViewModel and subsribe it.
3. Set IsOpen of the pull down menu as False inside the event subscribed in view model.

Regards,
Sugumar P

[Sugumar]

Hi,
I had same same issue and resolved by using below mentioned implementation.
Posting it here which may helpful for others :-)

1. Add MouseLeave acb for context menu.
2. Add delegate command in ViewModel and subscribe the event.
3. Set IsOpen of the pull down menu as false in the event.

Regards,
Sugumar P

[Petar Mladenov]

Hi Sugumar,

Thank you for this suggestion.
However, I want to underline the main usage of RadContextMenu. It is to use the RadContextmenu.ConextMenu attached property on some UI Control, for example like so:

<TextBox Width="200"
             VerticalAlignment="Top"
             ContextMenu="{x:Null}">
        <telerik:RadContextMenu.ContextMenu>
            <telerik:RadContextMenu />
        </telerik:RadContextMenu.ContextMenu>
    </TextBox>

Setting the RadContextMenu as direct content in DropDownButton could lead to various focus issues which need additional code to bypass. For direct content in Popups/DropDownContents its better to use RadMenu instead of RadContextMenu.

Additional note on the issue Patrick posted here last year. We consider this scenario as not supported out of the box in our controls suite. It's mainly because nesting ContextMenu directly in DropDownContent should not be supported because of the unpredictable focus issues that might occur.

Regards,
Petar Mladenov
Telerik