Rad Carousel View - Like Together Deck Of Cards

[Shameel]

Hi Team,

I would like to customize the Rad Carousel View - Like Together Deck Of Cards. Could you please give me the exact solution for this. Currently i used RadCarousal to display contents.

For more, Please go through the attached file..

[Dilyan Traykov]

Hello Shameel,

It really depends on the exact effect you're trying to achieve, but in any case, you will need to define a custom Path for your RadCarouselPanel. Here's my interpretation of the desired effect, but you are free to modify it to your liking:

<telerik:RadCarousel x:Name="MyCarousel">
            <telerik:RadCarousel.ItemsPanel>
                <ItemsPanelTemplate>
                    <telerik:RadCarouselPanel ItemsPerPage="1" IsContinuous="True" Path="{StaticResource horizontalPath}" />
                </ItemsPanelTemplate>
            </telerik:RadCarousel.ItemsPanel>
        </telerik:RadCarousel>

<Grid.Resources>
            <Path x:Key="horizontalPath">
                <Path.Data>
                    <EllipseGeometry RadiusX="1" RadiusY="100" />
                </Path.Data>
            </Path>
</Grid.Resources>

Let me know whether you find this helpful.

Regards,
Dilyan Traykov
Telerik

[Shameel]

Hi Dilyan Traykov,

Thanks for your reply.

Let me check this. Actually i want to list out all items with same padding/margin...

 

[Dilyan Traykov]

Hello Shameel,

You are also free to modify ScaleStops and OpacityStops to your liking. Here's a code snippet from our Top Element Path Fraction demo:

<telerik:RadCarousel x:Name="MyCarousel">
    <telerik:RadCarousel.ItemsPanel>
        <ItemsPanelTemplate>
            <telerik:RadCarouselPanel ItemsPerPage="1" IsContinuous="True" Path="{StaticResource horizontalPath}">
     <telerik:RadCarouselPanel.ScaleStops>
        <telerik:PathStopCollection>
            <telerik:PathStop PathFraction="0.0" Value="0.2" />
            <telerik:PathStop PathFraction="0.5" Value="1.5" />
            <telerik:PathStop PathFraction="1.0" Value="0.2" />
        </telerik:PathStopCollection>
    </telerik:RadCarouselPanel.ScaleStops>
    <telerik:RadCarouselPanel.OpacityStops>
        <telerik:PathStopCollection>
            <telerik:PathStop PathFraction="0.0" Value="0.3" />
            <telerik:PathStop PathFraction="0.47" Value="0.7" />
            <telerik:PathStop PathFraction="0.5" Value="1.0" />
            <telerik:PathStop PathFraction="0.53" Value="0.7" />
            <telerik:PathStop PathFraction="1.0" Value="0.3" />
        </telerik:PathStopCollection>
    </telerik:RadCarouselPanel.OpacityStops>
            </telerik:RadCarouselPanel>
        </ItemsPanelTemplate>
    </telerik:RadCarousel.ItemsPanel>
</telerik:RadCarousel>

To have the same padding/margin on all items, you can define the following ScaleStops:

<telerik:RadCarouselPanel.ScaleStops>
    <telerik:PathStopCollection>
        <telerik:PathStop PathFraction="0.0" Value="1" />
        <telerik:PathStop PathFraction="1.0" Value="1" />
    </telerik:PathStopCollection>
</telerik:RadCarouselPanel.ScaleStops>

I hope that this helps you achieve the desired effect.

Regards,
Dilyan Traykov
Telerik

[Shameel]

Hi Dilyan Traykov,

Let me check this....