This is a migrated thread and some comments may be shown as answers.

Add Scrollbar to RadMenu for Silverlight

7 Answers 208 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Julie Jaegers
Top achievements
Rank 1
Julie Jaegers asked on 03 Aug 2011, 07:28 PM
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>

7 Answers, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 04 Aug 2011, 08:35 AM
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 >>
0
Julie Jaegers
Top achievements
Rank 1
answered on 04 Aug 2011, 08:42 PM
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>
0
Julie Jaegers
Top achievements
Rank 1
answered on 04 Aug 2011, 09:03 PM
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);           
        }   
0
Accepted
Dani
Telerik team
answered on 05 Aug 2011, 08:27 AM
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 >>
0
Julie Jaegers
Top achievements
Rank 1
answered on 08 Aug 2011, 04:04 PM
Thanks for your help and timely response!
0
Edward
Top achievements
Rank 1
answered on 13 Mar 2013, 05:14 PM
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!
0
Rosen Vladimirov
Telerik team
answered on 14 Mar 2013, 08:38 AM
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.

Tags
Menu
Asked by
Julie Jaegers
Top achievements
Rank 1
Answers by
Dani
Telerik team
Julie Jaegers
Top achievements
Rank 1
Edward
Top achievements
Rank 1
Rosen Vladimirov
Telerik team
Share this question
or