ContextMenu with Hierarchical Data Template and with Title for any submenus

[Daryn]

Hi,

I have to add Context menu in the page and this menu should be has the Title in the some sub menus (image attached).

I did this:

<telerik:RadContextMenu.ContextMenu>

    <telerik:RadContextMenu telerik:StyleManager.Theme="Windows7"

                    ItemsSource="{Binding SomeItemsSource}"

                    EventName="MouseLeftButtonUp"

                    ShowDelay="0"

                    Placement="Bottom">

        <telerik:RadContextMenu.ItemTemplate>

            <telerik:HierarchicalDataTemplate ItemsSource="{Binding SubItems}">

                <telerik:ContainerBinding.ContainerBindings>

                    <telerik:ContainerBindingCollection>

                        <telerik:ContainerBinding PropertyName="Icon" Binding="{Binding Icon}" />

                        <telerik:ContainerBinding PropertyName="IsSeparator" Binding="{Binding IsSeparator}" />

                        <telerik:ContainerBinding PropertyName="Command" Binding="{Binding Command}" />

                        <telerik:ContainerBinding PropertyName="IsEnabled" Binding="{Binding IsEnabled}" />

                    </telerik:ContainerBindingCollection>

                </telerik:ContainerBinding.ContainerBindings>

                <ContentPresenter x:Name="contentPresenter" Content="{Binding Header}" />

            </telerik:HierarchicalDataTemplate>

        </telerik:RadContextMenu.ItemTemplate>

    </telerik:RadContextMenu>

</telerik:RadContextMenu.ContextMenu>

public class MenuItem : INotifyPropertyChanged
{
    private object _header;
    private Uri _iconUrl;
    private bool _isSeparator;
    private bool _isEnabled;
    private bool _isTitle;

    public MenuItem()
    {
        SubItems = new ObservableCollection<MenuItem>();
        IsEnabled = true;
    }

    public object Header
    {
        get { return _header; }
        set
        {
            _header = value;
            OnPropertyChanged("Header");
        }
    }

    public Uri IconUrl
    {
        get { return _iconUrl; }
        set
        {
            _iconUrl = value;
            OnPropertyChanged("IconUrl");
        }
    }

    public bool IsSeparator
    {
        get { return _isSeparator; }
        set
        {
            _isSeparator = value;
            OnPropertyChanged("IsSeparator");
        }
    }

    public Image Icon
    {
        get
        {
            return new Image
            {
                Source = new BitmapImage(IconUrl)
            };
        }
    }

    public bool IsEnabled
    {
        get { return _isEnabled; }
        set
        {
            _isEnabled = value;
            OnPropertyChanged("IsEnabled");
        }
    }

    public bool IsTitle
    {
        get { return _isTitle; }
        set
        {
            _isTitle = value;
            OnPropertyChanged("IsTitle");
        }
    }

    public ICollection<MenuItem> SubItems { get; set; }

    public ICommand Command { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        if(PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

1. If I set IsEnabled property with binding it's not working correctly. For example, if I set IsEnabled property false that everything ok, but  when I'm using some Command and command canexecute method returns true that menu item still disabled.

2. I tried to create my own custom control which inherited RadMenuItem and then I tried to use this control, but I had few problems with UI part.

3. I tried to add my custom property with the name of IsTitle, but I have to know how I can change the default item type which used ContextMenu for create new menu item. (As I know, the default type which RadContextMenu used is RadMenuItem)

How can I solve this problem?

Best regards,

Daryn

[Konstantina]

Hello Daryn,

Have you reviewed this help article: http://www.telerik.com/help/silverlight/radcontextmenu-how-to-use-commands-with-the-radcontextmenu.html#Preparing_the_RoutedUICommands
Could you please send us your project, where you experience difficulties with the commands on the ContextMenu, so that we can run it here locally and review it. In that way we will be able to isolate the problem and provide a fix, if needed.

Looking forward to your reply.

Regards,
Konstantina
the Telerik team

[Daryn]

Thank you for answer, but if I am using ContainerBinding object:

<telerik:ContainerBinding.ContainerBindings>
    <telerik:ContainerBindingCollection>
        <telerik:ContainerBinding PropertyName="Icon" Binding="{Binding Icon}" />
        <telerik:ContainerBinding PropertyName="IsSeparator" Binding="{Binding IsSeparator}" />
        <telerik:ContainerBinding PropertyName="Command" Binding="{Binding Command}" />
        <telerik:ContainerBinding PropertyName="IsEnabled" Binding="{Binding IsEnabled}" />
    </telerik:ContainerBindingCollection>
</telerik:ContainerBinding.ContainerBindings>

how can I set styles for each menu item. For example I want to change style for Disabled state, how can I do it?

Best regards,
Daryn

[Konstantina]

Hello,

The most simple solution would be for you to use an ItemContainerStyle for the RadMenu and edit its visual states. Simply adjust the disabled state to reflect the background you wish. No additional code needed.
But if you want to have different background for the disabled state for each RadMenuItem then you need to copy all styles for the menu item which are 4 and edit their disabled state:  TopLevelHeader, TopLevelItem, SubmenuHeader and SubmenuItem. More information about the templates and how to style the RadMenuItems you could find in our online documentation: http://www.telerik.com/help/silverlight/radmenu-styles-and-templates-templates-structure.html

Hope this information helps.

Regards,
Konstantina
the Telerik team