Applying menu styles

[Terry]

Are there any examples of applying styles to Silverlight menus?  I want to apply color gradients, to round corners of menu items, etc.  The Silverlight RadMenu demos I have found look pretty basic.

[Valeri Hristov]

Hi Terry,

Unfortunately at the moment we don't have specific examples about styling our Silverlight controls. As far as I understand, you need instructions how to create a custom theme for RadMenu. We have some basic instructions here (and the other Styling articles):
http://www.telerik.com/help/silverlight/extend-and-modify-builtin-themes.html
You could use them as a start, do not hesitate to ask us if you have specific questions.

All the best,
Valeri Hristov
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.

[Terry]

Thank you, Valeri.

Looking at the OfficeBlack theme as you selected, I see the definition of resource RadMenuSelectedBrush, but I can't find where it's applied.  I want to change the selected  and mouseover colors, but I can't figure out what property names to use.

Also, I do not want to leave space on the popup menus for icons, since I don't plan to use them.

Are these issues I must address in a control template, or are there properties I can change directly?  If the latter can you give me their names?

Regarding my other posts, I will download the latest internal build when it is available on Friday.  Do I need to uninstall my current build first, or can I simply install over it?

Thanks,

Terry

[Kaloyan]

Hello Terry,

I will suggest you use the Expression Blend as the easiest way to achieve this. You can find the Resource of  the mouseover and selected stated and etc. in the Resources tab of the Blend tool. Attached is a screenshot of what you should  get as a result, when editing a template of the RadMenuItem. About removing the popup menus icons space you need to edit the template of the RadMenuItem. There you can find a ContentPresenter which has an Icon name. Let us know if you need more clarification.

<ContentPresenter x:Name="Icon" HorizontalAlignment="Center" Margin="1,0,0,0" VerticalAlignment="Center" Content="{TemplateBinding Icon}"/>

Regards,
Kaloyan
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.

[Terry]

Thanks, Kaloyan.

I am now able to style my menu items as I wish, except for removing the icon space on the menu items.  Simply removing the icon ContentPresenter doesn't help.  Could you give me a bit more assistance there?

Thanks,

Terry

[Kaloyan]

Hi Terry,

What you need is to change the SubMenuItemTemplate ControlTemplate. This template is responsible for the skin of the submenu items. There you will find a Grid with a ContentPresenter for the Icon and ContentPresenter for the Header. Check the attached file. Let us know if you need further assistance.

Greetings,
Kaloyan
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.

[Terry]

Hi Kaloyan:

I think I've located the grid you speak of in the template (see below), but I'm not sure how to proceed from here.  Do I just eliminate one of the columns in the grid and its associated ContentPresenter?  I don't uderstand ContentPresenters and don't see how they belong to a particular grid cell.  So can you elucidate a little further?

Again, the goal is to remove the area reserved for an icon.

Thanks,

Terry

                <Grid MinHeight="24">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MinWidth="24" Width="Auto"/>
                        <ColumnDefinition Width="4"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="37"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="17"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter x:Name="Icon" HorizontalAlignment="Center" Margin="1,0,0,0" VerticalAlignment="Center" Content="{TemplateBinding Icon}" />
                    <Path x:Name="GlyphPanel" Fill="{TemplateBinding Foreground}" Height="11" Margin="1,0,0,0" Width="9" Visibility="Collapsed" Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z"/>
                    <ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="2" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                    <Path Fill="{TemplateBinding Foreground}" Margin="1,0,0,0" VerticalAlignment="Center" Width="9" Grid.Column="5" Data="M 0,0 L 4,3.5 L 0,7 Z"/>
                </Grid>

[Kaloyan]

Hello Terry,

To remove the area you need to changed the TopLevelHeaderTemplate of the RadMenuItem which is actually a container of the popup RadMenuItems. You have to set the background of the backgroundBorder and borderLeft border to the same color brush. Attached you can find an example. Let us know if it is  matches your case.

Sincerely yours,
Kaloyan
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.

[Terry]

Thanks, that eliminated the borders and difference in color.  I had to modify the following Resources

<SolidColorBrush x:Key="SeparatorLine1" Color="#FF5982D4" />
<SolidColorBrush x:Key="RadMenu_PopupBackgroundLeftCol" Color="#FF5982D4" />
<SolidColorBrush x:Key="SeparatorLine2" Color="#FF5982D4" />

It looks much better, but it would be even better if I could eliminate the space which is still reserved for the icons.  I.e. the space is still there, but it's now the same color as the rest of the menu items, so it looks like there is a very wide left margin on the submenus.

Visually, this looks OK, so I can live with this if eliminating the space altogether is difficult.

Thanks!

Terry

[Kaloyan]

Hello Terry,

You can reduce the grid column number in the SubMenuHeaderTemplate of the RadMenuItem.

Hope this helps.

Best wishes,
Kaloyan
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.

[ss]

hi,
how to remove the line in between the icon and item in radmneu ites.

and could you seggest nad send me the good look and filed style for radmenu.

[Dani]

Hello Reddy,

Attached is a sample with the border in the IconColumn removed. Please, search for the word "NOTE" to check modified spots.

I hope this helps.

Kind regards,
Dani
the Telerik team