c# - 如何使用 Canvas 或窗口上的 mousedown 事件在 WPF 中为图像设置动画

Question

我有一个使用 WPF 和 C# Canvas 的窗口。在 Canvas 上我有一个图像。我想将 mousedown 事件应用于窗口或 Canvas ，这将根据单击的鼠标按钮向左或向右动画图像。鼠标左键应向左移动图像，鼠标右键应将图像向右移动。当按钮不再按下时，移动应该停止。我已经使用计时器在 winforms 中完成了此操作，但我刚刚开始使用 WPF，我似乎找不到任何鼠标触发动画的示例。任何人都可以帮助 WPF 新手吗？

Answer 1

这通常是通过在 EventTriggers 上启动 Storyboard来完成的:

<Canvas Background="White">
    <Canvas.Resources>
        <Storyboard x:Key="MoveLeft" TargetName="imageView" TargetProperty="(Canvas.Left)">
            <DoubleAnimation To="50" Duration="0:0:0.25"/>
        </Storyboard>
        <Storyboard x:Key="MoveRight" TargetName="imageView" TargetProperty="(Canvas.Left)">
            <DoubleAnimation To="250" Duration="0:0:0.25"/>
        </Storyboard>
        <Storyboard x:Key="Restore" TargetName="imageView" TargetProperty="(Canvas.Left)">
            <DoubleAnimation To="150" Duration="0:0:0.25"/>
        </Storyboard>
    </Canvas.Resources>

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
            <BeginStoryboard Storyboard="{StaticResource MoveLeft}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Image.MouseRightButtonDown">
            <BeginStoryboard Storyboard="{StaticResource MoveRight}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Image.MouseRightButtonUp">
            <BeginStoryboard Storyboard="{StaticResource Restore}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
            <BeginStoryboard Storyboard="{StaticResource Restore}"/>
        </EventTrigger>
    </Canvas.Triggers>

    <Image Width="200" Canvas.Left="150" Canvas.Top="90" x:Name="imageView" Source="floppydisk.jpg"/>
</Canvas>