Right Align the RadMenu Items

[Sundar Ramadoss]

Hi,

Could you please tell me how to right align the menu items. Also I want to change the background color of the rad menu item on mouse over.

Thanks,
Sundar

[Jim Daly]

As far as right-aligning the item, putting something like this in your ResourceDictionary with your styles (Styles.xaml?) may give you what you want (it overrides the default value...Left):

    <Style TargetType="telerikNavigation:RadMenuItem">
        <Setter Property="HorizontalContentAlignment" Value="Right"/>
    </Style>

However, to change the mouseover color I believe you would have to copy the RadMenuItem's template in Blend, then find the brush that is being used in the appropriate VisualStae (not sure if it's Focused or Highlighted) and change the color of that brush.

[Pana]

Hi Sundar Ramadoss,

Jim Daly is quite correct. Although in the RadMenuItems you will find ButtonChrome that you have to edit. The mouse over of the RadMenu displays the ButtonChrome's Highlighted state. Check the attached project It has the ButtonChrome.xaml and Menu.xaml files. In the Menu.xaml file you can add x:key to the Styles you want to use in your project. I showed how the ButtonChromes from the Menu.xaml can get their styles from the ButtonChromes.xaml and if you edit the brushes in the ButtonChrome.xaml the menu appearance will change. I modified the *_Highlighted brushes there.

I hope the attached solution will help you.

Sincerely yours,
Panayot
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.

[Sundar Ramadoss]

Hi Jim Daly,

I have tried using the Style, but it still alligns to left instead of Right. Currenlty I am using Silverlight 3.0 and VS 2008.

Hi Panayot,

Could you please send me the sample project build in VS 2008.

Many thanks,
Sundar

[Pana]

Hello Sundar Ramadoss,

This is the example for VS2008 with SL3 menu styles.

Best wishes,
Panayot
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.

[Sundar Ramadoss]

Thank you very much Panayot.

But I think I am not clear on my requirement. I want the header menu item to be right aligned.

In your example it is 'File' and 'Edit' menu item should be aligned right. I tried adding HorizontalContentAlignment="Right" to it. It didn't work.

Please could you help me in this.

Many Thanks,
Sundar

[Pana]

Hi Sundar Ramadoss,

Just to be sure... Do you want the RadMenu to look like:
[ ---------------- File | Edit ]
instead of :
[ File | Edit ---------------- ]

Kind regards,
Panayot
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.

[Sundar Ramadoss]

Hi Panayot,

Yes, you are right.

Thanks,
Sundar

[Pana]

Hi Sundar Ramadoss,

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    x:Class="RadmenuRightAligned.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
            <telerik:RadWrapPanel HorizontalAlignment="Right" />
        </ItemsPanelTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMenu VerticalAlignment="Top" ItemsPanel="{StaticResource ItemsPanelTemplate}">
            <telerik:RadMenuItem Header="Item 1">
                <telerik:RadMenuItem Header="Sub Item 1"/>
                <telerik:RadMenuItem Header="Sub Item 2"/>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Header="Item 2">
                <telerik:RadMenuItem Header="Sub Item 3"/>
                <telerik:RadMenuItem Header="Sub Item 4"/>
                <telerik:RadMenuItem Header="Sub Item 5"/>
            </telerik:RadMenuItem>
        </telerik:RadMenu>
    </Grid>
</UserControl>

A Panel is responsible for the layout of the Items in an ItemControl. So does the panel in a RadMenuItem and you may use it to move the RadMenuItems.

Sincerely yours,
Panayot
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.

[rent]

Hello!!! In my situation I need this:

[ File---------------- | Edit ]
instead of :
[ File | Edit ---------------- ]

How do this?

[Pana]

Hello rent,

You use a Dock Panel of course. Unfortunately Silverlight does not have one - WPF does. In the Telerik.Windows.Control.Primitives there is a RadDockPanel that behaves like the WPF one and you can use it like this:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    x:Class="SilverlightApplication21.MainPage"
    Width="640" Height="480">

    <UserControl.Resources>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
            <telerik:RadDockPanel LastChildFill="False" />
        </ItemsPanelTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMenu VerticalAlignment="Top" ItemsPanel="{StaticResource ItemsPanelTemplate}">
            <telerik:RadMenuItem telerik:RadDockPanel.Dock="Left" Header="Item 1">
                <telerik:RadMenuItem Header="Sub Item 1"/>
                <telerik:RadMenuItem Header="Sub Item 2"/>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem telerik:RadDockPanel.Dock="Right" Header="Item 2">
                <telerik:RadMenuItem Header="Sub Item 3"/>
                <telerik:RadMenuItem Header="Sub Item 4"/>
                <telerik:RadMenuItem Header="Sub Item 5"/>
            </telerik:RadMenuItem>
        </telerik:RadMenu>
    </Grid>

</UserControl>

Eventually you can use a simple Grid Panel here but on each menu item you will have to set Grid.Column and add ColumnDefinition on the Grid for each RadMenuItem which is not very convenient since if you reorder the items you will have to reset these values.

Kind regards,
Panayot
the Telerik team

[Bharadwaj]

Can u please attach one demo project where u used dis dock pannel...
In my project i used radmenu....and i wrote css class for that rademenu...
im having rademnu items and one dropdown as radmenu item...only that dropdown should be right aligned.. can u help me out with dis...



Kind Regards
Bharadwaj

[Rosen Vladimirov]

Hello Bharadwaj,

It looks like you are using RadMenu for ASP.NET AJAX. Please post your question in the correct forum here.

Greetings,
Rosen Vladimirov
the Telerik team