wpfwpf-animation

How can I Animate Image (Change the Position of any Image on Grid) By Clicking a Shape?


I wanna Move or Change position of an Image by clicking Another component. I know How to change an Image location by clicking it. This code shows.

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

But I wanna be Able to click the rectangle, not the Image. and Make the Image Move


Solution

  • Try this:

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