Chrome Button Style To Menu

2 posts, 0 answers
  1. heavywoody
    heavywoody avatar
    79 posts
    Member since:
    Oct 2009

    Posted 16 May 2014 Link to this post

    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">
                                                                            <Setter.Value>
                                                                                <ControlTemplate TargetType="{x:Type telerik:RadButton}">
                                                                                    <Grid>
                                                                                        <Chromes:ButtonChrome
    CornerRadius="1"
    RenderNormal="False"
    RenderMouseOver="{TemplateBinding IsMouseOver}"
    RenderPressed="{TemplateBinding IsPressed}" Template="{DynamicResource ButtonChromeControlTemplate1}">
                                                                                            <telerik:StyleManager.Theme>
                                                                                                <telerik:Office_BlackTheme />
                                                                                            </telerik:StyleManager.Theme>
                                                                                        </Chromes:ButtonChrome>
                                                                                        <ContentPresenter
    ContentTemplate="{TemplateBinding ContentTemplate}"
    Content="{TemplateBinding Content}"
    ContentStringFormat="{TemplateBinding ContentStringFormat}"
    Margin="{TemplateBinding Padding}" />
                                                                                    </Grid>
                                                                                </ControlTemplate>
                                                                            </Setter.Value>
                                                                        </Setter>
                                                                    </Style>
                                                                </telerik:RadButton.Style>
  2. Masha
    Admin
    Masha avatar
    355 posts

    Posted 20 May 2014 Link to this post

    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.

    Regards,
    Masha
    Telerik
     
    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top