RadMenuItem keeps IsHighlighted

[Mark]

Taking the below code as an example, the steps involved in performing a certain task are as follows:

1. Open Drop Down Button
2. Select Change Widget menu item --> Sum menu opens.
3. Select item within submenu which executes a task on my ViewModel (Command binding)
4. The view model sets its IsOpen  property to false, therfore closing the drop down button due to the IsOpen binding.
5. Reopen the drop down button --> the Change Widget menu item is highlighted. In order to view the submenu, I need to select another menu item then go back to the item that was focused.

Is there a way to unhighlight your a menu item after you have clicked on an item within it's submenu?

<telerik:RadDropDownButton ClickMode="Press"
                        Content="Edit" Background="Transparent"
                        CloseOnEscape="True"
                        IsOpen="{Binding IsMenuOpen, Mode=TwoWay}" >
                        <telerik:RadDropDownButton.DropDownContent>
                            <telerikNavigation:RadContextMenu InheritDataContext="True">
                                <telerikNavigation:RadMenuItem Header="Change Widget"
                                    ItemsSource="{Binding Widgets}">
                                </telerikNavigation:RadMenuItem>
                                <telerikNavigation:RadMenuItem x:Name="ActionMenuItem"
                            Header="Actions" ItemsSource="{Binding WidgetCommands}">
                                </telerikNavigation:RadMenuItem>
                        </telerik:RadDropDownButton.DropDownContent>
                    </telerik:RadDropDownButton>

                

[Tina Stancheva]

Hello Mark,

The RadContextMenu control is especially designed to be opened via an attached property. Therefore it should not be used as a content of a control.

However the RadContextMenu looks pretty silky and sometimes we are working around the above statement. But this is a bit tricky approach - even if we can get a nice looking menu, it will be a half-functioning one. In your case, the limitation is that you cannot workaround the "IsHighlithed" issue.

Therefore, in your scenario it is best not to use the RadContextMenu as a DropDownContent of the RadDropDownButton. Instead, you can insert a ListBox containing RadSplitButtons. For example, you can try something similar to the code bellow:

<telerik:RadDropDownButton Content="Edit" Background="Transparent" CloseOnEscape="True"
                x:Name="myDropDownButton" HorizontalAlignment="Center" VerticalAlignment="Center"
                IsOpen="{Binding IsMenuOpen, Mode=TwoWay}" DropDownOpening="myDropDownButton_DropDownOpening"
                Grid.Column="1">
            <telerik:RadDropDownButton.DropDownContent>
                <ListBox>
                    <ListBoxItem>
                        <telerik:RadSplitButton Content="Change Widget" DropDownButtonPosition="Right"
                                DropDownPlacement="Right">
                            <telerik:RadSplitButton.DropDownContent>
                                <ListBox ItemsSource="{Binding Widgets}"
                                        ItemTemplate="{StaticResource MenuItemTemplate}" />
                            </telerik:RadSplitButton.DropDownContent>
                        </telerik:RadSplitButton>
                    </ListBoxItem>
                    <ListBoxItem>
                        <telerik:RadSplitButton Content="Change Widget" DropDownButtonPosition="Right"
                                DropDownPlacement="Right">
                            <telerik:RadSplitButton.DropDownContent>
                                <ListBox ItemsSource="{Binding Widgets}"
                                        ItemTemplate="{StaticResource MenuItemTemplate}" />
                            </telerik:RadSplitButton.DropDownContent>
                        </telerik:RadSplitButton>
                    </ListBoxItem>
                    <ListBoxItem>
                        <telerik:RadSplitButton Content="Change Widget" DropDownButtonPosition="Right"
                                DropDownPlacement="Right">
                            <telerik:RadSplitButton.DropDownContent>
                                <ListBox ItemsSource="{Binding Widgets}"
                                        ItemTemplate="{StaticResource MenuItemTemplate}" />
                            </telerik:RadSplitButton.DropDownContent>
                        </telerik:RadSplitButton>
                    </ListBoxItem>
                </ListBox>
            </telerik:RadDropDownButton.DropDownContent>
        </telerik:RadDropDownButton>

Please give this approach a try and let me know if it works for you.

Sincerely yours,
Tina Stancheva
the Telerik team

[Mike Chidsey]

You do realize that your own demo of the RadDropDownButton uses a RadContextMenu, right?  Why demonstrate that as a feature if it shouldn't be used like it?  I have the same problem, but if you only have 1 menu item with sub-menu.  The sub-menu will never open once it's been opened.

[Tina Stancheva]

Hello Mike Chidsey,

Yes, we did use the RadContextMenu as a demonstration of a Menu inside the RadDropDownButton. However, we modified our Buttons demos to implement a Menu using a ListBox rather than a RadContextMenu due to the previously mentioned restrictions. You can check out the beta version of our DropDownButton demo here.

Have you tried the ListBox approach and does it work for you? If it doesn't, can you please elaborate on your scenario so that we can provide you with a better suited solution.

Thank you in advance.

Best wishes,
Tina Stancheva
the Telerik team

[Mike Chidsey]

Yeah, for my scenario I need sub-menus, so a listbox won't do.

[Tina Stancheva]

Hi Mike Chidsey,

Can you please have a look at the attached solution and let me know if it can be implemented in your scenario?

Best wishes,
Tina Stancheva
the Telerik team

[Mike Chidsey]

I came up with a much easier solution -- I'm using a RadToggleButton and putting a dropdown indicator image in the content of the button.  The button's IsChecked property is bound to the ContextMenu's IsOpen property and I'm attaching the context menu to the button.  This is for a custom grid column header (see attached image for the output) -- so I create everything in code, but here's a snippet in XAML in case anyone is interested:

<telerik:RadToggleButton IsChecked="{Binding IsOpen, ElementName=myMenu, Mode=TwoWay}">
    <telerik:RadToggleButton.Content>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="My Menu" />
            <Image Source="/Assets/btn-arrow.png" Grid.Column="1" />
        </Grid>
    </telerik:RadToggleButton.Content>
    <telerikNavigation:RadContextMenu.ContextMenu>
        <telerikNavigation:RadContextMenu x:Name="myMenu"
                 ItemsSource="{Binding MyMenuItems}"
                 ItemTemplate="{StaticResource MyMenuItemTemplate}">

        </telerikNavigation:RadContextMenu>
    </telerikNavigation:RadContextMenu.ContextMenu>
</telerik:RadToggleButton>