This is a migrated thread and some comments may be shown as answers.

Add button to ScrollViewer

3 Answers 190 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
RoxanaC
Top achievements
Rank 1
RoxanaC asked on 14 Apr 2010, 02:51 PM
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!

3 Answers, 1 is accepted

Sort by
0
Milan
Telerik team
answered on 15 Apr 2010, 09:17 AM
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.
0
RoxanaC
Top achievements
Rank 1
answered on 15 Apr 2010, 11:12 AM
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
0
Milan
Telerik team
answered on 21 Apr 2010, 08:52 AM
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.
Tags
Carousel
Asked by
RoxanaC
Top achievements
Rank 1
Answers by
Milan
Telerik team
RoxanaC
Top achievements
Rank 1
Share this question
or