This is a migrated thread and some comments may be shown as answers.

Chrome Button Style To Menu

1 Answer 152 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
heavywoody asked on 16 May 2014, 04:36 PM
I have an application where I am using buttons across the top that are styled a certain way.  I can seem to figure out how to get that same style to apply to the top level menu.  So I need to know how to apply a chrome button style to a top level menu?  Submenu popup should remain with the default style. Just wanted to change
the style of the main menu so that when we hover over it looks like chrome button.

Here is the styling we are doing on the Button.  Right now, I can't seem to achieve the mouseover effect this has for Top Level menu

<Style TargetType="{x:Type telerik:RadButton}">

                                                                    <Setter Property="Padding" Value="4" />
                                                                    <Setter Property="Margin" Value="1,1,0,1" />
                                                                    <Setter Property="IsTabStop" Value="False" />
                                                                    <Setter Property="Template">
                                                                            <ControlTemplate TargetType="{x:Type telerik:RadButton}">
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderPressed="{TemplateBinding IsPressed}" Template="{DynamicResource ButtonChromeControlTemplate1}">
                                                                                            <telerik:Office_BlackTheme />
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Margin="{TemplateBinding Padding}" />

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 20 May 2014, 08:14 AM
Hello Christian,

You could modify the RadMenuItemStyle and set different control tempaltes for TopLevelItems. The properties you need to modifies are listed in the code snippet below:

<Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource CustomMenuItemTemplate}"/>
<Setter Property="TopLevelItemTemplateKey" Value="{StaticResource CustomMenuItemTemplate}"/>

Inside the Custom control template replace Border named HighlightVisual with the ButtonChrome button. Keep in mind you need to modify the VisualStates to match the desired scenario.

Hope it helps.

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question