How to create an automatic animated carousel cyling images using C# or XAML?

Question

I have done carousels in web development, but animating them in WPF through XAML or C# is new to me. There are examples on the web, but they either are outdated or not what I am looking for. Even when I play around with source code of other projects, it's not what I hope for.

I want to have images sliding left-to-right (horizontally) automatically. The user cannot interact with the images to stop the sliding. While I can do this manually in a ScrollViewer, the process is manual...

ScrollViewer doesn't have any dependencies for animation. I tried using this to see if it is possible, but the application would always crash. Example I used..

Another attempt I've tried is storing images in a StackPanel, making sure the StackPanel is the width of one of my images, then having DispatcherTimer set to animate the TranslateTransform's X property. But...that didn't go anywhere.

Using a ScrollViewer or StackPanel is not important at all. I just want to have a carousel-like effect automatically transitioning through images. Sort of like THIS

I'm currently using Visual Studio 2012 and 2013, if it helps. Is there a way to do this?

Answer 1

I' ve prepared exemplary carousel in wpf. You might want to use the code in form of UserControl for instance. As you proposed I prepared carousel with use of StackPanel. Code of my form looks as follows:

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="CarouselStoryboard">
            <DoubleAnimation
                Storyboard.TargetName="CarouselTransform" 
                Storyboard.TargetProperty="X"/>
        </Storyboard>
    </Window.Resources>
    <Canvas>
        <StackPanel Name="Carousel" Orientation="Horizontal">
            <StackPanel.RenderTransform>
                <TranslateTransform x:Name="CarouselTransform" />
            </StackPanel.RenderTransform>
            <Button Height="350" Width="525" Content="Page1"/>
            <Button Height="350" Width="525" Content="Page2"/>
            <Button Height="350" Width="525" Content="Page3"/>
        </StackPanel>
        <Button Click="Left_Click" Content="Left" HorizontalAlignment="Left" Margin="10,164,0,0" VerticalAlignment="Top" Width="45">

        </Button>
        <Button Click="Right_Click" Content="Right" HorizontalAlignment="Left" Margin="448,170,0,0" VerticalAlignment="Top" Width="45"/>
    </Canvas>
</Window>

The Storyboard element within WindowResources defines animation to be performed. It will change X property of TranslationTransform applied to StackPanel "Carousel" - this will result in animated movement of that panel. 3 buttons within the panel simulates 3 panels of the carousel. At the bottom there are 2 buttons - one for moving left and second for moving right. There are callback methods bounded to them. Code behind of the form looks like that:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private int currentElement = 0;

    private void Left_Click(object sender, RoutedEventArgs e)
    {
        if(currentElement < 2)
        {
            currentElement++;
            AnimateCarousel();
        }
    }

    private void Right_Click(object sender, RoutedEventArgs e)
    {
        if (currentElement > 0)
        {
            currentElement--;
            AnimateCarousel();
        }
    }

    private void AnimateCarousel()
    {
        Storyboard storyboard = (this.Resources["CarouselStoryboard"] as Storyboard);
        DoubleAnimation animation = storyboard.Children.First() as DoubleAnimation;
        animation.To = -this.Width * currentElement;
        storyboard.Begin();
    }
}

currentElement field holds information which panel is currently being displayed to the user. Method AnimateCarousel actualy starts the animation. It refers to Storyboard defined in Resources and sets its DoubleAnimation To property to the value to which Carousel panel should be moved. Then by calling Begin method on storyboard it performs animation.