ContextMenu with Hierarchical Data Template and with Title for any submenus

4 posts, 0 answers
  1. Daryn
    Daryn avatar
    6 posts
    Member since:
    Mar 2012

    Posted 25 Jun 2012 Link to this post

    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

  2. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 28 Jun 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. Daryn
    Daryn avatar
    6 posts
    Member since:
    Mar 2012

    Posted 06 Jul 2012 Link to this post

    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
  4. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 10 Jul 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top