How to create an automatic carousel animation using C # or XAML?

Question

I did carousels in web development, but animating them in WPF via XAML or C # is new to me. There are examples on the Internet, but they are either outdated or not what I'm looking for. Even when I play with the source code of other projects, this is not what I hope for.

I want the images to shift left-right (horizontal) automatically. The user cannot interact with images to stop sliding. Although I can do this manually in ScrollViewer, the process will be manual ...

ScrollViewerhas no dependencies for animation. I tried using this to see if this is possible, but the application will always crash. An example that I used. .

Another attempt I tried was to store the images in StackPanel, making sure that it StackPanelwas the width of one of my images, and then DispatcherTimerset the animation of the TranslateTransformX property . But ... it won't go anywhere.

Use ScrollVieweror StackPanelnot at all. I just want the carousel effect to automatically go through the images. It looks like THIS

I am currently using Visual Studio 2012 and 2013 if this helps. Is there any way to do this?

Answer 1

wpf. , UserControl. , StackPanel. :

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

Storyboard WindowResources , . X TranslationTransform, StackPanel "" - . 3 3 . - . . :

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 , . AnimateCarousel actualy . , , DoubleAnimation To , . , Begin , .