All posts

Scrollable Menu – Workaround with a Multi-Column Menu and RadControls for Silverlight

RadMenu and RadContextMenu for Silverlight cannot automatically scroll their items if their height exceeds a certain height. We are planning to implement this feature in the near future, but at the moment there are two workarounds for the developers: override the RadMenu control template and add ScrollViewer controls around the ItemsPresenters, or customize the ItemsPanel of the RadMenuItem controls, so the sub-items are displayed in columns. The second option is much easier and looks good enough:

MultiColumnMenu

The main idea is to replace the RadMenuItem ItemsPanel, that is a StackPanel by default, with a WrapPanel. To set the ItemsPanel property of all RadMenuItems you need to set the ItemContainerStyle property of RadMenu or RadContextMenu:

<Style x:Key="ItemStyle" TargetType="telerikNavigation:RadMenuItem">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <telerik:RadWrapPanel Orientation="Vertical" 
                    MaxHeight="300" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>
...
<telerikNavigation:RadMenu ItemContainerStyle="{StaticResource ItemStyle}" ... />

 

The important thing here is the MaxHeight property of the wrap panel – if it is missing, the wrap panel will behave like an ordinary StackPanel.

The attached application also demonstrates how to customize both data-bound and declared in XAML RadMenu.

Facebook Twitter DZone It! Digg It! StumbleUpon Technorati Del.icio.us NewsVine Reddit Blinklist Add diigo bookmark

Comments  3

  • 18 Jun

    Great tip, as always! :)

    Miro Paskov

  • 20 Jul

    Hi,

    Can we have multicolumn menu for asp.net telerik menu using itemtemplate and sitemapdatasource.
    We need multicolumn menu using telerik in moss2007.

    Regards
    Amit Lohogaonkar
    amitmcpmcad@yahoo.com

    Amit Lohogaonkar

  • 22 Jul

    Amit, please, post a support ticket for RadMenu for ASP.NET AJAX with this request. The ASP.NET teams will be able to provide insight what can be done with their control.

    Valeri Hristov

Post a comment
  1. Formatting options
       
     
     
     
     
       
  2. Security image