Carousel with Reflection and Horizontal Scrollbar

3 posts, 1 answers
  1. Scott
    Scott avatar
    42 posts
    Member since:
    Oct 2007

    Posted 08 Jun 2010 Link to this post

    I think I've got myself in a Catch 22. I need a Carousel with both reflection and a horizontal scrollbar.

    - It seems that the RadCarouselPanel doesn't support reflection, so I would have to use a RadCarousel control instead.
    - It seems the best way to get a horizontal scrollbar underneath the carousel control is to use a ScrollViewer control around a RadCarouselPanel, however, then I'd lose the reflection that is required by the design comps. 

    I've created a CustomItemTemplate to match the design from the designers below:

        <Grid Name="SceneCarouselGrid"
                <DataTemplate DataType="{x:Type local:Scene}"
                    <Grid Width="285" Height="315"
                            <Grid Name="ItemGrid"
                                    <RowDefinition Height="30" /> 
                                    <RowDefinition Height="60*" /> 
                                <Label Grid.Row="0" Content="{Binding Path=Title}" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Margin="0" Name="SceneLabel" FontFamily="HelveticaNeue" FontWeight="Bold" FontSize="15" Background="#00000000" Foreground="White" /> 
                                <Border Grid.Row="1" x:Name="CarouselItemMainBorder" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinHeight="285" MinWidth="285" BorderThickness="3"
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"
                                            <GradientStop Color="#FFE8A13C" Offset="0" /> 
                                            <GradientStop Color="Transparent" Offset="1" /> 
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"
                                            <GradientStop Color="#FFC1DCFF" Offset="0"/> 
                                            <GradientStop Color="#FF7EB8F8" Offset="1"/> 
                                    <Image Source="{Binding Path=Image}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="285" Width="285" /> 

    Can you advise me on the best way to approach this? 

  2. Answer
    Milan avatar
    1989 posts

    Posted 14 Jun 2010 Link to this post

    Hello Scott,

    RadCarouselPanel does not support reflection but you can easily implement such functionality. I have attached a sample application which demonstrates how this can be achieved. The project contains a special user control called ImageWithReflection which add reflection to the image that it displays.

    Hope this helps.

    Best wishes,
    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.
  3. Scott
    Scott avatar
    42 posts
    Member since:
    Oct 2007

    Posted 16 Jun 2010 Link to this post

    Your solution worked very well and was very well crafted. Thank you very much.
Back to Top