How to move a picture in Surface Application (Smart Table, C Sharp .Net 4)

Question

I am programming in C Sharp for a simple Surface Table Application.

I have a canvas and an image frame:

<Canvas Name="InputCanvas"
        Background="SeaGreen"
        TouchDown="InputCanvas_TouchDown"
        TouchMove="InputCanvas_TouchMove"
        TouchUp="InputCanvas_TouchUp"
        MouseLeftButtonDown="InputCanvas_MouseLeftButtonDown"
        MouseMove="InputCanvas_MouseMove"
        MouseLeftButtonUp="InputCanvas_MouseLeftButtonUp">

        <Image Canvas.Left="0" Canvas.Top="0" 
               Height="610" Width="1590"
               Name="imgKeyboard" Stretch="None" />
</Canvas>

When I put a picture inside the 'imgKeyboard" like this:

        BitmapImage kbdBitmap = new BitmapImage();
        kbdBitmap.BeginInit();
        kbdBitmap.UriSource = new Uri(BaseUriHelper.GetBaseUri(this), "Resources/keyboard_1x.png");
        kbdBitmap.EndInit();

        imgKeyboard.Source = kbdBitmap;

The keyboard picture will appear in the center of the Image (the picture is much smaller than the canvas).

Of course I can move the keyboard picture in the XML by changing the 'Canvas.Left', 'Canvas.Top', .etc.

But I want to move the keyboard picture in the C Sharp code dynamically.

I found some code on MSDN, but they seem to be irrelevant:

private void DrawImagePoint(PaintEventArgs e)
{         
    // Create image.
    Image newImage = Image.FromFile("SampImag.jpg");

    // Create Point for upper-left corner of image.
    Point ulCorner = new Point(100, 100);

    // Draw image to screen.
    e.Graphics.DrawImage(newImage, ulCorner);
}

I don't know where to put these codes, and I can't use these classes in my Surface code.

Could anyone give me some suggestions? Thank you :)

Answer 1

The code you've found seems to be related to GDI and System.Drawing, Surface apps use WPF.

You can move an element within a canvas, by setting the Canvas.Left and Canvas.Top attached properties.

You would do:

Canvas.SetLeft(imgKeyboard, 1000) or Canvas.SetTop(imgKeyboard, 500) in your code to set the position of the imgKeyboard image element.

You could also investigate using a Storyboard to move the image, see:

Storyboards on MSDN