c# - キャンバスまたはウィンドウでマウスダウン イベントを使用して WPF で画像をアニメーション化する方法

Question

WPF と C# を使用したキャンバスを持つウィンドウがあります。キャンバスにはイメージがあります。クリックされたマウスボタンに応じて、画像を左または右にアニメーション化するマウスダウンイベントをウィンドウまたはキャンバスに適用したいと考えています。マウスの左ボタンは画像を左に移動し、マウスの右ボタンは画像を右に移動する必要があります。ボタンが押されなくなると動きが止まるはずです。タイマーを使用して winforms でこれを実行しましたが、WPF を使い始めたばかりで、マウスでトリガーされたアニメーションの例が見つからないようです。誰でもWPF初心者を助けることができますか?

Answer 1

これは通常、EventTriggers でストーリーボードを開始することによって行われます。

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