× Main Menu

WPF C# Tutorial – Create a Flappy Bird Game in Visual Studio

Add the following code to the XAML

Now with the images installed we can make some changes to the XAML code below the preview window.

This XAML code will be able to put all of the design elements for this game and we will make them interactive. The code below is the full chunk and will be explained further.


This is the full XAML code for this flappy bird game.

Full Break Down –

Title=”Flappy Bird Game in WPF by Moo ICT” Height=”490″ Width=”525″ FocusManager.FocusedElement=”{Binding ElementName=myCanvas}” KeyDown=”Canvas_KeyisDown” KeyUp=”Canvas_KeyisUp”>

The code above is the title part of the flappy bird, inside the title we are stating that we want this window to have the title of “Flappy Bird Game in WPF by Moo ICT”. Height is 490 pixels and width is 525 pixels. Focus manager allows us to state which element in this application we want the most focus on. In this case we have a Canvas called myCanvas and we want to entire app to just focus on that element. After that tag we have key down and key up events tagged inside of it.


In the tag above we are starting the Canvas called my canvas and it will have a light blue background and set focusable to true.


These two tags above are for the clouds image we will use, each of the tags will start with the image and then we declare the height and width of these images. Inside the source option we need to tell the app where this image is located. In our case we imported them into the images folder we made earlier so we can access the images easily such as images/clouds.png or images/clouds2.png


We have 3 separate sets of pipes for this game. In each set they have two pipes and they are laid out differently in this game. We have 3 groups of 2 pipes in this game and if you follow the correctly you should have the similar lay out to ours here. Notice that we have given these images tags to help us separate and animate them when the game runs. The group has a tag obs1 meaning obstacle 1 and second obs2 and third obs3. We will be using these tag names inside the C# when we are programming the logic for this game.


These are last two tags for this canvas. First one is the score text label. Is a text label that’s for a big font and a name score text. We can change its value from the C# script we will make for this game. Second tag is the flappy bird picture. Add the stretch to fill the image corner to corner so it doesn’t look out of place and we also give it a name flappyBird so it can be identified later on.

With that done see below –

We are showing the indicator lines so each pipe is group together using the obs tag. This way we can keep track of where they are going and then use them to end the game or even to up the score.

mooict flappy bird c# wpf tutorial - game assets included with the visual studio project

If everything was put is properly you should see the window above, if this is not the case then check the XAML code and make sure you have spelled everything correctly.

To start adding events go to Page 3 from below.

2 responses to “WPF C# Tutorial – Create a Flappy Bird Game in Visual Studio”

  1. Дарья Марахова says:

    Thank you very much from Russia! You are amazing web-teacher!) I loved it!

  2. jwnolan says:

    I had some trouble because I named my project something else, but once I fixed that it worked great! Great tutorial!

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

%d bloggers like this: