Applying menu styles

12 posts, 0 answers
  1. Terry
    Terry avatar
    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.
  2. Valeri Hristov
    Admin
    Valeri Hristov avatar
    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.
  3. DevCraft banner
  4. Terry
    Terry avatar
    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
  5. Kaloyan
    Admin
    Kaloyan avatar
    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.
  6. Terry
    Terry avatar
    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
  7. Kaloyan
    Admin
    Kaloyan avatar
    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.
  8. Terry
    Terry avatar
    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> 
     


  9. Kaloyan
    Admin
    Kaloyan avatar
    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.
  10. Terry
    Terry avatar
    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
  11. Kaloyan
    Admin
    Kaloyan avatar
    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.
  12. ss
    ss avatar
    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.
  13. Dani
    Admin
    Dani avatar
    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
Back to Top
DevCraft banner