Basic Animation problem - Translations (WPF)

[drewos]

Hi

I'm sure this is pretty easy but I'm really struggling to get my animation to work. Basically, I have an image of black and white squares like a black and white lineo kitchen floor (7x4) and I want to move a rectangle to points where edges of four squares meet. Effectively, I want to make these point grids so I can place the rectangle using coordinates. So far, I have manages to make the rectangle move using translations however this I believe only translates using the margins rather than creating a grid. Apologies if I have been unclear! :)

XAML:

<Window x:Class="Transforming_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Transforming Test Program - Drew O'Sullivan" Height="350" Width="525">
    <Grid Background="#FFDEDEDE">

       <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="219,276,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />

        <Canvas Margin="219,60,0,0" Width="7cm" Height="4cm" RenderTransformOrigin="7,4" >
            <Image Height="4cm" HorizontalAlignment="Center" Margin="0,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Center" Width="7cm" Source="file:///C:/Users/User/Documents/University%20Work/Third%20Year/Group%20Buggy%20Project/Transforming%20Test/Transforming%20Test/Resources/Initial%20Design%20Goal%20Map.png" Canvas.Left="0" Canvas.Top="0" />
            <Image Height="17" Name="image2" Stretch="Fill" Width="15" Source="file:///C:/Users/User/Documents/University%20Work/Third%20Year/Group%20Buggy%20Project/Transforming%20Test/Transforming%20Test/Resources/Buggy.png" Canvas.Left="-8" Canvas.Top="-8" Margin="37.7952755905512" VerticalAlignment="Center" HorizontalAlignment="Center" MaxWidth="Infinity" MaxHeight="Infinity" RenderTransformOrigin="1,1">
                <Image.RenderTransform>
                    <TranslateTransform x:Name="myTranslateTransform2" X ="5" Y="5" />
                </Image.RenderTransform>
            </Image>
        </Canvas>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

C#:

namespace Transforming_Test
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private TranslateTransform Trans = new TranslateTransform(0, 0);
        _Transformations Transform;


        public MainWindow()
        {
            InitializeComponent();
            Transform = new _Transformations();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {

            myTranslateTransform2.Y += 1;

        }
    }
}