In this tutorial we will make a simple object moving application where you can press up, down, left and right keys to move the object in those directions. We will be using the CANVAS panel in the XML codes instead of the GRID we used before. In the CANVAS we are able to display animated objects, create smoother animations, track movements and add various interactivity. This will be a fun tutorial that will build towards making a game in WPF C# with Visual Studio. Let’s get started.

Lesson objectives –

1. Create a object moving app in visual studio with WPF C#
2. Create an app using Canvas panel instead of the Grid panel
3. Add key down event to the canvas
4. Animate a rectangle with C# codes
5. Using multiple if statements to capture key down events and move the objects appropriately
6. Using Multiple if statement conditions to keep the object inside the screen

To begin the tutorial, create a new project, choose WPF App and name the project WPF keyboard event and click OK button.

This is the new project we just created. Let’s take a close look at the XML window below.

Below is the default code inserted by Visual Studio we will make some changes to it now.

<Window x:Class="WPF_Keyboard_Events.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:WPF_Keyboard_Events"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</Window>

This is the newly edited XML now let’s take a closer look.

<Window x:Class="WPF_Keyboard_Events.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:WPF_Keyboard_Events"
        mc:Ignorable="d"
        Title="WPF Keyboard Events" Height="450" Width="800" FocusManager.FocusedElement="{Binding ElementName=MyCanvas}">

    <Canvas Name="MyCanvas" KeyDown="Canvas_KeyDown" Focusable="True" >
        
    </Canvas>
</Window>

Title=”WPF Keyboard Events” Height=”450″ Width=”800″ FocusManager.FocusedElement=”{Binding ElementName=MyCanvas}”>

First line we changed the title to Title=”WPF Keyboard Events”. After that we are adding the following – FocusManager.FocusedElement=”{Binding ElementName=MyCanvas}”, this line means that we will be using an element called MyCanvas and when the program starts it should keep that element in focus.

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

</Canvas>

Above is the canvas we will make our app in. We are not using the GRID any more but we will be using this panel because it allows to use lots of graphical and interactive functionalities. First we are making the Canvas tag and giving it a name MyCanvas, if you notice we are focusing on this element from the title tag. We are also putting in the key down event and giving the name Canvas_KeyDown and lastly we are setting the focusable to true.

Now let’s add the rectangle to the Canvas

<Window x:Class="WPF_Keyboard_Events.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:WPF_Keyboard_Events"
        mc:Ignorable="d"
        Title="WPF Keyboard Events" Height="450" Width="800" FocusManager.FocusedElement="{Binding ElementName=MyCanvas}">
    <Canvas Name="MyCanvas" KeyDown="Canvas_KeyDown" 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 rectangle we added to the canvas has a name rec1, width and height 50, margin 0 and then we add the position of the rec1 object. It will be placed 10 pixels to the left and 10 pixels from the top.

Inside the rectangle tag we can add another tag that changes the colour of the rectangle and we are filling this rectangle with blue violet.

This is the final view of the program so far. As you can see the rectangle has been placed on the canvas.  Lets get started to put some C# code in the program.