Using a wrap panel for items template in RadMenu

[paul]

Hi,

I can have a variable number of submenu items in my RadMenuItem ItemsSource. If the list has a number greater than 25/26, in my application the remainder of the list are obscured from view.

Is it possible to use a RadWrapPanel for the item template so it would effectively give me multiple columns of menu items?

Regards,

Paul Chapman
Software Engineer
DIGITALK Limited

[Hristo]

Hi paul,

The latest available version of RadMenuItem doesn't include ScrollViewer.  This will probably change with the future version.

As a workaround for you problem - you can set RadWrapPanel as ItemsPanel, like shown below:

<telerik:RadMenuItem Header="File">
   <telerik:RadMenuItem.ItemsPanel>
      <ItemsPanelTemplate>
         <core:RadWrapPanel Orientation="Vertical" Height="400"/>
      </ItemsPanelTemplate>
   </telerik:RadMenuItem.ItemsPanel>
   <telerik:RadMenuItem Header="Open"/>
   <telerik:RadMenuItem Header="Save"/>
   <telerik:RadMenuItem Header="Close"/>
   <telerik:RadMenuItem Header="Exit"/>
</telerik:RadMenuItem>

This way if you have a lot if items they will split in columns.

Thanks for using our controls and we apologize for the inconvenience.

Your Telerik points have been updated as per our EAP Program.

Best wishes,
Hristo
the Telerik team

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

[paul]

Thanks for the quick reply as always, ill try that tomorrow.

I've also encountered some other issues when using the RadMenu.

1. I'm trying to apply a style to the menu. I could not find any examples of styling the RadMenu in the examples or help file. (NB. The CHM help file seems to be incomplete for RadMenu).

I used Redgate Reflector and tried to apply the style from the generic.xaml for the RadMenu but to no avail. A quick example would be nice.

2. I'm trying to bind to a generic Dictionary <int, string>, so I set the DisplayMemberPath to "Value" like I would bind any other bindable control but it still displays the  Dictionary <int, string>.ToString()  value.

Thanks again,

Paul

[Hristo]

Hi paul,

At the moment we don't have an example that shows how to style RadMenuItem but you can see how this is done in the QSFPage.xaml.cs.

RadMenuItem menuItem = new RadMenuItem();
menuItem.Header = header;
RadControl.SetTheme(menuItem, new Theme(new Uri("Telerik.Windows.QuickStart;component/generic.xaml", UriKind.Relative)));

The Uri points to the file that contains a ResourceDictionary with four control templates with special keys:
TopLevelItemTemplate, TopLevelHeaderTemplate, SubMenuItemTemplate and SubMenuHeaderTemplate

<ControlTemplate x:Key="TopLevelItemTemplate" TargetType="telerik:RadMenuItem">
   ...
</ControlTemplate>
<ControlTemplate x:Key="TopLevelHeaderTemplate" TargetType="telerik:RadMenuItem">
   ...
</ControlTemplate>
<ControlTemplate x:Key="SubMenuItemTemplate" TargetType="telerik:RadMenuItem">
   ...
</ControlTemplate>
<ControlTemplate x:Key="SubMenuHeaderTemplate" TargetType="telerik:RadMenuItem">
   ...
</ControlTemplate>

When you set a theme, RadMeunItem will search the keys (or if you want you can specify different keys by setting the corresponding properties - SubmenuHeaderTemplateKey, SubmenuItemTemplateKey, TopLevelHeaderTemplateKey and TopLevelItemTemplateKey of RadMenuItem) in the file specified in the Uri.

As for the theme of RadMenu - it is resource located in /Theme/Menu.xaml in Telerik.Windows.Controls.Navigation assembly.

The Help file is being updated as we speak. Sorry about that.

Regarding your second question - at the moment there is a bug in our HeaderedtemsControls and DisplayMemberPath is not working with RadMenu, RadTreeView and RadPanelBar. This will be fixed with the next official release due end of October.

Thanks for your feedback. We really appreciate it. Your Telerik points have been updated as per our EAP Program.

Regards,
Hristo
the Telerik team

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

[paul]

Hristo,

I'm still having problems with styling the RadMenu....

I have a presentation this afternoon to the product managers and the menu appearance is letting the application down.

I have grabbed the 'default' style from the assembly and give the RadMenu and RadMenuItem a x:Key of MyRadMenuStyle and MyRadMenuItemStyle. I also specify the control templates SubMenuHeaderTemplate etc. with the default names. I changed some values to change the background of the menu and submenu item to be #003867 instead of the grey.

When I set ths the style as Style="MyRadMenuStyle" and SetTheme pointing to the current document uri the menu still has the default style?

Could you please provide a example control template, style and a method of applying it to make the menu background #003867 instead of grey?

Thanks in advnace,

Paul.

[Valentin.Stoychev]

Hi Paul,

In the download of the Silverlight suite, there is a Visual studio project which contains all the controls, styled with their default skin so that they can be edited in Blend. You can open this project in Blend (or in VS if want to manualy edit the templates) and to totaly customize the RadMenu appeareance.

For your convenience I'm attaching the project to this thread also. Check the Menu.xaml to see how this is done.

Sincerely yours,
Valentin.Stoychev
the Telerik team

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

[paul]

Hi Valentin,

I have actually used the sample (and have tried again with this project) but with no luck.

The SubMenuItemTemplate doesn't seem to change the color of the background of the popup that displays the sub menu items. It is always grey.

Regards,

Paul

[Hristo]

Hello paul,

Sorry for the late replay.

