如何使用画布或窗口上的mousedown事件在WPF中对图像进行动画处理

Question

我有一个使用WPF和C＃的带有画布的窗口。 在画布上，我有一个图像。 我想将mousedown事件应用于窗口或画布，该事件将根据单击哪个鼠标按钮来向左或向右移动图像。 鼠标左键应将图像向左移动，鼠标右键应将图像向右移动。 当按钮不再按下时，运动应停止。 我已经使用计时器在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>