WPF C# Tutorial – Create a fun Balloon popping game in visual studio

In this tutorial we are going to make a fun and simple balloon popping game in visual studio with WPF C#. This game the similar to the other balloon pop windows form game was created earlier for the older version but we have improved this tutorial and made it for the new WPF forms using C# programming language. Rules of this game is simple spawn balloons off screen, animate them towards top of the screen and then players can click and pop them with a sound effect playing in the background. It does get challenging after you have popped 20 balloons and it will speed up the balloons so you need to act fast. Sounds fun, lets get started.

Lesson objectives –

  • Create a simple balloon popping game in WPF forms using C# in Visual Studio
  • Use keyboard and mouse click events in the same form
  • Use timer and timer event to animate objects
  • Randomly spawn objects to the screen and remove them when click on
  • Use custom images and backgrounds for the WPF app
  • Import MP3 files and play it inside the game when balloon gets popped
  • Create a custom game reset function to play again when it ends

Video Tutorial-

Download Balloon Pop Game Assets Here

Load up Visual Studio and Create a new project called Balloon Pop Game.

mooict wpf tutorial - open a new project for the balloon popping game in visual studio

Click ok to start the project. Make sure you have saved it somewhere you can find the project folder later on.

This is the default view of the project. Make some changes to the XAML code where highlighted in the screenshot.

<Window x:Class="Balloon_Pop_Game.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:Balloon_Pop_Game"
        mc:Ignorable="d"
       Title="Moo ICT Balloon Pop Game" Height="600" Width="450" KeyDown="canvasKeyIsDown" ResizeMode="CanMinimize">
    <Canvas Name="MyCanvas" Focusable="True" MouseLeftButtonDown="popBalloons" Background="White">

        <Label Name="scoreLabel" FontSize="24" Content="Score: 0" Foreground="black" FontWeight="ExtraBold" Canvas.Top="527" />

    </Canvas>
</Window>

In the title part add Moo ICT Balloon Pop Game or any name that you want to make sure its between the double quotation marks. Set the height to 600 and width to 450. Add a keydown event called Canvas Key Is Down and Resize mode should be set to can minimize. We don’t want to resize the window at all so we only want windows to be able to minimize it.

After the title we deleted the GRID tag and added toe Canvas Tag to it. Inside the canvas opening tag we have several properties.

First the canvas tag has a name MyCanvas, its set focusable to true, it has a mouse down event called pop balloons this event will trigger when we click on the balloons on the screen. After that we have set white background colour to the canvas.

Inside the canvas we have only 1 element which is the label. This label will show the score for this game. This label has a name scoreLabel, font size set to 24, content meaning the text inside of it is “Score: 0” font colour is black and font weight is extra bold and the position is the label is 527.

Lets add the events for this game

mooict wpf tutorial - right click and then go to definitions options in visual studio

Right click on the canvas key is down keyword and click on the go to definition option. This will take you to the code view and add the canvas key is down event to the code.

mooict wpf tutorial - canvas key is down event is now added to the visual studio code view

See its been added by visual studio. Now we need to the same for the mouse click event.

mooict wpf tutorial - right click and click on go to definitions for the mouse left button down event

Right clock on the pop balloons keyword and click on the go to definition option in the menu

mooict wpf tutorial - both of the key is down and mouse left button down event are added to the screen

The second event is now added too. Awesome let’s get to work. We need to several of our own event and functions.

mooict wpf tutorial - add the custom start game, restart game and game engine function to the code

See how we added 2 function and 1 event to the above. The start game and reset game are functions and the game engine is the event.

Let’s import the assets for this game

mooict wpf tutorial - how to add images and sound files to WPF projects

Right click on the balloon pop game in the solutions explorer, hover on add and click on new folder. Name this folder files and press enter to confirm.

mooict wpf tutorial - how to import images and sound files to the WPF projects

Right click on files, hover on add and click on existing items.

mooict wpf tutorial - find the files downloaded and highlight them all and click on add

Find the folder where you extracted the assets downloaded from MOOICT. Change the file type to all files, highlight all of the assets from inside the folder and click on Add.

mooict wpf tutorial - all the files are now added to the project

All the game assets are now included with this project.

Go to Page 2 to start programming for this game




2 responses to “WPF C# Tutorial – Create a fun Balloon popping game in visual studio”

  1. coco says:

    When I start the game it works fine but after a few pops the game stops and in the .cs says that there is an exception unhandled “the enumerator is not valid because the collection changed.” in:
    foreach(var x in MyCanvas.Children.OfType())

  2. mari says:

    @coco: I had the same problem. My brackets were closing in the wrong place.