Stretch RadMenuItems

5 posts, 0 answers
  1. Mike Beaton
    Mike Beaton avatar
    18 posts
    Member since:
    Sep 2009

    Posted 03 May 2011 Link to this post

    Hi 

    I have come across the below article which shows how to stretch a RadMenuItems across a asp.net page and I am wondering if the same thing is possible with the silverlight version.

    http://www.telerik.com/help/aspnet/menu/menu_stretchallmenuitems%20.html

    I have the following code

    <UserControl x:Class="Atlas_Reporting_Demo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d" d:DesignWidth="1280" d:DesignHeight="1024">
    <Grid x:Name="LayoutRoot">        
            <telerik:RadMenu x:Name="ReportsMenu" ClickToOpen="False" ItemClick="OnReportsMenu_ItemClick" 
                                 VerticalAlignment="Top" HorizontalAlignment="Stretch">
                <telerik:RadMenuItem x:Name="Dashboard" Header="Dashboard"/>
                <telerik:RadMenuItem x:Name="Summary" Header="Summary"/>
                    <telerik:RadMenuItem x:Name="TimeOverview" Header="Time Overview"/>
                    <telerik:RadMenuItem x:Name="ChargeableTime" Header="Chargeable Time"/>
                    <telerik:RadMenuItem x:Name="ClientInvTime" Header="Client Inv Time"/>
                    <telerik:RadMenuItem x:Name="BusInvTime" Header="Bus Inv Time"/>
                    <telerik:RadMenuItem x:Name="AgedDebt" Header="Aged Debt"/>
                    <telerik:RadMenuItem x:Name="AgedDisbs" Header="Aged Disbs"/>
                    <telerik:RadMenuItem x:Name="AgedWIP" Header="Aged WIP"/>
                    <telerik:RadMenuItem x:Name="ClientBal" Header="Client Bal"/>
                    <telerik:RadMenuItem x:Name="WIPWOffs" Header="WIP W/Offs"/>
                    <telerik:RadMenuItem x:Name="DisbsWOffs" Header="Disbs W/Offs"/>
                    <telerik:RadMenuItem x:Name="MattersOwned" Header="Matters Owned"/>
                    <telerik:RadMenuItem x:Name="MattersZeroBal" Header="Matters Zero Bal"/>            
                </telerik:RadMenu>        
        </Grid>
    </UserControl>

    Thanks

    Mike
  2. Mike Beaton
    Mike Beaton avatar
    18 posts
    Member since:
    Sep 2009

    Posted 03 May 2011 Link to this post

    Hi Guys 

    I have found that I can add the following to the SizeChanged event:

    private void ReportsMenu_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                RadMenu reportMenu = (RadMenu)sender;

                var w = e.NewSize.Width;
                var itemLength = Math.Floor(w / reportMenu.Items.Count);

                foreach (RadMenuItem item in reportMenu.Items)
                {
                    var headerText = item;
                    item.Width = itemLength;
                }
            }

    The only problem is that I need to stop the shrinking off any particular RadMenuIten before it cuts off the text (Possibly add a scrollbar instead).

    Does anyone know how this could be done.

    Thanks

    Mike
  3. DevCraft banner
  4. Pana
    Admin
    Pana avatar
    748 posts

    Posted 06 May 2011 Link to this post

    Hi,

    I am not sure I understand what do you mean by stretching. In Silverlight you should be able to set the ItemsPanel to telerik:UniformGrid and the items should expand on the page. Can you show me a screeshot with the rad menu and paint how do you expect the layout to be. If it is possible I will send you a solution with the proper panel applied.

    Regards,
    Pana
    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. Mike Beaton
    Mike Beaton avatar
    18 posts
    Member since:
    Sep 2009

    Posted 10 May 2011 Link to this post

    Hi Pana

    I have attached a screenshot where you will see that the items in my menu do not stretch to the entire width of the screen. There is a large gap on the right hand side.

    If a RadUniformGrid can solve this. Can you please advise how.

    Regards

    Mike
  6. Pana
    Admin
    Pana avatar
    748 posts

    Posted 12 May 2011 Link to this post

    Hello,

    This will stretch the items:
    <telerik:RadMenu VerticalAlignment="Top">
        <telerik:RadMenu.ItemsPanel>
            <ItemsPanelTemplate>
                <telerik:RadUniformGrid Rows="1" />
            </ItemsPanelTemplate>
        </telerik:RadMenu.ItemsPanel>
        <telerik:RadMenuItem Header="Item 1" />
        <telerik:RadMenuItem Header="Item 2" />
        <telerik:RadMenuItem Header="Item 3" />
        <telerik:RadMenuItem Header="Item 4" />
        <telerik:RadMenuItem Header="Item 5" />
        <telerik:RadMenuItem Header="Item 6" />
        <telerik:RadMenuItem Header="Item 7" />
        <telerik:RadMenuItem Header="Item 8" />
        <telerik:RadMenuItem Header="Item 9" />
    </telerik:RadMenu>

    Please note only they all will share the same width so make sure there would not be a too-large-one stretching all of them.

    Best wishes,
    Pana
    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
Back to Top
DevCraft banner