Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Menu > Change the black background of main menu item

• Jonathan

  Posted on Aug 3, 2008 (permalink)

  hi all--
  
  i was wondering if there was a way to change the black background highlight to a different color when you mouseover (and open) a top-level menu item.
  
  i'm new to templates so if that's the answer, a point in the right direction would be much appreciated!
  
  thanks!
  
  jon
  

  Reply

• Hristo Hristo

  Posted on Aug 4, 2008 (permalink)

  Hi Jonathan,
  
  Thanks for the interest in using our controls.
  
  Now, straight to the problem. The only way to change the black highlight background on mouseover is to create a new control template for TopLevelHeader or TopLevelItem items. TopLevelItem is an item with RadMenu as parent and no children. TopLevelHeader is TopLevelItem with children.
  
  At the moment Blend 2.5 doesn't support direct editing of control templates for custom controls but I believe this will change with the next version. You can find menu templates in the Telerik.Windows.Controls.Navigation assembly as resource - theme/menu.xaml. Editing this file in Blend should not be a problem. From there you can change the black background and then reuse this template in your application.
  
  If you have any other questions, please, do not hesitate to contact us
  
  Regards,
  Hristo
  the Telerik team

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

  Reply

• Michael

  Posted on Sep 23, 2008 (permalink)

  Hi!
  
  How can I actualy see the resource  theme/menu.xaml?
  
  thx, mikel

  Reply

• Hristo Hristo

  Posted on Sep 23, 2008 (permalink)

  Hello Michael,
  
  There are 2 way to edit our resources:
  

  1. From your Client.Net account you can download solution that have all controls ready for work with Blend 2.5
  2. You can use Reflector, load our assemblies and save the Resources.

  I hope this helps.

  Best wishes,
  Hristo
  the Telerik team

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

  Reply

• Michael

  Posted on Sep 23, 2008 (permalink)

  Thank you I found the info.
  
  What I want to achieve is to make a gradient fill for the MenuPanels.
  Any Info how to do this?
  
  thx, Michael

  Reply

• Hristo Hristo

  Posted on Sep 24, 2008 (permalink)

  Hello Michael,
  
  You can read how to change the menuPanels background here:
  http://www.telerik.com/community/forums/thread/b311D-bgatad.aspx#636582
  
  Let me know if you have other questions.
  
  
  Best wishes,
  Hristo
  the Telerik team

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

  Reply

• david

  Posted on Jan 24, 2009 (permalink)

  Hi,
  I read the posts, but didnt find any solution how to change he background color of submenu's popup.
  I downloaded from you the blend solution with dlls and default styles but cant manage to edit the menu.xaml in this solution in the way that the submenu's background color will be changed.
  How to apply these submenu/toplevel/header/item templates to menu??
  
  This doesnt work:
  
           <telerik:RadMenu Height="30" VerticalAlignment="Top">
              <telerik:RadMenuItem Header="FILE"
                                   SubmenuItemTemplateKey="{StaticResource SubMenuItemTemplate}"
                                   SubmenuHeaderTemplateKey="{StaticResource SubMenuHeaderTemplate}"
                                   TopLevelItemTemplateKey="{StaticResource TopLevelItemTemplate}"
                                   >
                  <telerik:RadMenuItem.Icon>
                      <Image Source="Images/RadClock.png" />
                  </telerik:RadMenuItem.Icon>
                  <telerik:RadMenuItem Header="New" >
                      <telerik:RadMenuItem.Icon>
                          <Image Source="Images/RadClock.png" />
                      </telerik:RadMenuItem.Icon>
                  </telerik:RadMenuItem>
                  <telerik:RadMenuItem Header="Open" />
              </telerik:RadMenuItem>
          </telerik:RadMenu>
  
  In the same file I have the same <UserControl.Resources> as in your file "menu.xaml". I cant figure the mechanism how these templates in the <UserControl.Resources> are applied to above menu...
  Thanks,
  David
  

  Reply

