Change the black background of main menu item

[Jonathan]

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

[Hristo]

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.

[Michael]

Hi!

How can I actualy see the resource  theme/menu.xaml?

thx, mikel

[Hristo]

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.

[Michael]

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

[Hristo]

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.

[david]

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

[Hristo]

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.

[senthil kumar]

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

[Pana]

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.

[Pan hal]

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.

 

[Hristo]

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.