Add button to ScrollViewer

[RoxanaC]

Hello!

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

Thank you!

[Milan]

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.

Regards,
Milan
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.

[RoxanaC]

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!

RoxanaC

[Milan]

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>
24.
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,

Milan
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.