[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
    [Collapse]Getting Started
      Lesson 1 - Create a Simple Carousel
      Lesson 2 - Using Carousel with an ItemsControl
      Lesson 3 - Change Carousel Path
      Lesson 4 - Using 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)

Lesson 1 - Create a Simple Carousel

This topic describes the basic steps of carousel control customization.

The first step is to add a CarouselPanel control onto the form. Once you've done this, you can populate the control with items. In this example, we'll use basic shapes (a set of colored rectangles). When you finish, your XAML should look like the following:

You'll see that rectangles aren't distributed along the path, and your form will look as shown in the following image:

This happens because the carousel doesn't know anything about the type of its elements, and how you want to distribute or animate them. You can manually bind any item property to Carousel Functions that will specify how these properties change, depending on the item position on the carousel path. While you have the freedom to customize, you can get started by using the built-in element style that automatically binds a few element properties - including proper element positioning, and size modification depending on the position and opacity.

To apply the default style to all Rectangles, you can use the following XAML within your CarouselPanel tag.

You can run the application at this time, and see that the carousel is working.

As you've noticed, the default style name is "advancedCarouselItemStyle". You can modify this style if you don't like some of its characteristics. For instance, we can add an Ellipse to the item list, specify a style for ellipses and override the opacity setting. The resulting code will look like this.

The following images show what you will see if you run the application at this time. All elements are aligned along the path. Rectangles are transparent, while the ellipse is opaque, as specified by its style.

Now you can try to further customize the carousel using the following properties: CarouselPanel.ActivateItemOnClick, CarouselPanel.IsInvertedDirection, CarouselPanel.IsRepeat, CarouselPanel.ItemMovingPath, CarouselPanel.PathVisible. See the CarouselPanel member list, to learn more about available settings.


This lesson's content is based on the Carousel Basic tutorial included with the DXCarousel installation.

Expanded See Also

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