Right Align the RadMenu Items

13 posts, 0 answers
  1. Sundar Ramadoss
    Sundar Ramadoss avatar
    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
  2. Jim Daly
    Jim Daly avatar
    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.


  3. DevCraft banner
  4. Pana
    Admin
    Pana avatar
    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.
  5. Sundar Ramadoss
    Sundar Ramadoss avatar
    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
  6. Pana
    Admin
    Pana avatar
    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.
  7. Sundar Ramadoss
    Sundar Ramadoss avatar
    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
  8. Pana
    Admin
    Pana avatar
    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.
  9. Sundar Ramadoss
    Sundar Ramadoss avatar
    20 posts
    Member since:
    Apr 2010

    Posted 20 May 2010 Link to this post

    Hi Panayot,

    Yes, you are right.

    Thanks,
    Sundar
  10. Pana
    Admin
    Pana avatar
    748 posts

    Posted 21 May 2010 Link to this post

    Hi Sundar Ramadoss,

    <UserControl
        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.
  11. rent
    rent avatar
    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?

  12. Pana
    Admin
    Pana avatar
    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
        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
     
  13. Bharadwaj
    Bharadwaj avatar
    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
  14. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 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.

Back to Top
DevCraft banner