Adding scrollviewer to RadcarouselPanel wrapped inside a RadCarousel

[Jason Fox]

I have a situation where I have a RadcarouselPanel set as the itemPanelTemplate of a RadCarousel.  Is there a way to wrap the RadCarouselPanel in a scrollviewer when it is used this way?  I'd still like to use a traditional scroll bar as the navigation method as opposed to the buttons supplied with the RadCarousel.  I also want to use the scrollviewer's scroll event so I can determine when the items have been moved. Is this possible?

[Dimitrina]

Hi Jason Fox,

 In order to replace the default navigation buttons with a traditional Scroll Bar you should redefine the style of our CarouselItemsControl. 

The carousel navigations buttons are actually buttons of a scrollbar and in order to customize them you should create a custom ScrollBar style like this one:

<Style TargetType="{x:Type telerik:CarouselItemsControl}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:CarouselItemsControl}">
                            <ControlTemplate.Resources>
                                <!--Here you can redefine the appearance of the ScrollBar-->
                                <Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource {x:Type ScrollBar}}">
                                </Style>
                                <!--Here you can redefine the appearance of the ScrollViewer-->
                                <Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource {x:Type ScrollViewer}}">
                                </Style>
                            </ControlTemplate.Resources>
                             <Border Background="{TemplateBinding Background}"
                                     BorderBrush="{TemplateBinding BorderBrush}"
                                     BorderThickness="{TemplateBinding BorderThickness}">
                                <ScrollViewer CanContentScroll="True"
                                   HorizontalScrollBarVisibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadCarousel}}, Path=HorizontalScrollBarVisibility}"
                                   VerticalScrollBarVisibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadCarousel}}, Path=VerticalScrollBarVisibility}">
                                    <ItemsPresenter x:Name="ItemsPresenter" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                                </ScrollViewer>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


<telerik:RadCarousel x:Name="radCarousel" 

                             Loaded="radCarousel_Loaded" >

           <telerik:RadCarousel.ItemsPanel>

               <ItemsPanelTemplate>

                   <telerik:RadCarouselPanel AutoLoadItems="false" Focusable="True" />

               </ItemsPanelTemplate>            

           </telerik:RadCarousel.ItemsPanel>

       </telerik:RadCarousel>

Please try the suggested approach and let me know if this is what you need.

Best wishes,
Didie
the Telerik team