RadMenuItem popup style

4 posts, 0 answers
  1. Costa
    Costa avatar
    4 posts
    Member since:
    Apr 2012

    Posted 28 Jun 2013 Link to this post

    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
  2. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 28 Jun 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Costa
    Costa avatar
    4 posts
    Member since:
    Apr 2012

    Posted 28 Jun 2013 Link to this post

    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
  5. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 01 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top