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

Applying ControlTemplate to RadCarousel

2 Answers 84 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
James Ludlow
Top achievements
Rank 1
James Ludlow asked on 21 Jul 2010, 10:52 AM
Having a little problem when I try to apply a control template to the rad carousel, in that as soon as I put in the binding to the template, the carousel no longer displays any items.

Here is the code for the carousel:
<Border
    ClipToBounds="True"
    Grid.Column="1"
    Grid.RowSpan="4"
    Grid.ColumnSpan="2"
    Grid.Row="0"
    VerticalAlignment="Top"
    Margin="0,40,10,0"
    HorizontalAlignment="Right"
    x:Name="carFav"
    Height="70px"
    Width="500px"
    Visibility="Collapsed">
    <telerik:RadCarousel
            x:Name="Favorites"
            AutoGenerateDataPresenters="False"
            HorizontalScrollBarVisibility="Hidden"
            VerticalContentAlignment="Bottom"
            Template="{StaticResource FavouritesCarousel}">
        <telerik:RadCarousel.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF7D7D7D" Offset="0.164"/>
                <GradientStop Color="White" Offset="0.093"/>
            </LinearGradientBrush>
        </telerik:RadCarousel.Background>
        <telerik:RadCarousel.ReflectionSettings>
            <telerik:ReflectionSettings Visibility="Visible" OffsetY="3"/>
        </telerik:RadCarousel.ReflectionSettings>
    </telerik:RadCarousel>
</Border>

And the control template code:
<ControlTemplate x:Key="FavouritesCarousel" TargetType="{x:Type telerik2:RadCarousel}">
    <Grid>
        <ScrollViewer
            x:Name="CarouselContentPresenter"
            CanContentScroll="True"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Background="Gray"
            HorizontalScrollBarVisibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik2:RadCarousel}}, Path=HorizontalScrollBarVisibility}"
            VerticalScrollBarVisibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik2:RadCarousel}}, Path=VerticalScrollBarVisibility}">
            <ItemsPresenter
                x:Name="ItemsPresenter"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"/>
        </ScrollViewer>
    </Grid>
</ControlTemplate>


Any suggestions? Thanks.

2 Answers, 1 is accepted

Sort by
0
Accepted
Maya
Telerik team
answered on 23 Jul 2010, 02:49 PM
Hi James Ludlow,

Internally, the structure of the RadCarousel is a bit different and that is why the way you are setting the Template is not working as expected. So, what you can do in this case is to define it as follows:

<Window.Resources>
        <Style TargetType="{x:Type telerik:CarouselItemsControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:CarouselItemsControl}">
                        <Border>
                            <telerik:CarouselScrollViewer
                                x:Name="CarouselContentPresenter"
                                CanContentScroll="True"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Background="Blue"
                                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"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"/>
                            </telerik:CarouselScrollViewer>
                        </Border>                  
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

Furthermore, there is no need to set the Template property of the Carousel as the way the style is defined here, it will be applied immediately.
 

Kind regards,
Maya
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
James Ludlow
Top achievements
Rank 1
answered on 26 Jul 2010, 09:15 AM
Ah, that's fantastic. Thanks very much for your help.
Tags
Carousel
Asked by
James Ludlow
Top achievements
Rank 1
Answers by
Maya
Telerik team
James Ludlow
Top achievements
Rank 1
Share this question
or