Applying ControlTemplate to RadCarousel

[James Ludlow]

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.

[Maya]

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

[James Ludlow]

Ah, that's fantastic. Thanks very much for your help.