Not Scrolling in the PanelBar

[Jeff]

Hey,

I'm using the following code to try and add scrolling to my PanelBar:
<ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1">
        <telerik:RadPanelBar ItemsSource="{Binding Categories}" 
                         ItemTemplate="{StaticResource CategoriesPanelBarHeaderTemplate}"/>
        </ScrollViewer>

But the PanelBar still goes off of the screen and the ScrollBar never becomes active.  Am I missing something?

[Kiril Stanoev]

Hi Jeffrey,

RadPanelBar has in-built scroll bars. You can turn them off/on by accessing the ScrollViewer.HorizontalScrollBarVisibility and ScrollViewer.VerticalScrollBarVisibility properties. If you still insist on having a ScrollViewer around your PanelBar, you can set the PanelBar's VerticalAlignment to Top. Give it a try and let me know if it works.

Greetings,
Kiril Stanoev
the Telerik team

[Alexey]

Hi,

I bind panel bar items using MVVM pattern. I use hierachical approach which is described here  http://www.telerik.com/help/silverlight/howto-display-hierarchical-data.html 

Could you please suggest how to turn item scrolling on in this case?

Thank you in advance,
Alexey

[Petar Mladenov]

Hi Alexey,

The default ScrollViewer appears when the PanelBar height is limited somehow - setting a Height

<telerik:RadPanelBar x:Name="radPanelBar" Width="200" Height="500"

or VerticalAlignment to Top as previously discussed here.
If you need another ScrollViewer (inner) in the SecondLevel , you have to edit the default ItemContainerStyle of the RadPanelBar like so:

1) Introduce a ScrollViewer around the ItemsPresenter of the root level items.

    <ControlTemplate x:Key="PanelBarItemTopLevelTemplate" TargetType="telerik:RadPanelBarItem">
.....
    <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                    <telerik:LayoutTransformControl x:Name="transformationRoot">
                        <ScrollViewer>
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </telerik:LayoutTransformControl>
                </Grid>

 
2) Limit the height of the root level Items

<Style x:Key="RadPanelBarItemStyle1" TargetType="telerik:RadPanelBarItem">
            <Setter Property="Background" Value="{StaticResource ControlItem_Background_Normal}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ControlItem_OuterBorder_Normal}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/>
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="IsTabStop" Value="True"/>
            <Setter Property="MaxHeight" Value="120" />

You can find this realized in the attachment.
May be you will need to use a Telerik Themed ScrollViewer, if so, the StyleManager will help you:

<ScrollViewer telerik:StyleManager.Theme="Office_Black">
                            <ItemsPresenter/>
                        </ScrollViewer>

 
Please let us know if you need further assistance. Kind regards,
Petar Mladenov
the Telerik team

[Alexey]

Hi Petar,

Thank you very much for the explanation and the source code example. They helped me to turn inner scroller on. But it looks like this solution forces me do define each element of the UI theme in the code. I cannot simply apply telerik:StyleManager.Theme="Windows7" to the panel bar since it automatically disables the inner scroller. Could you please advise if it is possible to apply the theme without defining its elements in the code?

 

Thank you in advance,
Alexey

[Petar Mladenov]

Hello Alexey,

 Setting a non-default Theme in code behind removes your custom template which is expected. So you have to get the Template,Styles and Brushes of the PanelBar for the specific theme you need to use and introduce the change you need again. These styles are located in Themes folder in installation folder of RadControls.
Please let us know if you need further assistance.

All the best,
Petar Mladenov
the Telerik team