How to add separtor to menu.

[Alexey]

Hi,

I'd like to create simple one level menu. And I need to insert separtors between menu items. What is the best way to do it?

MenuItem1 <separtor> MenuItem2 <separtor> MenuItem3


Thanks,
Alexey Zakharov.

[Konstantin Petkov]

Hi Alexey,

There is RadSeparator control that you can use with RadMenu for Silverlight. You can find it in the same Telerik.Windows.Controls.Navigation assembly. Please take a look at the live demo here for example:

http://demos.telerik.com/silverlight/#Menu/FirstLook

The "File" and "Edit" Menu items both contain Separator. I hope this helps.

Regards,
Konstantin Petkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Alexey]

That is nice if we add menuitems declarative, but if i'm using databinding it is a problem because if i add separtor inside template it would appear also in the end of menu.

[Miroslav]

Hi Alexey,

You can mix RadSeparator instances with your objects. For example I created a menu:

<nav:RadMenu>
    <nav:RadMenuItem Header="File" x:Name="file" />
    <nav:RadMenuItem Header="Edit" />
</nav:RadMenu>

and then added an ItemsSource:

file.ItemsSource = Enumerable.Range(1, 11).Select<int,object>(num =>
    {
        if (num % 3 == 0)
        {
            return new RadSeparator();
        }
        else
        {
            return String.Format("Item {0}", num);
        }
    });

This is just a quick test, but it should work like that if you are using HierarchicalDataTemplates and have a more complex structure.

I realize the RadSeparator objects cannot be easily serialized and they have to mix with data objects, but you can replace them easily just before setting the ItemsSouce and have placeholder data objects for them.

Please come back to us if you need more help or there are any issues.

Kind regards,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Alexey]

Hi guys,

Don't you think that this solution is some kind of hack? =)

It would be great if you will add separator template or separator style property, which will hold separators template.

I've made a little experiment with adding separator to standart listbox control and it looks as I need. But it breaks listbox functionality because of its rules to get current item index.

        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
        {
            var listBoxItem = element as ListBoxItem;

            if (listBoxItem != null)
            {
                if (SeparatorStyle != null)
                {
                    if (Items.IndexOf(item) == Items.Count - 1)
                    {
                        var children = (VisualTreeHelper.GetParent(listBoxItem) as Panel).Children;
                        var insertIndex = 1;
                        for (var i = 0; i < Items.Count - 1; ++i)
                        {
                            children.Insert(insertIndex, new ContentControl
                                                            {
                                                                Style = SeparatorStyle
                                                            });
                            insertIndex += 2;
                        }
                    }
                }
            }
            base.PrepareContainerForItemOverride(element, item);
        }


Thanks,
Alexey Zakharov.

[Miroslav]

Hello Alexey,

To be honest, I have never thought about adding the separator to a ListBox. :)

Indeed, it may not act as a separator because the ListBox will wrap it and it will try to select it.

Only Separator-aware ItemsControls will not try to wrap it and treat it as a normal item.

With Telerik ItemsControls you can use the ItemContainerStyleSelector property and give different styles to the container items (like in WPF). This way you can distinguish between different items and provide the necessary style.

Best wishes,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.