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

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

Welcome to this tutorial for WPF and C#, this tutorial will cover how to move objects smoothly in WPF and C# using they key down and up event and then we will move an object using the up, down, left and right keys how the object will be animated using the timer. We have done a keyboard event tutorial before but in that one we used the key down event to control the movement of the rectangle across the screen. Let’s see how to do that.

Lesson Objectives –

  1. Create an interactive app in Visual Studio with C# and WPF
  2. Move Rectangle using Keyboard events and Timer Events
  3. Using C# Integers and Booleans
  4. Using Multiple If statements in different functions
  5. Testing the app to ensure its working

 

Video Tutorial

To start the project click on File and New project in visual studio then choose WPF App under C#. Name this app Keyboard Timer Controls and Click OK.

It might take a few seconds but your project should open up. Whent he project opens you will see the blank screen.

Above is the blank project. This project doesn’t do anything yet, we will need to add our own components and codes to make it work. Lets take a look at the XML file.

<Window x:Class="Keyboard_Timer_Controls.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Keyboard_Timer_Controls"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
    </Grid>
</Window>

This is the default XML file in the project lets make some changes to this file.

Below is the updated one see the changes inserted in the file and make the similar changes to your XML file.

<Window x:Class="Keyboard_Timer_Controls.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Keyboard_Timer_Controls"
        mc:Ignorable="d"
        Title="Keyboard and Timer Controls" Height="350" Width="525" FocusManager.FocusedElement="{Binding ElementName=MyCanvas}">
    
    <Canvas Name="MyCanvas" KeyDown="Canvas_KeyDown" KeyUp="Canvas_KeyUp" Focusable="True" >
        <Rectangle Name="rec1" Width="50" Height="50" Margin="0" Canvas.Left="10" Canvas.Top="10">

            <Rectangle.Fill>
                <SolidColorBrush Color="BlueViolet" />
            </Rectangle.Fill>

        </Rectangle>

    </Canvas>
</Window>

The first change we have made to the file is this line below –

Title=”Keyboard and Timer Controls” Height=”350″ Width=”525″ FocusManager.FocusedElement=”{Binding ElementName=MyCanvas}”>

In this line we have added a title to the program which states it’s a Keyboard and Timer Controls app. Then the usual height and width are present. In the final bit we have something called the Focus Manager and Focused Element, this tag means that we can specify which part of the app should have a focus on when the program loads up. Inside that tag we have stated that Binding Element Name my Canvas means that we are going to create a Canvas called MyCanvas and focus on the application will be on that element.

For most of the project we will be creating in WPF and C# we will use the same template as this because all the games and fun apps will be using CANVAS views as their default view port.

After that we have the line below –

<Canvas Name=”MyCanvas” KeyDown=”Canvas_KeyDown” KeyUp=”Canvas_KeyUp” Focusable=”True” >

This is the Canvas open tag, we are naming this canvas MyCanvas adding a key down event and a key up event to it, lastly it will have a focusable to true so it always keeps it in high priority.

Inside the Canvas we have the rectangle lets take a closer look

<Rectangle Name=”rec1″ Width=”50″ Height=”50″ Margin=”0″ Canvas.Left=”10″ Canvas.Top=”10″>

<Rectangle.Fill>

<SolidColorBrush Color=”BlueViolet” />

</Rectangle.Fill>

</Rectangle>

Rectangle has a name rec1, width and height set to 50 with 0 margin around the rectangle. The position of the rectangle will 10 pixels from the top and 10 pixels from the left. Inside the rectangle tangle tag we have rectangle fill option and we are giving this rectangle a color of Blue Violet.

This is out apps interface now. We can now get started on adding the events to the code and C# rest of the way through.

This is what the app looks like now –

The titles been changed and the rectangle is added to the screen. Now its timer to add some code to the program. We will be starting off with adding the events to the C# script first.




One response to “WPF C# Tutorial – Move an object with Keyboard and Timer in Visual Studio”

  1. Eric Alan Fowler says:

    In my code, the rectangle never moooves.