Applying menu styles in UI for Silverlight Menu

Terry

157 posts

Member since:
Jul 2009

Posted 21 Sep 2009 Link to this post

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

Admin

2252 posts

Posted 23 Sep 2009 Link to this post

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

157 posts

Member since:
Jul 2009

Posted 23 Sep 2009 Link to this post

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

Admin

920 posts

Posted 28 Sep 2009 Link to this post

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.

untitled.jpg

Terry

157 posts

Member since:
Jul 2009

Posted 28 Sep 2009 Link to this post

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

Admin

920 posts

Posted 01 Oct 2009 Link to this post

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.

mainpage.rar

Terry

157 posts

Member since:
Jul 2009

Posted 07 Oct 2009 Link to this post

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

Admin

920 posts

Posted 09 Oct 2009 Link to this post

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.

contextmenuandchildwindow.rar

Terry

157 posts

Member since:
Jul 2009

Posted 09 Oct 2009 Link to this post

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

Admin

920 posts

Posted 13 Oct 2009 Link to this post

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

37 posts

Member since:
Nov 2010

Posted 21 Jun 2011 Link to this post

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

Admin

848 posts

Posted 24 Jun 2011 Link to this post

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

RadMenu-SL.zip