Stretch RadMenuItems

[Mike Beaton]

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

[Mike Beaton]

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

[Pana]

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

[Mike Beaton]

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

[Pana]

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