Applying ControlTemplate to RadCarousel

3 posts, 1 answers
  1. James Ludlow
    James Ludlow avatar
    8 posts
    Member since:
    Dec 2009

    Posted 21 Jul 2010 Link to this post

    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.
  3. Answer
    Maya
    Admin
    Maya avatar
    4062 posts

    Posted 23 Jul 2010 Link to this post

    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
  5. James Ludlow
    James Ludlow avatar
    8 posts
    Member since:
    Dec 2009

    Posted 26 Jul 2010 Link to this post

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