Both TopLevelHeader and SubMenuHeader templates have RadPopup control. The content of RadPopup is Border. Those border Background property controls the background of the panel that holds menuItem child items. So in order to change menuItem background you should change the background of this border.

Current template have 2 additional borders - to make the shadow effect. If you want yellow (for the demo purpose) menuItem background you have to change the 3rd border Background property to "Yellow" like this:

<telerik:RadPopup Foreground="{TemplateBinding Foreground}" x:Name="PART_Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}">
    <Border BorderBrush="#14000000" BorderThickness="1,0,1,1">
        <Border BorderBrush="#26000000" BorderThickness="1,0,1,1">
            <Border Background="Yellow" BorderBrush="#FFFFFFFF" BorderThickness="1">
                <Grid>
                    <Rectangle Margin="24,0,0,0" Width="1" Fill="#19000000" HorizontalAlignment="Left"/>
                    <Rectangle Margin="25,0,0,0" Width="1" Fill="#7FFFFFFF" HorizontalAlignment="Left"/>
                    <ItemsPresenter />
                </Grid>
            </Border>
        </Border>
    </Border>
</telerik:RadPopup>

Don't forget to make this change in both TopLevelHeader and SubMenuHeader templates.

Hope this helps. And sorry again for the delay.

Greetings,
Hristo
the Telerik team

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

[Grey]

Hi Hristo,

I've also been trying to modifiy the controlTemplates for the RadMenu (which I pulled from the menu.xaml resources in the assembly), and am also having the same problem that Paul is having... No matter what I set the values to on the TopLevelHeader and SubMenuHeader templates, the background is always gray.

I have successfully changed the top level menu background but not the sub menus... A

Any ideas?

Thanks in advance,


Regards.

Grey

[paul]

If I specify the RadMenuItems in the xaml, and set the style the menu displays correctly.

Our menu's are generated on the fly, so we create the header items and then set the ItemsSource to our list of menu items.

I have a test project to reproduce the problem we are facing. I have modified your example blend project and in the constructor we programmatically set the ItemsSource. The items are shown but with the gray background.

We are using a RadWrapPanel as the ItemsPanelTemplate which may be the source of the problem. You can mail me at paul.chapman at digitalk.com for the example project.

Regards,

Paul.

[Hristo]

Hello paul,

When you set the Style in XAML everything works because you have set the style explicitly. But the style is not propagated for the generated items so their style is the default style (with gray background).
You can use ItemContainerStyle property to set the style of generated items or if you want different style for different menuitems you can use ItemContainerStyleSelector property.

Let me know if I can help you further.

----------------------------------------------------------------------------------

Hello, Grey

Do you use ItemsSource to generate the child menuitems or you add them explicitly?
Please do set the style for all menuitems if you add them through xaml or use ItemContainerStyle property to set the style of generated items or if you want different style for different menuitems you can use ItemContainerStyleSelector property.

If you need further assistance I'll be glad to help.


Best wishes,
Hristo
the Telerik team

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

[paul]

Thanks, that solved it. I thought it was going to be something little.

Kind Regards,

Paul.

[Grey]

Hi Hristo ,

Thanks for the advice. Its working now (Im mocking up a menu through XAML for now - but it will be dynamic eventually).

Thanks,

Grey

[Schoolmaster]

Hi,

I'm having problems with the RadControl.SetTheme method.
I've added the RadMenu theme to my project (changed nothing in  it yet).
When I create a RadMenuItem in code I call the SetTheme method with that menuitem and a URI to the added menutheme.xaml.
When I run the code the menuitem is empty (no text and no submenuitems.)

What am I doing wrong?

Regards,

Jan-Paul

[Hristo]

Hi Siebrand,

Can you share more details about this problems?
For example - do you set theme (RadControls.SetTheme) on all RadMenuItem - you should set it to all MenuItems?
Do you set menuItem.Header property - if not then menuItem will be empty?
Do you add RadMenuItems to menuItem.Items collection - if not then menuItem won't have submenuitems?

Thanks.

Regards,
Hristo
the Telerik team

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

[Schoolmaster]

Hi Hristo,

Yes, I set the theme on all menuitems, I also set the header and add the items to the collection.
If I don't set the theme everything shows up fine, but when I set the theme on all menuitems the rootitem is empty and has no submenu anymore.

Thanks,
Jan-Paul

[Hristo]

Hi Siebrand,

Is the file that holds the theme with Build Action=Resource?
If it works without setting the style then this means that it is something related to the new theme.
Can you confirm that you have correct build action for your theme file? Also please check the URI again (if the file is in a folder then the uri should include this folder too)

One example on how to set the theme - from our QSF project:

RadControl

.SetTheme(tree, new Theme(new Uri("Telerik.Windows.QuickStart;component/Themes/generic.xaml", UriKind.Relative)));

This mean that the generic.xaml file is with Build Action = Resource and it is located in Themes folder in Telerik.Windows.QuickStart assembly.

I'm waiting for your response.

Best wishes,
Hristo
the Telerik team

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

[Schoolmaster]

Hi Hristo,

thanks for the quick response!
The build action was set on resource, but I found the problem looking at your example code (which I didn't notice when looking at the QSF project earlier). I didn't prefix the theme file with "component/" in the URI.
I have now and it's working.

Thanks again,
Jan-Paul

[senthil kumar]

Hi

I m new to this technology

In my application, I have used rad menu
But i want to change the style for menu.
Can any one send Resource dictionary for styling rad menu.
It is urgent need.

Please help me

[Pana]

Hi Senthil Kumar,

I have replied in more details to your other ticket but I will also attach the project here. You can find custom theme based on Office_Silver with the complete Menu.xaml.

All the best,
Panayot
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.