Moving a triangle using given coordinate

Question

0.00/5 (No votes)

See more:

I'm working on a project and I want to animate a rectangle to move a certain amount of coordinate that i have set earlier.

Ex: My rectangle is at the position (x=0,y=0). I want with a click of a button to make it move at position (x=150, y=230) in interval of 100 milliseconds. So with one click, it would go to (10,25) at first 100 milliseconds,(20,35) for second 100 milliseconds and so on until the rectangle reach the final position(x=150, y=230)...

I'm working with visual studio and blend on Visual C# wpf. Thanks in advance!:)

What I have tried:

C#

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
    var myRect = (Rectangle)this.FindName("myRect");
    double x = Canvas.GetLeft(myRect);
    double y = Canvas.GetTop(myRect);

    Canvas.SetLeft(myRect,x+10);
    Canvas.SetTop(myRect,y);

And this is in XAML code:

C#

<Window x:Class="move.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:move"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<StackPanel>
    <Border BorderThickness="1" BorderBrush="Aqua">
        <Canvas Name="PointCanvas" Width="500" Height="294" Margin="9,0,6,0">
            <Rectangle x:Name="myRect" Fill="#FFF5F4F5" Height="39" Canvas.Left="170" Stroke="Black" Canvas.Top="89" Width="89"/>
        </Canvas>
    </Border>
    <Button Name="Move" Click="Button_Click">Move</Button>
</StackPanel>

Posted 25-Oct-17 9:10am

Member 13485513

Updated 25-Oct-17 13:49pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Answer 1 · 2017-10-25T13:49:00

If you are using Blend, then it will generate XAML Storyboard animation for you.
1. Add new Storyboard
2. Click on the object to animate
3. click on destination time on timeline
4. move the object &/or change properties
5. Storyboard created

Press play button to see the animation. Further tweaking can be done.

Now you can set the event trigger for the Button in Xaml and clean up the generated code. It will look something like this:

XML

<Window x:Class="AnimateCanvasObject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AnimateCanvasObject"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
                Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="300"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Canvas x:Name="canvas" VerticalAlignment="Stretch" Background="Green">
            <Rectangle x:Name="rectangle"
                       Fill="#FFF4F4F5" Stroke="Black"
                       Height="100" Width="100"
                       Canvas.Left="10" Canvas.Top="10"
                       RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Canvas>
        <Button Content="Button"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Padding="10 5" Margin="10" Grid.Row="1">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>

    </Grid>
</Window>

If you want to do this in code behind only, then I will leave the exercise to you. Here is an example of how to do it... WPF: Animating TranslateTransform from code[^]