× Main Menu

WPF C# Tutorial – Move an object with Keyboard and Timer in Visual Studio

Adding the key board events

Currently we have two different keyboard events for this program, first one is the key down which will trigger when any keys on the keyboard is pressed down and the second one is key up which is triggered when the keys are released. We cannot afford to trigger the event with every key because then the program will be very confusing to use so we will only trigger the event when certain keys are pressed. We are interested in UP, DOWN, LEFT and RIGHT keys on the keyboard. Let take a look at both of the functions, they are very similar to each other.

Canvas_KeyDown function contains 4 if statements that’s checking for their respective keys being pressed. If you look at the first if statement if (e.Key == Key.Down) is checking if the pressed key is DOWN then we can change the goDown Boolean to true. This will be useful in the timer event. In this function we are doing the same to rest of the keys. Each key is turning the concurring Booleans to true.

In the Canvas_KeyUp function we are reversing the Booleans we turned true in the first function. Its similar to the key down function except when the DOWN key is pressed and released it will turn the goDown Boolean back to false. This logic follows through the function.

The Timer Function –

Below is the timer function, let’s take a look on how the timer is helping us move the rectangle across the form.

In the timer function we have 4 different if statements. Lets break them down

if (goUp && Canvas.GetTop(rec1) > 0)

{

Canvas.SetTop(rec1, Canvas.GetTop(rec1) – speed);

// if go up is true and player is within the boundary from the top

// then we can use the set top to move the rec1 towards top of the screen

}

This is the first if statement first we are IF goUp Boolean is true meaning if the player has pressed the UP button then we are using the double & sign which means both of these conditions will need to be true in order for the other instructions to go on. We are looking for the goUp Boolean to be true and Canvas.GetTop(rec1) meaning get the top of the object is greater than 0 meaning if the object is inside the form then we can move it up. In this case if we hit the top of the form then it will stop.

Canvas.SetTop(rec1, Canvas.GetTop(rec1) – speed);

We are using Canvas.SeTop(), inside this Set top function we need to add two different values inside it, first which object we are querying and second is the position we want to move to, so we are using the Get top again to get the position of the rec1 object and we will deduct the speed integer from it. Notice that since we want to make the object move up we are deducting the speed from the current position.

if (goDown && Canvas.GetTop(rec1) + (rec1.Height * 2) < Application.Current.MainWindow.Height)

{

Canvas.SetTop(rec1, Canvas.GetTop(rec1) + speed);

// if go down is true and player is within the boundary from the bottom of the screen

// then we can set top of rec1 to move down

}

This if statement is checking if the goDown Boolean is true AND we get the top position of the rec1 object and then we are adding the height TIMES 2 meaning we will get the full height of the object and it needs to be less the height of the main window meaning its still inside the boundary. When both of these conditions are met we can then move the object down. In the last if statement we were deducting the speed from the set top function since we want to make it go down we are now adding the speed to it.

if (goLeft && Canvas.GetLeft(rec1) > 0)

{

Canvas.SetLeft(rec1, Canvas.GetLeft(rec1) – speed);

// if go left is true and player is inside the boundary from the left

// then we can set left of the player to move towards left of the screen

}

Now that we have done UP and DOWN for LEFT and RIGHT keys. They are similar to the ones before except for GetTop which changes to GetLeft and SetTop chages to SetLeft. In this if statement we are checking if goLeft is true AND rec1’s left position is greater than 0 then we can continue to move by using the SetLeft and deducting the speed from the GetLeft position.

if (goRight && Canvas.GetLeft(rec1) + (rec1.Width * 2) < Application.Current.MainWindow.Width)

{

Canvas.SetLeft(rec1, Canvas.GetLeft(rec1) + speed);

// if go right is true and player is inside the boundary from the right

// then we can set left of the player to move towards right of the screen

}

Above is the go right if statement, this one is checking if the go right Boolean is true, rec1’s get left plus the width times 2 is less than the applications width then we can move the object to the right.

If you managed to follow this so far, well done. New code can always be little daunting but always keep trying.

Full Source code available.

Moo Out.




Comment on this tutorial and let us know how you got on -

%d bloggers like this: