Basic Principles
- 3 minutes to read
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.
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.
To learn the basics of path customization, see How to: Use Built-in Path Types and How to: Specify a Custom Path.
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 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 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 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.
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.
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 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.