RadPanelBarItem ScrollBar doesn't appear in MVVM mode

4 posts, 0 answers
  1. medialog
    medialog avatar
    25 posts
    Member since:
    Sep 2010

    Posted 16 Mar 2012 Link to this post

    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.


  2. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 21 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. medialog
    medialog avatar
    25 posts
    Member since:
    Sep 2010

    Posted 21 Mar 2012 Link to this post

    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.

  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 26 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top