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

Carousel with Reflection and Horizontal Scrollbar

2 Answers 113 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 08 Jun 2010, 09:45 PM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Milan
Telerik team
answered on 14 Jun 2010, 09:59 AM
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.
0
Scott
Top achievements
Rank 1
answered on 16 Jun 2010, 09:37 PM
Milan,
Your solution worked very well and was very well crafted. Thank you very much.
Tags
Carousel
Asked by
Scott
Top achievements
Rank 1
Answers by
Milan
Telerik team
Scott
Top achievements
Rank 1
Share this question
or