How to: Handle the Click event for a carousel item

  • 2 minutes to read

Specify our own template for the ItemsControl.ItemTemplate property and handle the PreviewMouseDown event for the control in the ItemTemplate. In the PreviewMouseDown event handler, to make sure that the user clicks an active item, compare the DataContext property of the ActiveItem and sender; if they equal each other, the active item is clicked.

View Example

<Window x:Class="WpfApplication27.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxca="http://schemas.devexpress.com/winfx/2008/xaml/carousel"
        xmlns:local="clr-namespace:WpfApplication27"
        Title="Window1"
        Width="597"
        Height="339"
        dx:ThemeManager.ThemeName="DeepBlue">

    <Window.Resources>
        <local:MyList x:Key="myList" />
    </Window.Resources>

    <dxca:CarouselItemsControl x:Name="carouselItemsControl" ItemsSource="{Binding Source={StaticResource myList}}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <dxca:CarouselPanel ActivateItemOnClick="True" AttractorPointIndex="2" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Content="{Binding Field1}" PreviewMouseDown="Button_PreviewMouseDown" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </dxca:CarouselItemsControl>

</Window>