Hello Telerik team

I am trying to style RadMenuItem for my WPF application. I am almost done but I am stuck in one critical part.

I am mostly making use of submenuHeader, so I styled the HighlightVisual to suit my needs (for example changed color to green)
The place that was affecting mentioned HighlightVisual was in the trigger Role of SubmenuHeader.

            <Trigger Property="Role"
                     Value="SubmenuHeader">
                           ...
           <Border x:Name="HighlightVisual"                                        
                                            BorderThickness="1"
                                            CornerRadius="1"
                                            Visibility="Collapsed"
                                            Background="Green" />     

In the same role (SubmenuHeader) I also changed the background of the popup (for example Yellow)
                     ...
     <Popup x:Name="PART_Popup"
                                       AllowsTransparency="True"
                                       Focusable="False"
                                       HorizontalOffset="1"
                                       IsOpen="{TemplateBinding IsSubmenuOpen}"
                                       VerticalOffset="-1" >                                  
                                    
                                    <Grid>    
                                        <Grid x:Name="PopupContentElement">                                        
                                            <Border BorderBrush="#FF848484"
                                                    BorderThickness="1"
                                                    Background="Yellow">

Now my problem is this : How do I change the Highlight color of the items in the popup ? I can see that there is an ItemsPresenter defined in the submenuHeader's popup that probably contains radMenuItems, with a default Highlight (border background) color of a yellow gradient but I don't know where this is coming from or is defined. I need to override this default color so my context menu is consistent. Any help would be appreciated.

Telerik version 2012.1.0402
Thanks in advance

Hi Costa,

In order to achieve this you have to modify telerik's Chrome button's template. We've prepared a sample project to demonstrate how to achieve this. Please check the attachment and especially App.xaml - I've marked the brushes which you have to modify.

Hopefully this helps. Feel free to contact us in case you have any problems or concerns.

Regards,

Rosen Vladimirov
Telerik

Hello,
Thanks for your answer

1) In the attached project the ControlBackground_MouseOver brush only affects the outer menu item mouseover (Item 1) not the internal one (Item 1.1) which is similar to what I want.

2) In the radMenuItem template the Chrome is declared 4 times

                        <Chromes:ButtonChrome x:Name="SelectionChrome"
                                              Grid.ColumnSpan="3"
                                              CornerRadius="1"
                                              RenderNormal="False"
                                              RenderMouseOver="{TemplateBinding IsHighlighted}"
                                              RenderPressed="{TemplateBinding IsSubmenuOpen}">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme />
                            </telerik:StyleManager.Theme>
                        </Chromes:ButtonChrome>

a) Is the default Office_BlackTheme affecting the style ?
b) If I create a style  similar to the App.xaml in your attached project and set it on the style property of the above Chromes:ButtonChrome can I affect radmenuitem's popup highlight color ?

Thanks in advance

Hello Costa,

Please accept my apology for the misunderstanding. In order to modify the highlighted color of RadMenuItem in the popup, you will have to find the HighlightVisual element in the template and modify its background. ButtonChrome modifications are needed only when you want to change the highlighted color of top level menu items.

I've modified my project and now you can find both RadMenuItem and ButtonChrome implicit styles in App.xaml file. I've marked the brushes which you have to modify (just search the document for the keyword NOTE). Hopefully this helps. Feel free to contact us in case you have any other problems or concerns.

Regards,
Rosen Vladimirov
Telerik