Rounded Corner RadContextMenu Style for Submenu

2 posts, 1 answers
  1. Nag
    Nag avatar
    3 posts
    Member since:
    Aug 2012

    Posted 26 Apr 2013 Link to this post

    I couldn't able to apply rounded corners to the SubMenu's in the RadContextMenu. I do like to know how to set the minwidth for submenu just like in the TopLevelMenu and How to change the highlightcolor. Any help would be great. Thank you in advance.
            <Style x:Key="MenuItemStyle" TargetType="{x:Type telerik:RadMenuItem}">
                <Setter Property="Icon" Value="{Binding Icon}" />
                <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />           
            <Style x:Key="ContextMenuStyle" TargetType="telerik:RadContextMenu">
                <Setter Property="Template">
                        <ControlTemplate TargetType="telerik:RadContextMenu">
                            <Border CornerRadius="5" BorderBrush="Gray" BorderThickness="1" Background="White" SnapsToDevicePixels="True">
                                <ItemsPresenter />
            <Border Background="Gray" >
                    <telerik:RadContextMenu x:Name="textcontext" IconColumnWidth="0" MinWidth="150" 
                                            Style="{StaticResource ContextMenuStyle}" HorizontalAlignment="Right"
                                            NotifyOnHeaderClick="True" ItemContainerStyle="{StaticResource MenuItemStyle}" ItemsSource="{Binding}" >
                        <telerik:RadMenuItem Header="New" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Header="Edit" >
                            <telerik:RadMenuItem Header="New" />
                            <telerik:RadMenuItem IsSeparator="True" />
                            <telerik:RadMenuItem Header="Edit">
                                <telerik:RadMenuItem Header="New" />
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadMenuItem Header="Edit"/>
                                <telerik:RadMenuItem Header="Delete" />
                                <telerik:RadMenuItem Header="Select" />
                            <telerik:RadMenuItem Header="Delete" />
                            <telerik:RadMenuItem Header="Select" />
                        <telerik:RadMenuItem Header="Delete" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Header="Select" />

  2. Answer
    Hristo avatar
    832 posts

    Posted 01 May 2013 Link to this post

    Hi Nag,

    I see that you have added round corners to RadContextMenu but in order to have round corners for all sub menus you have to modify the template of RadMenuItem. RadMenuItem have four different templates - TopLevelHeaderTemplate for items in RadMenu that have sub menus, TopLevelItemTemplate for items in RadMenu that doesn't have sub menus, SubMenuHeaderTemplate - for items in RadContextMenu or other RadMenuItem that have sub menus and SubMenuItemTemplate - for items in RadContextMenu or other RadMenuItem that doesn't have sub menus.
    In your case you have to modify SubMenuHeaderTemplate where the Popup is placed and add the round corner and change the highlight. You should also modify SubMenuItemTemplate to change the highlight for menu items that doesn't have sub menus.

    I've prepared sample project demonstrating all changes. You can search for Modified Code commented section in XAML to see which parts are modified compared to the original template.
    In the project I've added all templates but if you don't need them you can remove them.

    You can read more about RadMenu, RadContextMenu and RadMenuItem customization here:

    Let us know if this helps you.

    Kind regards,
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top