• Hristo Hristo

  Posted on Jan 27, 2009 (permalink)

  Hi david,

  If you have already all the control templates you can set them by the Style setter like in the Menu.xaml:

  <!-- RadMenuItem -->

  <Style TargetType="telerikNavigation:RadMenuItem" x:Key="RadMenuItemStyle1">

  <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="Template" Value="{StaticResource SubMenuItemTemplate}" />

  <Setter Property="HorizontalContentAlignment" Value="Left" />

  <Setter Property="VerticalContentAlignment" Value="Center" />

  </Style>

  Then you can set the style on all RadMenuItems referencing the RadMenuItem style by key like:
  

  <telerik:RadMenuItem Header="New" Style={StaticResource RadMenuItemStyle1}>

  In order to change the background of the popup control you should change the backgorund of the most inner border in Popup. In the default (summer) theme the background brush is ContentBackgroundBrush (the background of the most inner border).

  <Popup x:Name="PART_Popup" VerticalOffset="-1" HorizontalOffset="-3">

  <Border BorderBrush="{StaticResource RadMenu_PopupShadowBorder2}"

  BorderThickness="1,0,1,1">

  <Border BorderBrush="{StaticResource RadMenu_PopupShadowBorder1}"

  BorderThickness="1,0,1,1">

  <Border Background="{StaticResource ContentBackgroundBrush}"

  BorderBrush="{StaticResource BorderOuterBrush}"

  BorderThickness="1">

  <Grid>

  <Rectangle Margin="24,0,0,0" Width="1"

  Fill="{StaticResource SeparatorLine1}"

  HorizontalAlignment="Left" />

  <Rectangle Margin="25,0,0,0" Width="1"

  Fill="{StaticResource SeparatorLine2}"

  HorizontalAlignment="Left" />

  <ItemsPresenter />

  </Grid>

  </Border>

  </Border>

  </Border>

  </Popup>

  Let me know if you need more help.
  
  Greetings,

  Hristo
  the Telerik team

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

  Reply

• senthil kumar

  Posted on Dec 23, 2009 (permalink)

  Hi
  
  I m new to silverlight. I like to use radmenu ,but I need to style the radmenu such as
  I need to change color of menu , mouseover color, pressed menuitem color, popup background color.
  
  How I have to do.
  Please provide the code for styling entire menu and menuitems.
  
  Thks and Regards
  Senthil
  
  
  

  Reply

• Pana Pana

  Posted on Dec 28, 2009 (permalink)

  Hello Senthil Kumar,
  
  I have attached an example with custom theme that includes only the RadMenu based on the Office_Silver theme. You can find the xaml in the CustomTheme\Themes\Office\Silver\Menu.xaml. The xaml for all telerik controls can be found in the distribution packages. I have attached the Office_silver theme so you can easily can copy-paste the files with styles for the controls you will use in your project. To add styles for other controls than RadMenu you can create a separate xaml file (for example Generic.xaml) that uses merged dictionaries to add the styles for the Menu and the rest of the controls.
  
  You can learn in details for the theming here.
  
  Thanks for your interest in our controls.
  
  Sincerely yours,
  Panayot
  the Telerik team

  
  Instantly find answers to your questions on the new Telerik Support Portal.
  Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

  Attached files

  • radmenucustomtheme-sl.zip

  Reply

• Pan hal

  Posted on Jun 14, 2010 (permalink)

  Hi,
    Your example helped me to solve one of my problem. 
    I ahve one more requirement. The radmenu sub items pops up when ever user mouse over on the main radmenu item.
  How to avoid this. The submenu items should show up only when user press/click the main radmenu item. 

   

  This is urgent requirement.Can you please help me.
  
   

  Reply

• Hristo Hristo

  Posted on Jun 16, 2010 (permalink)

  Hi Pan hal,
  
  You could use RadMenu ShowDelay property. Just set it to some large TimeSpan and them sub menu popup will open only on Click.
  
  Let us know if you need more information.
  
  
  Best wishes,
  Hristo
  the Telerik team

  
  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Menu > Change the black background of main menu item