Question

我在网络开发中做过旋转木马，但是通过XAML或C＃在WPF中制作动画对我来说是新的。网上有一些例子，但它们要么已经过时，要么不是我想要的。即使我玩其他项目的源代码，也不是我所希望的。

我希望图像自动从左向右（水平）滑动。用户无法与图像交互以停止滑动。虽然我可以在ScrollViewer中手动执行此操作，但此过程是手动...

ScrollViewer没有动画的依赖关系。我尝试使用它来查看是否可能，但应用程序将始终崩溃。 Example I used.

我尝试过的另一种尝试是将图片存储在StackPanel中，确保StackPanel是我的某个图片的宽度，然后让DispatcherTimer设置为动画TranslateTransform的X属性。但是......那并没有去任何地方。

使用ScrollViewer或StackPanel并不重要。我只想要一个类似旋转木马的效果自动转换图像。有点像THIS

我目前正在使用Visual Studio 2012和2013，如果有帮助的话。有没有办法做到这一点？

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>

WindowResources中的Storyboard元素定义要执行的动画。它将更改应用于StackPanel“Carousel”的TranslationTransform的X属性 - 这将导致该面板的动画移动。面板内的3个按钮模拟旋转木马的3个面板。底部有2个按钮 - 一个用于向左移动，另一个用于向右移动。有回调方法限制在他们身上。表单背后的代码如下：

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实际启动动画。它引用了Resources中定义的Storyboard，并将其DoubleAnimation To属性设置为Carousel面板应移动到的值。然后通过在故事板上调用Begin方法来执行动画。

如何使用C＃或XAML创建自动动画轮播图像？

1 个答案: