How to: Use a Carousel with an ItemsControl

• Jun 07, 2019

DXCarousel includes a CarouselItemsControl component that is a version of the standard ItemsControl. This component automatically enables interaction between an ItemsControl and a CarouselPanel. You specify your data, item visualization template and provide a CarouselPanel as the layout template, without specifying property bindings usually required to enable item-carousel communication.

XAML

<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>