CarouselPanel.ItemMovingPath Property

Gets or sets the path along which the Carousel’s items are evenly arranged.

Namespace: DevExpress.Xpf.Carousel

Assembly: DevExpress.Xpf.Carousel.v23.2.dll

NuGet Package: DevExpress.Wpf.Carousel

Declaration

C#

public PathGeometry ItemMovingPath { get; set; }

VB.NET

Public Property ItemMovingPath As PathGeometry

Property Value

Type	Description
PathGeometry	A PathGeometry value that specifies the item path.

Remarks

If you specify an item path via the ItemMovingPath property, items are arranged evenly along the path. If you need to arrange items at specific points along a path, specify a path via the CarouselPanel.PointPathFunction property. In this instance, the ItemMovingPath property will be ignored.

The DXCarousel library defines a set of commonly used paths in its resources. They can be applied via the ItemMovingPath property:

• Ellipse

  Defined as follows:

  Xaml

  <PathGeometry 
      x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:CarouselPanel}, ResourceId=Ellipse}" 
      Figures="M 43,0.666687C 19.7693,0.666687 0.666664,19.7693 0.666664,43.3333C 0.666664,66.8973 19.7693,86 43.3333,86C 66.8973,86 86,66.8973 86,43.3333C 86,19.7693 66.8973,0.666687 43.3333,0.666687"
  /> 
  

• HalfEllipse

  Defined as follows:

  Xaml

  <PathGeometry 
      x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:CarouselPanel}, ResourceId=HalfEllipse}" 
      Figures="M 0.666664,0.666626C 0.666664,24.2306 19.7693,43.3333 43.3333,43.3333C 66.8973,43.3333 86,24.2306 86,0.666626"
  />
  

• Line

  Defined as follows:

  Xaml

  <PathGeometry 
      x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:CarouselPanel}, ResourceId=Line}" 
      Figures="M 0.666656,85.9987L 86,0.666687"
  />
  

• Angle

  Defined as follows:

  Xaml

  <PathGeometry 
      x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:CarouselPanel}, ResourceId=Angle}" 
      Figures="M 0.666656,0.666626L 0.666656,70C 0.666656,74.4 4.26666,78 8.66666,78L 78,78"
  />
  

• Arc

  Defined as follows:

  Xaml

  <PathGeometry 
      x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:CarouselPanel}, ResourceId=Arc}" 
      Figures="M 0.666656,86C 0.666656,86 7.33331,55.3333 31.3333,31.3333C 55.3333,7.33331 86,0.666626 86,0.666626"
  />
  

• Rectangle

  Defined as follows:

  Xaml

  <PathGeometry 
      x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:CarouselPanel}, ResourceId=Rectangle}" 
      Figures="M 86,78C 86,82.4 82.4,86 78,86L 8.66666,86C 4.26666,86 0.666656,82.4 0.666656,78L 0.666656,8.66669C 0.666656,4.26666 4.26666,0.666687 8.66666,0.666687L 78,0.666687C 82.4,0.666687 86,4.26666 86,8.66669L 86,78"
  />
  

• Sine

  Defined as follows:

  Xaml

  <PathGeometry 
      x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:CarouselPanel}, ResourceId=Sine}" 
      Figures="M 0.666687,16.6667C 0.666687,16.6667 4.66669,32.6667 16.6667,32.6667C 28.6667,32.6667 32.6667,16.6667 32.6667,16.6667C 32.6667,16.6667 36.6667,0.666687 48.6667,0.666687C 60.6667,0.666687 64.6667,16.6667 64.6667,16.6667"
  />
  

• Spiral

  Defined as follows:

  Xaml

  <PathGeometry 
      x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:CarouselPanel}, ResourceId=Spiral}" 
      Figures="M 38,47.3334C 34,48.6667 30.2187,46.2853 30.1747,42.404C 30.12,37.5533 34.008,33.6654 38.86,33.7214C 44.9226,33.7894 49.8947,38.7601 49.9626,44.824C 50.048,52.404 43.972,58.4787 36.392,58.3934C 26.9187,58.2867 19.1507,50.5187 19.044,41.0441C 18.9107,29.2001 28.4027,19.7081 40.2467,19.8427C 55.0507,20.0094 66,31.3334 66,44.6667C 66,58.0001 56.6667,74.0001 35.3333,74.0001C 14,74.0001 0.666656,58.0001 0.666656,39.3334C 0.666656,20.6667 12.6667,3.33337 39.3333,0.666687"
  />
  

  An example of using a predefined path is shown below.

Example

This example shows how to use the ItemMovingPath property to specify a path for a CarouselPanel.

The path assigned to this property is retrieved from a specific resource (ResourceId=Ellipse) defined in the DXCarousel library. Other built-in path types include: HalfEllipse, Line, Angle, Arc, Rectangle, Sine, and Spiral.

Window1.xaml

<Window x:Class="CarouselItemMovingPath.Window1" 
        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"
        Title="Window1" Height="300" Width="300" >
    <Grid>
        <Grid.Resources>
            <Style TargetType="{x:Type Rectangle}" 
                   BasedOn="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=advancedCarouselItemStyle}}" />
        </Grid.Resources>

        <dxca:CarouselPanel Margin="12" Name="carouselPanel1" VisibleItemCount="5" ActiveItemIndex="2" 
                            ItemMovingPath="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type dxca:CarouselPanel}, ResourceId=Ellipse}}">
            <Rectangle Fill="Red" />
            <Rectangle Fill="Green" />
            <Rectangle Fill="Blue" />
            <Rectangle Fill="Yellow" />
            <Rectangle Fill="Beige" />
        </dxca:CarouselPanel>
    </Grid>
</Window>