[Solved] How to set the Background image for RadMenuItem

[rakhi]

I am trying to create a menu with some items say Home, Products, Services, Contact Us and I dont want regular style rather I want a different background image for each of these items with a set margin between each of them.

I can apply the style using a resource to the items in drop down but can not set the style for first level of items mentioned above.
I already tried using the static resource "HomeMenuStyle1" but its not working. Code is attached below for reference.

In case anyone of you have any clue. Please suggest the possible workaround for same.

Thanks,
Wizkid

 

 

<telerik:RadMenu VerticalAlignment="Top" x:Name="globalMenu" HorizontalAlignment="Left" ClickToOpen="False" Width="Auto" >

 

 

 

 

 

<telerik:RadMenuItem x:Name="radItemHome" Header="Home" Style="{StaticResource HomeMenuStyle1}" Width="90" Height="60" BorderBrush="White" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center" >

 

 

</telerik:RadMenuItem>

 

 

 

 

 

<telerik:RadMenuItem x:Name="radItemProducts" Header="Tools" Width="90" Height="60" BorderBrush="White" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center" >

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem x:Name="radItemServices" Header="Cases" Width="90" Height="60" BorderBrush="White" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center" >

 

 

</telerik:RadMenuItem>

 

 

 

</telerik:RadMenu>

 

 

[Boyan]

Hi rakhi,

Our theme for RadMenuItems contains styles for "TopLevelHeaderTemplate"  and "SubMenuHeaderTemplate".

You can edit the styles in Blend, like:

1. Select  RadMenuItem
2. Select "edit a copy" so the xaml of the style is shown
3. Look at the code and there are 4 ControlTemplates   - two of them are "TopLevelHeaderTemplate" and the other two of them are "SubMenuHeaderTemplate"
4. To set  the style to the first level of items you should change "TopLevelHeaderTemplate".

I believe that you have set your desired style only to "SubMenuHeaderTemplate" ControlTemplates so you just need to copy the same xaml to your "TopLevelHeaderTemplate" ControlTemplates. Simply look for the following:

<ControlTemplate x:Key="TopLevelHeaderTemplate" TargetType="telerikNavigation:RadMenuItem">

  Apply your changes there and then attach the style as you did before:

<telerik:RadMenuItem x:Name="radItemHome" Header="Home" Style="{StaticResource HomeMenuStyle1}" Width="90" Height="60" BorderBrush="White" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center" >

 Let me know if you need more help.


Regards,
Boyan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.