Image Movement in WPF Using Canvas Panel

In this article we will see how to move an image in WPF using a Canvas Panel. In this article I have used a Canvas Panel in which I have placed a bird image in an Image Control and I am controlling movement of the bird using a Toggle Button.



Oh, let me explain

The following is an explaination of:

1. Why did I use a Canvas Panel?
2. How is the Bird moving?
3. What is a Toggle Button?
4. How am I controlling the movement of the bird using a Toggle Button?

1. Using Canvas Panel in WPF

The Canvas Panel is the most basic layout panel in WPF. Its child elements are placed on explicit co-ordinates. The co-ordinates can be specified relative to any side of the panel using the Canvas.Top, Canvas.Left, Canvas.Right and Canvas.Bottom attached properties. The panel is typically used to group 2D elements together. A Canvas Panel is most suitable for 2D games because of its attached properties such as Canvas.Top, Canvas.Left, Canvas.Right and Canvas.Bottom.

2. Movement Of Bird Controlled Using Timer

The Dispatcher Timer class is used to perform work on his attached thread, I have used the class called Dispatcher Timer in the Using System.Windows.Thread namespace. A dispatcher is often used to invoke calls on another thread. An example would be if you have a background thread working, and you need to update the UI thread, you would need a dispatcher to do it.

The following is the code behind for moving a bird.

Private void Window_Loaded(object sender, RoutedEventArgs e)

{

DispatcherTimer timer = new DispatcherTimer();

timer.Tick += new EventHandler(timer_Tick);

timer.Interval = new TimeSpan(0, 0, 0, 0, 50);

timer.Start();

}

void timer_Tick(object sender, EventArgs e)

{

long bird1Pos = Convert.ToInt64(bird1.GetValue(Canvas.LeftProperty));

if (bird1Pos >=800)

{

Canvas.SetLeft(bird1, 12);

}

else