Telerik Forums / UI for Silverlight Forum / Menu /

Right Align the RadMenu Items

Telerik UI for Silverlight
Resources Buy Try

13 posts, 0 answers

Sundar Ramadoss

20 posts

Member since:
Apr 2010

Posted 06 May 2010 Link to this post

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

13 posts

Member since:
Apr 2010

Posted 07 May 2010 Link to this post

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
Admin

748 posts
Posted 12 May 2010 Link to this post

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.

silverlightapplication17.zip
Sundar Ramadoss

20 posts

Member since:
Apr 2010

Posted 17 May 2010 Link to this post

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
Admin

748 posts
Posted 19 May 2010 Link to this post

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.

rightalignedmenu.zip
Sundar Ramadoss

20 posts

Member since:
Apr 2010

Posted 19 May 2010 Link to this post

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
Admin

748 posts

Posted 20 May 2010 Link to this post

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

20 posts

Member since:
Apr 2010

Posted 20 May 2010 Link to this post

Hi Panayot,

Yes, you are right.

Thanks,
Sundar
Pana
Admin

748 posts

Posted 21 May 2010 Link to this post

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

36 posts

Member since:
May 2008

Posted 24 Jun 2010 Link to this post

Hello!!! In my situation I need this:

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

How do this?
Pana
Admin

748 posts

Posted 28 Jun 2010 Link to this post

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

1 posts

Member since:
Sep 2012

Posted 29 Jan 2013 Link to this post

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
Admin

649 posts

Posted 29 Jan 2013 Link to this post

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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Right Align the RadMenu Items

Sundar Ramadoss

Jim Daly

Pana

Sundar Ramadoss

Pana

Sundar Ramadoss

Pana

Sundar Ramadoss

Pana

rent

Pana

Bharadwaj

Rosen Vladimirov