wpf - 如何通过单击形状为图像设置动画（更改网格上任何图像的位置）？

Question

我想通过单击另一个组件来移动或更改图像的位置。我知道如何通过单击来更改图像位置。这段代码显示。

<Window x:Class="WpfApplication1.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>
    <Style TargetType="Image">
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseLeftButtonUp">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                                Storyboard.TargetProperty="(RenderTransform).(TranslateTransform.Y)"
                                Duration="0:0:2"
                                To="-279">

                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <Canvas Margin="10">
        <Rectangle Fill="Blue"
                   Height="150"
                   Width="150" Canvas.Left="269" Canvas.Top="139">
        </Rectangle>
        <Image x:Name="image" Source="Images/circle_yellow.png" Height="100" Canvas.Left="50" Canvas.Top="162" Width="100">
            <Image.RenderTransform>
                <TranslateTransform/>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Grid>

但我希望能够单击矩形，而不是图像。并使图像移动

Answer 1

尝试这个：

<Canvas Margin="10">
    <Rectangle Fill="Blue"
            Height="150"
            Width="150" Canvas.Left="269" Canvas.Top="139">
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="MouseLeftButtonUp">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                                Storyboard.TargetName="image"
                                Storyboard.TargetProperty="(RenderTransform).(TranslateTransform.Y)"
                                Duration="0:0:2"
                                To="-279">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
    <Image x:Name="image" Source="Images/circle_yellow.png" Height="100" Canvas.Left="50" Canvas.Top="162" Width="100">
        <Image.RenderTransform>
            <TranslateTransform/>
        </Image.RenderTransform>
    </Image>
</Canvas>