Carousel with Reflection and Horizontal Scrollbar

[Scott]

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">
        <Grid.Resources>
            <DataTemplate DataType="{x:Type local:Scene}">
                <Grid Width="285" Height="315">
                    <StackPanel>
                        <Grid Name="ItemGrid">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30" />
                                <RowDefinition Height="60*" />
                            </Grid.RowDefinitions>
                            <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">
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFE8A13C" Offset="0" />
                                        <GradientStop Color="Transparent" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFC1DCFF" Offset="0"/>
                                        <GradientStop Color="#FF7EB8F8" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Image Source="{Binding Path=Image}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="285" Width="285" />
                            </Border>
                        </Grid>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Grid.Resources>

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

Thanks,

Scott

[Milan]

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,
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.

[Scott]

Milan,

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