Adding scrollviewer to RadcarouselPanel wrapped inside a RadCarousel

2 posts, 0 answers
  1. Jason Fox
    Jason Fox avatar
    7 posts
    Member since:
    Jul 2009

    Posted 23 Aug 2011 Link to this post

    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?
  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 24 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top