Add button to ScrollViewer

4 posts, 0 answers
  1. RoxanaC
    RoxanaC avatar
    71 posts
    Member since:
    Dec 2009

    Posted 14 Apr 2010 Link to this post

    Can you tell me if there is the possibility to add another buttons with custom functionality in the ScrollViewer of a RadCarousel?

    Thank you!
  2. Milan
    Milan avatar
    1989 posts

    Posted 15 Apr 2010 Link to this post

    Hello RoxanaC,

    RadCarousel uses ScrollViewer which can be styled anyway you like. I have attached a sample project that demonstrates how the default ScrollViewer can by modified.

    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. DevCraft R3 2016 release webinar banner
  4. RoxanaC
    RoxanaC avatar
    71 posts
    Member since:
    Dec 2009

    Posted 15 Apr 2010 Link to this post

    Hello Milan!
    I'm sorry! I don't quite get it. Maybe because I'm not familiar with Expression Blend...
    I see in you example how you've changed the position of the carousel scroll viewer but I was interested in a way to add a to it another button with the same style (but different functionality & icon)

    best regards!
  5. Milan
    Milan avatar
    1989 posts

    Posted 21 Apr 2010 Link to this post

    Hi RoxanaC,

    You should create custom template for the Horizontal and Vertical ScrollBars. You could be able to extract the CarouselVerticalScrollBarStyle and CarouselHorizontalScrollBarStyle using blend and modify it according to your requirements. For example our default ScrollBar styles and templates look like this:

    01.<ControlTemplate x:Key="CarouselVerticalScrollBarTemplate" TargetType="{x:Type ScrollBar}">
    02.        <Grid SnapsToDevicePixels="true" x:Name="Bg" Background="Transparent" VerticalAlignment="Bottom">
    03.            <Grid.RowDefinitions>
    04.                <RowDefinition Height="{TemplateBinding Height}"/>
    05.                <RowDefinition Height="{TemplateBinding Height}"/>
    06.                <RowDefinition Height="{TemplateBinding Height}"/>
    07.                <RowDefinition Height="{TemplateBinding Height}"/>
    08.            </Grid.RowDefinitions>
    09.            <!-- Place another button here -->
    10.            <carousel:CarouselScrollButton Margin="2" CarouselScrollButtonType="PageUp"  Grid.Row="0"  Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource CarouselScrollButtonStyle}" />
    11.            <carousel:CarouselScrollButton Margin="2" CarouselScrollButtonType="LineUp"   Grid.Row="1" Command="{x:Static ScrollBar.LineUpCommand}" Style="{StaticResource CarouselScrollButtonStyle}" />
    12.            <carousel:CarouselScrollButton Margin="2" CarouselScrollButtonType="LineDown"  Grid.Row="2"  Command="{x:Static ScrollBar.LineDownCommand}" Style="{StaticResource CarouselScrollButtonStyle}" />
    13.            <carousel:CarouselScrollButton Margin="2" CarouselScrollButtonType="PageDown"   Grid.Row="3" Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource CarouselScrollButtonStyle}" />
    14.        </Grid>
    15.    </ControlTemplate>
    16.    <Style x:Key="CarouselVerticalScrollBarStyle" TargetType="ScrollBar">
    17.        <Setter Property="Width" Value="30"/>
    18.        <Setter Property="MinWidth" Value="30"/>
    19.        <Setter Property="Height" Value="Auto"/>
    20.        <Setter Property="MinHeight" Value="30"/>
    21.        <Setter Property="Background" Value="Transparent"/>
    22.        <Setter Property="Template" Value="{StaticResource CarouselVerticalScrollBarTemplate}" />
    23.    </Style>
    25.    <ControlTemplate x:Key="CarouselHorizontalScrollBarTemplate" TargetType="{x:Type ScrollBar}">
    26.        <Grid SnapsToDevicePixels="true" x:Name="Bg" Background="{TemplateBinding Background}" HorizontalAlignment="Right">
    27.            <Grid.ColumnDefinitions>
    28.                <ColumnDefinition Width="{TemplateBinding Width}"/>
    29.                <ColumnDefinition Width="{TemplateBinding Width}"/>
    30.                <ColumnDefinition Width="{TemplateBinding Width}"/>
    31.                <ColumnDefinition Width="{TemplateBinding Width}"/>
    32.            </Grid.ColumnDefinitions>
    33.            <carousel:CarouselScrollButton Margin="2" CarouselScrollButtonType="PageLeft" Grid.Column="0" Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource CarouselScrollButtonStyle}" />
    34.            <carousel:CarouselScrollButton Margin="2" CarouselScrollButtonType="LineLeft" Grid.Column="1" Command="{x:Static ScrollBar.LineLeftCommand}" Style="{StaticResource CarouselScrollButtonStyle}" />
    35.            <carousel:CarouselScrollButton Margin="2" CarouselScrollButtonType="LineRight" Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" Style="{StaticResource CarouselScrollButtonStyle}" />
    36.            <carousel:CarouselScrollButton Margin="2" CarouselScrollButtonType="PageRight" Grid.Column="3" Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource CarouselScrollButtonStyle}" />
    37.        </Grid>
    38.    </ControlTemplate>
    39.    <Style x:Key="CarouselHorizontalScrollBarStyle" TargetType="ScrollBar">
    40.        <Setter Property="Width" Value="Auto"/>
    41.        <Setter Property="MinWidth" Value="30"/>
    42.        <Setter Property="Height" Value="30"/>
    43.        <Setter Property="MinHeight" Value="30"/>
    44.        <Setter Property="Background" Value="Transparent"/>
    45.        <Setter Property="Template" Value="{StaticResource CarouselHorizontalScrollBarTemplate}" />
    46.    </Style>

    The CarouselScrollButton elements are the actual buttons that you see on the carousel. Using blend you should be able to add another button to the ScrollBars.

    Best wishes,

    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top