Lesson 2 - Using Carousel with an ItemsControl
DXCarousel for WPF includes a CarouselItemsControl component that has built-in support for ItemsControl and CarouselPanel interaction. This topic describes how to use this component to build a simple carousel.
ItemsControl can be bound to data in order to provide visualization for every data item, and arrange data items on screen. In the CarouselItemsControl, the visualization part is the same - you specify your data, and a template which will represent each data item. The difference from the standard ItemsControl is in layout management, which is performed by a CarouselPanel. With CarouselItemsControl, you get automatic binding setup for elements (as opposed to ItemsControl usage, where you would have to supply these bindings manually).
The following code shows you how to build a simple carousel using a CarouselItemsControl.
<Page x:Class="CarouselTutorial.TutorialPage2"
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"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
>
<dxca:CarouselItemsControl x:Name="carouselItemsControl" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<dxca:CarouselPanel AttractorPointIndex="2"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsSource>
<x:Array Type="sys:Int32">
<sys:Int32>1</sys:Int32>
<sys:Int32>2</sys:Int32>
<sys:Int32>3</sys:Int32>
<sys:Int32>4</sys:Int32>
<sys:Int32>5</sys:Int32>
</x:Array>
</ItemsControl.ItemsSource>
</dxca:CarouselItemsControl>
</Page>
As a result, you get a carousel with button elements, without having to provide item styles or property bindings.
