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.
![WPF-1.jpg]()
Oh, let me explain
The following is an explaination of:
- Why did I use a Canvas Panel?
- How is the Bird moving?
- What is a Toggle Button?
- 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
{
Canvas.SetLeft(bird1, bird1Pos + 10);
}
}
3. Toggle Button and how it works
A Toggle Button is similar to a Checkbox control that holds its state when it is clicked. When a Toggle button clicked the first time it will set the IsChecked property to true and when clicked again it will set the IsChecked property to false. A Toggle Button also fires a checked event when the IsChecked property is set to true and the unchecked event is set to false. The Toggle Button is available in the System.Windows.Controls.Premitives namespace.
In this program, the Bird image is bound with the IsChecked property of the Toggle Button, the following XAML code is to bind the bird image with the IsChecked Property of the Toggle Button.
<Toggle Button Is Checked="{Binding Is Checked, Element Name=bird1, Mode=OneWay}"/>
4. Controlling the Movement of the Bird Using the Toggle Button
When the IsChecked Property of a Toggle Button is set to True, the bird will stop flying and when IsChecked is set to false the bird will start flying.
This is the code behind of the Toggle Button click event.
private void ToggleButton_Click(object sender, RoutedEventArgs \\
{
if (tglButton.IsChecked == true)
{
tglButton.Content = "Start Flying";
timer.Stop();
}
else
{
tglButton.Content = "Stop Flying";
timer.Start();
}
}
When the Toggle Button IsChecked Property is set to false:
![WPF-2.jpg]()
When the Toggle Button IsChecked Property is set to true:
![WPF-3.jpg]()
Summary
In this article I have shown how to move an image in the Canvas Panel using its properties and controlling an image movement using a Toggle Button. If you have any queries regarding the improvement of this article then please do comment. I have uploaded the source code also.