RadPanelBarItem ScrollBar doesn't appear in MVVM mode

[medialog]

Hello I have a problem with the RadPanelBar.

When I use it with databinding the scrool bar doesn't appear in RadPanelBarItem...

I use Telerik Q1 2012.

<UserControl.Resources>
       <Style x:Key="SimpleInvoicesStyle" TargetType="telerik:RadPanelBarItem">
           <Setter Property="VerticalContentAlignment" Value="Top"/>
           <Setter Property="HorizontalContentAlignment" Value="Left"/>
           <Setter Property="Header" Value="TEST BINDING"/>
           <Setter Property="ItemsSource" Value="{Binding Items}"/>
           <Setter Property="IsExpanded" Value="True"/>
           <Setter Property="ItemTemplate">
               <Setter.Value>
                   <DataTemplate>
                       <ScrollViewer>
                           <Grid>
                               <Rectangle Height="300" Width="100" Fill="Pink"/>
                               <TextBlock Text="{Binding Value}" />
                           </Grid>
                       </ScrollViewer>
                   </DataTemplate>
               </Setter.Value>
           </Setter>
       </Style>

       <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
           <telerik:RadWrapPanel HorizontalAlignment="Stretch"
                               VerticalAlignment="Stretch" />
       </ItemsPanelTemplate>

       <Style x:Key="containerStyle"
           TargetType="telerik:RadPanelBarItem">
           <Setter Property="ItemsPanel"
               Value="{StaticResource ItemsPanelTemplate1}" />
       </Style>
   </UserControl.Resources>


   <Grid >
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>

           <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>

       <telerik:RadPanelBar Height="200"
           ExpandMode="Multiple"  DropExpandDelay="0"
           ItemContainerStyle="{StaticResource SimpleInvoicesStyle}"
           ScrollViewer.HorizontalScrollBarVisibility="Disabled"
           ScrollViewer.VerticalScrollBarVisibility="Disabled"
           VerticalAlignment="Top"
           HorizontalContentAlignment="Left"
           BringIntoViewMode="Header"
           ItemsSource="{Binding Items}"
           Orientation="Horizontal"/>

       <telerik:RadPanelBar Height="200" Grid.Column="1"
           ExpandMode="Multiple"  DropExpandDelay="0"
           ScrollViewer.HorizontalScrollBarVisibility="Disabled"
           ScrollViewer.VerticalScrollBarVisibility="Disabled"
           VerticalAlignment="Top"
           HorizontalContentAlignment="Left"
           Orientation="Horizontal">
           <telerik:RadPanelBarItem
               Header="TEST" IsExpanded="True"
               VerticalAlignment="Top"
               HorizontalContentAlignment="Left">
               <ScrollViewer>
                   <Grid>
                       <Rectangle Height="300" Width="100" Fill="Pink"/>
                       <TextBlock Text="TEST" />
                   </Grid>
               </ScrollViewer>
           </telerik:RadPanelBarItem>
       </telerik:RadPanelBar>
   </Grid>

How to have the same behavior as RadPanel without Binding?

Thank by advance.

[Hristo]

Hello,

I've prepared a sample project demonstrating how to use separate ScrollViewers for every item. If you do not need separate ScrollViewer for every item you could use the built-in ones.

The key part is to use DataTemplate/HierarchicalDataTemplate and place a ScrollViewer with limited size.
You could either provide it in XAML or bind it to your view model.

Hope this helps. Please let us know if you need further assistance or the sample does not fit your case.

Regards,
Hristo
the Telerik team

[medialog]

Hello in your sample you set the Height of the "SecondLevelTemplate".

In my case I can't set the Height I want the height of the only item of my RadPanelBarItem take all height available and if this item is bigger the size avaible then the scrollviewer appears.

[Petar Mladenov]

Hi Jerome,

 So you need the ScrollViewer to be as tall as its parent RadPanelBarItem. The way to achieve this is to configure a Binding like so:

<DataTemplate x:Key="SecondLevelTemplate">
            <ScrollViewer Height="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPanelBarItem}, Path=ActualHeight}"
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto">
                <Grid >

Please let us know if this fits in your scenario.

All the best,
Petar Mladenov
the Telerik team