Lesson 3 - Change Carousel Path

• Apr 01, 2021
• 2 minutes to read

Built-in Path Types

The CarouselPanel control provides several built-in path types that you can use. These types include Ellipse, HalfEllipse, Line, Angle, Arc, Rectangle, Sineand Spiral. The following code shows you how to use the Sine type. Copy this code and try other values, to view the results.

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"
                       ItemMovingPath="{StaticResource {ComponentResourceKey 
                       TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Sine}}">
        <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>

The following image shows the result:

Specifying a Path Manually

The CarouselPanel.ItemMovingPath property also allows you to set a path manually. For instance, the following sample shows how to specify a simple line path from the top-left to the bottom-right corner. See the PathGeometry documentation in MSDN, for information on how to specify paths.

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>

The following image shows the result:

Note

As you see, the specified path is automatically resized to match the control’s size, regardless of the values that you use to specify the path shape. The way it is resized depends on the CarouselPanel.PathSizingMode property that is used in this sample to ensure that the line always goes from one corner to another regardless of the control’s aspect ratio.