Styling the top level to appear as tabs?

[Chris]

Hi,

    I'd like to take the top level elements of the radmenu and make them appear as tabs and change all their state appearances but I'm having trouble finding that particular template so I can edit the objects. Sorry to ask but can you point me in the right direction? I've looked at the documentation for styling the radmenu but I havent found the particular template, just the random existing resources like brushes I can edit if I break it out? Any insight would be appreciated thanks!

[Dani]

Hi Chris,

To accomplish the task of displaying the top level menu items as tabs, you need to modify the TopLevelHeaderTemplate (when the menu item does have submenu items) or the TopLevelItemTemplate (when the menu item does not have submenu items).

These templates contains a ButtonChrome control which is responsible for the appearance of the RadMenuItems. Therefore this is the main point in your customization process - you should customize the control template of the ButtonChrome control.

I attach here a basic sample with the TopLevel items as tabs. Please, search for the word NOTe to check modified spots.

I hope this helps.

All the best,
Dani
the Telerik team

[Chris]

Thanks!

   That helped me through my first challenge, now if I could inquire just a little bit further to supplement the documentation.

a.     Where might I find the ContentPresenter for the top level menu items to change the font foreground color?

b.     Also, I'm editing an existing radmenu where somewhere the previous designer has applied colors to the top level menu item apparently somewhere other than in the button chrome. Is there another place I might find settings to elements that could effect the background/border of that top level menu item besides just the button chrome?

    Thanks much for your help!

[Chris]

Thanks!

   That helped me through my first challenge, now if I could inquire just a little bit further to supplement the documentation.

a.     Where might I find the ContentPresenter for the top level menu items to change the font foreground color?

b.     Also, I'm editing an existing radmenu where somewhere the previous designer has applied colors to the top level menu item apparently somewhere other than in the button chrome. Is there another place I might find settings to elements that could effect the background/border of that top level menu item besides just the button chrome?

    Thanks much for your help!

[Dani]

Hi Chris,

The foreground for the top level menu items can be easily changed through a simple style for RadMenuItem. You already have a RadMenuItemStyle in the previously sent sample. If you simply add a Setter to change the foreground, the change will be applied to the top level header menu items.

Alternatively, the foreground can be changed from the ControlTemplate for TopLevelHeaderItem. Inside the template, you will find:

<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

If you change that ContentPresenter to a ContentControl, you will be able to apply a different foreground. Of course, this second approach is redundant, because there is no need to change the control template if you can apply a Foreground to the RadMenuItemStyle in the conventional way.

I hope this helps.

Regards,
Dani
the Telerik team