[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Collapse]Layout Management
   [Expand]Dock Windows
   [Expand]Tile and Layout
   [Expand]Tab Control
    [Expand]Getting Started
      Product Class Structure
      Attached Properties
      Basic Principles
      Functions and Parameters
    Book Control
    Workspace Manager
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Basic Principles

Simply put, the carousel control arranges any visual elements along the specified path and allows you to navigate forward and backward, applying animated transitions. So, the very basic things to know about a carousel is that there is a set of items - any UIElement instances - and the path that specifies how these elements will be arranged.

Expanded Carousel Path

The path is specified by the CarouselPanel.ItemMovingPath property, which can accept any GeometryPath object as its value. You can specify the direction where items move along this path (CarouselPanel.IsInvertedDirection), whether the scrolling stops or you can cycle through items (CarouselPanel.IsRepeat), the path's padding within the control (CarouselPanel.PathPadding) and how many items should be simultaneously displayed on screen. For examples of carousel path customization, see the Moving Path demo shipped with DXCarousel.

To learn the basics of path customization, see How to: Use Built-in Path Types and How to: Specify a Custom Path.

Expanded Carousel Items

The CarouselPanel control is a container where you can put any number of UIElement instances, i.e. anything that has visual representation. If you simply put some elements inside, nothing will happen at first (at its simplest, you'll need one more line of XAML). This is because our carousel doesn't have any hard-coded information about elements, which results in superior flexibility. Unlike some carousel implementations, where controls can influence only a few properties, DXCarousel gives you total freedom in customizing element properties along the path. To properly arrange items and make them move, you need to specify how element properties will change. For instance, element center points should be located on the carousel path.

What you need to do to start using the carousel is specify a style for your carousel items, so that item properties are bound to DevExpress.Xpf.Carousel.CarouselPanel.Parameters. Parameters are actually functions that change their value depending on a given path point. So, if you need centered items to look bigger, you simply define a function that returns bigger values in the middle of the path. (Path coordinate range is 0 to 1, and functions can return any value, depending on the bound property). Taking into account that you can have any number of Parameters bound to any number of properties, the customization capabilities are really endless. See the Media Store and DXBook demos shipped with DXCarousel, for examples.

For more information on Parameters, see Functions and Parameters.

As stated above, there's a nearly codeless way to start using a carousel - you don't necessarily have to learn about carousel parameters and create them manually. There's a predefined style -"advancedCarouselItemStyle", which can be applied to any UIElement and will provide you with the most common carousel functionality. For more information on how to apply this style, see Lesson 1 - Create a Simple Carousel.

Expanded Transition Animations

Another point of flexibility in our carousel control is the way it handles transition animations. You can specify how transitions between static states should be animated separately from the functions that specify changes along the entire path. If you need to rotate elements with each transition, there no need to describe a complex function with multiple rotations. There will also be no need to change the function when the number of items on the path changes. You simply specify additional transition functions where an argument change from 0 to 1 corresponds to a one-step carousel scrolling.

For details on this subject, see Functions and Parameters.

Expanded See Also

Is this topic helpful?​​​​​​​