Rad Menu mouse over color

[Deepak Agarwal]

In my application, I am using Rad menu. Here I am having mouse over color(a shade of orange) on menu item like the mouse over color on Contact menu in attachment(RadMenu). I want this color to be as the color(a shade of blue) of the box on Home menu in attachment(RadMenu). Even I got some solution for this issue on telerik but I need to put heavy and lengthy code for this feature. so please send me some simple sample application to do so.

[Dani]

Hello Deepak,

The Telerik.Windows.Controls assembly contains a ButtonChrome control. It is a themable control responsible for all colors used in RadMenu (and other controls). So in order to change the MouseOver state, you need to change the brushes for the ButtonChrome.

You can easily get the default ButtonChromeStyle. In Blend , find the ButtonChrome in the Assets pane with all controls and drag it onto the design area. Right click > Edit Template > Edit a Copy. This will generate the default ButtonChrome with all its brushes. You will be able to view and modify them in the Resources tab on the right.

From there on you have two options:

1) You can place the ButtonChromeStyle where all your application resources reside and delete its x:Key. This means that the ButtonChromeStyle becomes an implicit style and will get applied everywhere a ButtonChrome appears. If you do not wish to apply that style to every ButtonChrome control, see approach two.

2) Generate the ItemContainerStyle for RadMenu and go through all 4 templates for the RadMenuItem. In each of them, there is a ButtonChrome control. Apply the newly modified style.

I suggest you take the second approach. it will result in having different colors only for the RadMenuControl. If you have other RadControls in your app, they will still keep the default ButtonChrome style.

I hope this helps.

Kind regards,
Dani
the Telerik team

[Yolanda]

Hi Telerik Team!
I've been following posts about RadMenu styling since a few time. For the first time I'v been able to style my raditems thanks to your explanations. I styled the ButtonChrome highlight properties. The ButtonChrome style is common to all the controls (no x:Key).

Today my subitems are highlighted when the mouse is over, however the main item keeps the orange colour when highlighted (See attached screenshot)

If I understand well, the ButtonChrome styling will also change the main menu highlighted style.

Styling the rad menu is hardly difficult, so a more precise documentation will be highly appreciated.
  Regards

[Dani]

Hi Yolanda,

I am glad  you have been able to apply your customization successfully. The ButtonChromeStyle gets applied to all ButtonChrome instances in the ItemContainerStyle, however you need to change a few more brushes. Experiment with the MouseOver and Pressed brushes as well. An illustrative sample is attached for your convenience.

Greetings,
Dani
the Telerik team

[Yolanda]

Hi Dani!
Thanks for your fast answer the exemple is very useful!. I changed the style MouseOver and Pressed but this changes are not applied to the main line in the menu.
I'm able to see your exemple and it has the expected behaviour, however in my case I have a proper style for my menu, I think this is the source of my problem! But I don't know how to solve it ;-) I suppose there's a remaining or missing parameter somewhere in the radmenu style definition that avoids the use of MouseOver and Pressed styles

The menu style is defined like this

<Style x:Key="RadMenuStyle" TargetType="telerik:RadMenu">
        <Setter Property="IconColumnWidth" Value="0"/>
        <Setter Property="Background" Value="{StaticResource MenuBackground}"/>
        <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/>
        <Setter Property="BorderBrush" Value="{StaticResource MenuOuterBorder}"/>
        <Setter Property="BorderThickness" Value="{StaticResource MenuBorderThickness}"/>
        <Setter Property="telerik:AnimationManager.AnimationSelector">
            <Setter.Value>
                <telerik:AnimationSelector>
                    <telerik:SlideAnimation AnimationName="Expand" Direction="In" SlideMode="Top" TargetElementName="PopupContentElement"/>
                </telerik:AnimationSelector>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:RadWrapPanel/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadMenu">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                        <ItemsPresenter/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle" Value="{StaticResource RadMenuItemStyle}"/>
    </Style>

And my RadMenuItemStyle

