Add Scrollbar to RadMenu for Silverlight

8 posts, 1 answers
  1. Julie Jaegers
    Julie Jaegers avatar
    12 posts
    Member since:
    Oct 2009

    Posted 03 Aug 2011 Link to this post

    I'm using Silverlight 4 and MVVM along with my Telerik RadMenu. I have a menu that contains 25+ items. I'm wanting to set the number of items shown in view upon drop down and then have scrolling available for the other items not in immediate view. I've included some pertaining xaml from my view. All menu items are built from my view model. I've read the following blog/forum entries but I'm not that good with Blend and I'm not sure where to place the ScrollViewer and ItemsPresenter or HierarchicalDataTemplate (whichever one is appropriate to use with the RadMenu). Can anyone help?!

    http://blogs.telerik.com/blogs/posts/09-12-10/how_to_add_a_scrollbar_to_telerik_radmenu_for_silverlight.aspx
    http://www.telerik.com/community/forums/wpf/menu/scrollbar-in-radmenu.aspx

    <UserControl.Resources>

            <myCore:BoolInverseConverter x:Key="BoolInverseConverter"/>
            <myCore:VisibilityBoolConverter x:Key="VisibilityConverter"/>

            <telerik:ContainerBindingCollection x:Key="ContainerBindings">
                <telerik:ContainerBinding PropertyName="IsCheckable" Binding="{Binding IsCheckable}" />
                <telerik:ContainerBinding PropertyName="IsChecked" Binding="{Binding IsChecked, Mode=TwoWay}" />
                <telerik:ContainerBinding PropertyName="IsSeparator" Binding="{Binding IsSeparator}" />
                <telerik:ContainerBinding PropertyName="IsEnabled" Binding="{Binding IsEnabled}" />
                <telerik:ContainerBinding PropertyName="StaysOpenOnClick" Binding="{Binding StaysOpenOnClick}" />
                <telerik:ContainerBinding PropertyName="Icon" Binding="{Binding Image}" />
                <telerik:ContainerBinding PropertyName="Command" Binding="{Binding Command}"/>
                <telerik:ContainerBinding PropertyName="CommandParameter" Binding="{Binding CommandParameter}"/>
                <telerik:ContainerBinding PropertyName="GroupName" Binding="{Binding GroupName}"/>
                <telerik:ContainerBinding PropertyName="Value" Binding="{Binding Value}"/>
            </telerik:ContainerBindingCollection>

            <telerik:HierarchicalDataTemplate x:Key="MenuItemTemplate" ItemsSource="{Binding Items}"
        telerik:ContainerBinding.ContainerBindings="{StaticResource ContainerBindings}">
                <TextBlock Text="{Binding Text}" />
            </telerik:HierarchicalDataTemplate>

            <!-- Menu colors -->
            <LinearGradientBrush x:Key="MenuBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFF9F9F9" Offset="0.008"/>
                <GradientStop Color="#FFE6E6E7" Offset="1"/>
            </LinearGradientBrush>

            <Style x:Key="MenuStyle" TargetType="telerik:RadMenu">
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="Background" Value="{StaticResource MenuBackground}"/>
                <Setter Property="BorderBrush" Value="Black"/>
                <Setter Property="BorderThickness" Value="1" />
            </Style>

        </UserControl.Resources>

    <Grid Grid.Row="1" Grid.Column="0" Name="MenuAndContent">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="45"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <telerik:RadMenu Grid.Row="0" Grid.Column="0" telerik:StyleManager.Theme="Vista" Style="{StaticResource MenuStyle}" Height="30" VerticalAlignment="Top" Margin="0, 10, 0, 10"
                                        ItemTemplate="{StaticResource MenuItemTemplate}" ItemsSource="{Binding MenuList}" />

                        <ScrollViewer Grid.Row="1" Grid.Column="0" x:Name="svw" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" BorderThickness="0"
                                    IsHitTestVisible="True" Background="White" >
                            <ContentControl x:Name="content" Content="{Binding CurrentView}" HorizontalAlignment="Left" VerticalAlignment="Top" Loaded="content_Loaded" Width="{Binding ElementName=svw, Path=Width}"
                                            IsEnabled="{Binding IsReadOnly, Converter={StaticResource BoolInverseConverter}}"/>
                        </ScrollViewer>
                    </Grid>

  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 04 Aug 2011 Link to this post

    Hi Julie,

    You can take advantage of the scrolling functionality via the ItemContainerStyleSelector. The TopLevelHeaderTemplate and the SubMenuHeaderTemplate must be modified in order to have your items scrolling.  Attached is a basic sample that demontsrates how to do that. I hope you will find it helpful.

    Greetings,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
  3. DevCraft banner
  4. Julie Jaegers
    Julie Jaegers avatar
    12 posts
    Member since:
    Oct 2009

    Posted 04 Aug 2011 Link to this post

    I now have menu scrolling but it's not working exactly right yet. Please see the attached menu images. I changed your example RadMenu to the following shown below and your sample project does the same thing as mine. It's placing a scrollbar when not neccessary in certain situations. No scrollbar should exist if there's nothing more to scroll. Can you help.....again?! Your first sample was very helpful!

                <telerik:RadMenu Margin="98,78,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" 
    ItemContainerStyle="{StaticResource RadMenuItemStyle1}">
    <telerik:RadMenuItem Header="Item 1">
    <telerik:RadMenuItem Header="Sub Item 1"/>
    <telerik:RadMenuItem Header="Sub Item 2"/>

    </telerik:RadMenuItem>
    <telerik:RadMenuItem Header="Item 2" ItemContainerStyle="{StaticResource RadMenuItemStyle1}">
    <telerik:RadMenuItem Header="Sub Item 4" ItemContainerStyle="{StaticResource RadMenuItemStyle1}">
    <telerik:RadMenuItem Header="Sub Item 4" ItemContainerStyle="{StaticResource RadMenuItemStyle1}"/>
    <telerik:RadMenuItem Header="Sub Item 4" ItemContainerStyle="{StaticResource RadMenuItemStyle1}"/>
    <telerik:RadMenuItem Header="Sub Item 4" ItemContainerStyle="{StaticResource RadMenuItemStyle1}"/>
    </telerik:RadMenuItem>
    </telerik:RadMenuItem>
    </telerik:RadMenu>
  5. Julie Jaegers
    Julie Jaegers avatar
    12 posts
    Member since:
    Oct 2009

    Posted 04 Aug 2011 Link to this post

    Also another question.....how can I set ScrollToVerticalOffset(0) for the menu scrollbars? Each time I come to the menu I want the scrollbar to be at the top. As you can see below I have a ScrollViewer around my ContentControl and I'm setting ScrollToVerticalOffset(0) in my xaml code behind and this works well for this ScrollViewer. I tried giving my ScrollViewer in TopLevelHeaderTemplate a name and setting its ScrollToVerticalOffset(0) property in the xaml code behind but I get the following error "Name does not exist in the current context". Same thing for SubMenuHeaderTemplate. How can this be done? Thanks for your time!

               <Grid Grid.Row="1" Grid.Column="0" Name="MenuAndContent">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="45"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                    <telerik:RadMenu Grid.Row="0" Grid.Column="0" Height="30" VerticalAlignment="Top" Margin="0, 10, 0, 10" Style="{StaticResource MenuStyle}"
                                        ItemTemplate="{StaticResource MenuItemTemplate}" ItemsSource="{Binding MenuList}" ItemContainerStyle="{StaticResource RadMenuItemStyle1}"/>


                    <ScrollViewer Grid.Row="1" Grid.Column="0" x:Name="svw" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" BorderThickness="0" 
                                    IsHitTestVisible="True" Background="White" >
                            <ContentControl x:Name="content" Content="{Binding CurrentView}" HorizontalAlignment="Left" VerticalAlignment="Top" Loaded="content_Loaded" Width="{Binding ElementName=svw, Path=Width}"
                                            IsEnabled="{Binding IsReadOnly, Converter={StaticResource BoolInverseConverter}}"/>
                    </ScrollViewer>
                </Grid>


            
            //xaml code behind
          void model_ViewCompleted(object sender, EventArgs e)
            {
                //sets scroll bar to top vertical position
                svw.ScrollToVerticalOffset(0);           
            }   
  6. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 05 Aug 2011 Link to this post

    Hi Julie,

    To have the scrollbar visible only when needed, simply set the VerticalScrollBarVisibility to Auto instead of Visible in the SubMenuHeaderTemplate.

    On your second question - I am afraid you cannot have the scroll bar for the RadMenuItems always scrolled to top in Silverlight. To make it possbile, it would require too many crucial changes to your RadMenu for an inessential scrolling functionality: inheriting both RadMenu and RadMenuItem, overriding the OnApplyTemplate method, finding the ScrollViewer you need in OnApplyTemplate and setting its ScrollToVerticalOffset property. Such approach would most likely result in other setbacks with your extended RadMenu.

    I hope this helps.


    Best wishes,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
  7. Julie Jaegers
    Julie Jaegers avatar
    12 posts
    Member since:
    Oct 2009

    Posted 08 Aug 2011 Link to this post

    Thanks for your help and timely response!
  8. Edward
    Edward avatar
    1 posts
    Member since:
    Mar 2013

    Posted 13 Mar 2013 Link to this post

    I downloaded the the zip file example, because I have a similar situation--need to add to a vertical scrollbar to a longish menu--but I can't get the solution to compile.  I get several error messages, including:

    Error 22 The property 'Theme' does not exist on the type 'ScrollViewer' in the XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'. D:\Data Files\Dev\Learning\RadMenu ScrollBar\SilverlightApplication3\MainPage.xaml 86 75 SilverlightApplication3
    Error 26 The property 'Theme' does not exist on the type 'ScrollViewer' in the XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'. D:\Data Files\Dev\Learning\RadMenu ScrollBar\SilverlightApplication3\MainPage.xaml 229 10 SilverlightApplication3
    Error 19 The tag 'ButtonChrome' does not exist in XML namespace 'clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls'. D:\Data Files\Dev\Learning\RadMenu ScrollBar\SilverlightApplication3\MainPage.xaml 61 6 SilverlightApplication3
    Error 23 The tag 'ButtonChrome' does not exist in XML namespace 'clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls'. D:\Data Files\Dev\Learning\RadMenu ScrollBar\SilverlightApplication3\MainPage.xaml 136 6 SilverlightApplication3
    Error 18 The tag 'Office_BlackTheme' does not exist in XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'. D:\Data Files\Dev\Learning\RadMenu ScrollBar\SilverlightApplication3\MainPage.xaml 13 4 SilverlightApplication3
    Error 20 The tag 'Popup' does not exist in XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'. D:\Data Files\Dev\Learning\RadMenu ScrollBar\SilverlightApplication3\MainPage.xaml 71 6 SilverlightApplication3

    ...there are more.  We are NOT running the most current version of Telerik (2012.1.326.1050), but I believe it is newer than the example code; .net 4.0

    Help?!  Please and thank you!
  9. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 14 Mar 2013 Link to this post

    Hi Edward,

    You can use attached projects for your reference how to implement this functionality. Also you may check our online help for additional information how to achieve this. Feel free to contact us if you have any problems or concerns.

    Kind regards,
    Rosen Vladimirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner