How to: Specify a Custom Path

• Jun 07, 2019

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.

XAML

<Page x:Class="CarouselTutorial.TutorialPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxca="http://schemas.devexpress.com/winfx/2008/xaml/carousel"
    >
    <dxca:CarouselPanel AttractorPointIndex="3" VisibleItemCount="7" x:Name="myCarousel" IsRepeat="False" PathSizingMode="Stretch">
        <dxca:CarouselPanel.ItemMovingPath>
            <PathGeometry Figures="M0,0L1,1" />
        </dxca:CarouselPanel.ItemMovingPath>
        <dxca:CarouselPanel.Resources>
            <Style TargetType="{x:Type Rectangle}" BasedOn="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=advancedCarouselItemStyle}}" />
        </dxca:CarouselPanel.Resources>
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Green"/>
        <Rectangle Fill="Blue"/>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Purple"/>
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Green"/>
    </dxca:CarouselPanel>
</Page>