Rad Carousel View - Like Together Deck Of Cards

5 posts, 0 answers
  1. Shameel
    Shameel avatar
    15 posts
    Member since:
    Mar 2016

    Posted 14 Mar Link to this post

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

  2. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    368 posts

    Posted 16 Mar Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Shameel
    Shameel avatar
    15 posts
    Member since:
    Mar 2016

    Posted 17 Mar in reply to Dilyan Traykov Link to this post

    Hi Dilyan Traykov,

    Thanks for your reply.

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

     

  5. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    368 posts

    Posted 21 Mar Link to this post

    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.
  6. Shameel
    Shameel avatar
    15 posts
    Member since:
    Mar 2016

    Posted 22 Mar in reply to Dilyan Traykov Link to this post

    Hi Dilyan Traykov,

    Let me check this....

Back to Top
UI for WPF is Visual Studio 2017 Ready