This is a migrated thread and some comments may be shown as answers.

Change the black background of main menu item

11 Answers 293 Views

This is a migrated thread and some comments may be shown as answers.

11 Answers, 1 is accepted

answered on 04 Aug 2008, 02:37 PM

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.

answered on 24 Jan 2009, 05:44 PM

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

answered on 27 Jan 2009, 10:24 AM

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.

answered on 28 Dec 2009, 09:28 AM

radmenucustomtheme-sl.zip

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.