<Style x:Key="RadMenuItemStyle" TargetType="telerik:RadMenuItem">
        <Setter Property="Padding" Value="{StaticResource MenuItemPadding}"/>
        <Setter Property="Background" Value="{StaticResource MenuBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource PanelBorderBrush}"/>
        <Setter Property="BorderThickness" Value="0,0,1,0"/>
        <Setter Property="TopLevelHeaderTemplateKey" Value="{StaticResource TopLevelHeaderTemplate}"/>
        <Setter Property="TopLevelItemTemplateKey" Value="{StaticResource TopLevelItemTemplate}"/>
        <Setter Property="SubmenuHeaderTemplateKey" Value="{StaticResource SubMenuHeaderTemplate}"/>
        <Setter Property="SubmenuItemTemplateKey" Value="{StaticResource SubMenuItemTemplate}"/>
        <Setter Property="SeparatorTemplateKey" Value="{StaticResource SeparatorTemplate}"/>
        <Setter Property="Template" Value="{StaticResource SubMenuItemTemplate}"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="StaysOpenOnClick" Value="True"/>
</Style>

And my menu declaration

<telerikNavigation:RadMenu Grid.Row="1" ItemClick="RadMenu_ItemClick" ClickToOpen="False" Style="{StaticResource RadMenuStyle}"
                                           ItemContainerStyle="{StaticResource RadMenuItemStyle}">
<telerikNavigation:RadMenuItem Header="Contrats d'entreprise">
                        <telerikNavigation:RadMenuItem Header="CE Indépendants" Style="{StaticResource RadMenuItemStyle}" Tag="/Views/SimulationsCE/SimulationsCEPage.xaml?type=Independant" />
                        <telerikNavigation:RadMenuItem Header="CE Groupes/Affiliés" Style="{StaticResource RadMenuItemStyle}" Tag="/Views/SimulationsCE/SimulationsCEPage.xaml?type=Affilie" />
                        <telerikNavigation:RadMenuItem Header="Nouvelle Simulation CE" Style="{StaticResource RadMenuItemStyle}" Tag="/Views/SimulationsCE/CreateNewSimulationCE.xaml" />
                    </telerikNavigation:RadMenuItem>
 </telerikNavigation:RadMenu>

Your help is being highly appreciated!!!! Thanks!!!! :-)

[Dani]

Hello Yolanda,

You needed to generate the ItemContainerStyle for the RadMenu. This means that you needed to have the actual TopLevelHeaderTemplate, TopLevelItemTemplate, SubMenuHeaderTemplate and the SubMenuItemTemplate that you now only have as StaticResource references in your RadMenuItemStyle.

These four templates have ButtonChrome controls in them. Your new ButtonChromeStyle will not get applied if they  are not generated and are rendered by default with Office Black theme.

Go to Object > Edit Additional Templates > Edit Generated item Container(ItemContainerStyle) to generate the four menu item templates mentioned above.


 
Best wishes,
Dani
the Telerik team

[Yolanda]

Hi Dani,

This is really strange because my RadMenu Style has the four templates declared inside. They all have ButtonChromes inside.

I send you a support ticket with the RadMenuStyle file, It will be easier to explain if you see the whole style.

Thanks a lot for your help!
   Yolanda

[Dani]

Hello Yolanda,

Your support ticket has been replied with a solution.
This forum thread will be closed.

Best wishes,
Dani
the Telerik team

[Doug Beard]

1) You can place the ButtonChromeStyle where all your application resources reside and delete its x:Key. This means that the ButtonChromeStyle becomes an implicit style and will get applied everywhere a ButtonChrome appears. If you do not wish to apply that style to every ButtonChrome control, see approach two.

This causes the unrecoverable exception Error HRESULT E_FAIL has been returned from a call to a COM component, when a RadMenu (trial) exists in the application.

I followed the instructions of dragging the ButtonChrome Asset in Blend and creating a template.

I was able to download the attached project provided by Telerik for demonstration of the button chrome and apply THAT template with no exceptions.

[Dani]

Hi Doug,

Solely having an implicit ButtonChromeStyle in your app resources will not produce an error. It will produce such an exception if it is not used correctly. In order to use it on a RadMenu, you also need to have the RadMenuItem template (including the ButtonChrome control) generated.

Also, when generating the ButtonChromeStyle from Blend, you will most likely have duplicated resources like brushes if you have generated any RadMenuItem template prior to that, so you will need to remove those.

If you experience difficulties with the ButtonChromeStyle, let me know.

Best wishes,
Dani
the Telerik team