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

Rad Carousel View - Like Together Deck Of Cards

4 Answers 25 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Shameel
Top achievements
Rank 1
Shameel asked on 14 Mar 2016, 06:43 AM

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

4 Answers, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 16 Mar 2016, 03:55 PM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Shameel
Top achievements
Rank 1
answered on 17 Mar 2016, 05:03 AM

Hi Dilyan Traykov,

Thanks for your reply.

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

 

0
Dilyan Traykov
Telerik team
answered on 21 Mar 2016, 11:33 AM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Shameel
Top achievements
Rank 1
answered on 23 Mar 2016, 04:53 AM

Hi Dilyan Traykov,

Let me check this....

Tags
Carousel
Asked by
Shameel
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Shameel
Top achievements
Rank 1
Share this question
or