How to set the Background image for RadMenuItem

2 posts, 0 answers
  1. rakhi
    rakhi avatar
    1 posts
    Member since:
    Mar 2009

    Posted 31 Mar 2009 Link to this post

    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>

     

     

  2. Boyan
    Admin
    Boyan avatar
    758 posts

    Posted 02 Apr 2009 Link to this post

    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.
  3. DevCraft banner
Back to Top