Carousel

Use it to browse a modest set of visual items one at a time – product photographs, album or book covers, a portfolio, the screens of a kiosk, the templates in a "new document" gallery. It is an ItemsControl, so the items can be anything: bind ItemsControl.ItemsSource to your data and describe each item with an ItemsControl.ItemTemplate, or add elements to ItemsControl.Items directly.

Selection and navigation

SelectedIndex is the item at the front. Set it, or bind it, to a valid index – it starts at -1, where no item has been brought forward and the items are not yet arranged round the circle. The user moves the selection by clicking an item, turning the mouse wheel, or pressing the Left and Right arrow keys (the MoveToLeft and MoveToRight commands, which buttons of your own can use too). Each move turns the carousel in half a second, and SelectedIndexChanged follows.

Items

Each item is drawn at ItemDimension – 300 by 250 logical pixels by default – and then shown in 3D, so that size decides its shape and how sharp it is rather than how large it appears. For a list of image paths, the template keyed CarouselControlResources.CarouselItemTemplateKey shows each picture in a white frame. IsReflectionRenderingEnabled adds a mirror-image reflection beneath every item.

Shape of the ring

GapBetweenItems spaces the items round the circle, and with it the circle's size; ItemRenderAngle turns the items that are not at the front; DistanceFromCentreToUser brings the front item towards the viewer, and GapBetweenCurrentDisplayFrontItemAndOthers pushes the rest back. The view is set by Camera (or CarouselViewport3DCamera) and lit by CarouselViewport3DAmbientLightColor. All lengths in 3D are in model units, in which an item is one unit tall.

A product gallery in XAML: the window's data context exposes ProductImages, a list of image paths, and CurrentProduct, the index of the product on show.

<Window x:Class="Shop.GalleryWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:car="clr-namespace:Binarymission.WPF.Controls.Containers;assembly=Binarymission.WPF.Controls.Carousel"
        xmlns:carRes="clr-namespace:Binarymission.WPF.Controls.Containers.SharedResources;assembly=Binarymission.WPF.Controls.Carousel"
        Title="Spring collection" Width="900" Height="520">

    <DockPanel Background="#20242B">
        <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Center" Margin="12">
            <Button Content="Previous" Margin="4" Command="{x:Static car:Carousel.MoveToLeft}"  CommandTarget="{Binding ElementName=Gallery}" />
            <Button Content="Next"     Margin="4" Command="{x:Static car:Carousel.MoveToRight}" CommandTarget="{Binding ElementName=Gallery}" />
        </StackPanel>

        <car:Carousel x:Name="Gallery"
                      ItemsSource="{Binding ProductImages}"
                      SelectedIndex="{Binding CurrentProduct}"
                      ItemTemplate="{DynamicResource {x:Static carRes:CarouselControlResources.CarouselItemTemplateKey}}"
                      ItemDimension="320,240"
                      IsReflectionRenderingEnabled="True"
                      ItemRenderAngle="40"
                      GapBetweenItems="0.6" />
    </DockPanel>
</Window>

The same carousel filled with elements from code, reacting as the user turns it.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using Binarymission.WPF.Controls.Containers;

Carousel gallery = new Carousel
{
    ItemDimension = new Size(320, 240),
    IsReflectionRenderingEnabled = true
};

foreach (string file in new[] { "chair.jpg", "desk.jpg", "lamp.jpg", "shelf.jpg", "sofa.jpg" })
{
    gallery.Items.Add(new Image { Source = new BitmapImage(new Uri("pack://application:,,,/Products/" + file)), Stretch = System.Windows.Media.Stretch.Uniform });
}

gallery.SelectedIndex = 0;
gallery.SelectedIndexChanged += (sender, e) =>
    statusText.Text = "Product " + (gallery.SelectedIndex + 1) + " of " + gallery.Items.Count;