Skip to main content

How to: Specify a Custom Path

There are a few predefined path types, but you can also specify path shapes manually. The following sample code shows how to create a path that arranges items from the top-left to bottom-right control’s corner. See the CarouselPanel.ItemMovingPath property and PathGeometry standard class documentation, for more information. Note also, that the path shape is affected by the CarouselPanel.PathSizingMode property.

<Page x:Class="CarouselTutorial.TutorialPage1"
    <dxca:CarouselPanel AttractorPointIndex="3" VisibleItemCount="7" x:Name="myCarousel" IsRepeat="False" PathSizingMode="Stretch">
            <PathGeometry Figures="M0,0L1,1" />
            <Style TargetType="{x:Type Rectangle}" BasedOn="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=advancedCarouselItemStyle}}" />
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Green"/>
        <Rectangle Fill="Blue"/>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Purple"/>
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Green"/>