WPF C# Tutorial – Create a simple quiz game in Visual Studio

Hello and welcome to a new programming tutorial from MOO ICT. In this tutorial we will show you how to make a simple quiz game inside of Visual Studio using C# and WPF Programming. This quiz game will be a multiple-choice quiz game template for you to use in your own projects. We will not provide any images or the questions for the quiz game however we will show you how to import your own images and make your own questions using this simple template. This quiz game is a new and improved version of the windows form C# quiz game we have done before and this one will you how to randomize the questions when the game starts and when the game ends. It’s a very unique way to make this type of game in WPF as we will be using the Canvas Element to set up the GUI for this game and then go into the more detailed C# programming.

Lesson Objectives –

  • Create a multiple-choice quiz game inside of visual studio with C# and WPF
  • Randomize the questions when the game starts so no two games are the same when they load
  • Add 10 questions using the SWITCH Statement
  • Use a LIST to add a list of questions to the game and shuffle the items inside of the LIST
  • Add images to each question
  • Identify the right answer from the wrong ones in the multiple choice
  • Keep track of the score throughout the game
  • Restart the game


Video Tutorial –


XAML Code for this game –

In the XAML you can see we are using the CANVAS element instead of the GRID, a game such as this one you can use the GRID element as well we are not moving anything from the game or doing any sort of animation, in this case this is more of a personal preference to use the Canvas rather than the GRID, you can try to use it yourself and see it goes.

We have two labels on the top of the screen. For the first one it will be used for keeping score of how many questions we answered right and second label will show the order of questions to come. The question order label will be linked to the LIST which will be randomized each time the game loads and the game restarts. Inside of each tag we stated the options for them such as name, font size, canvas left and top options these will affect the component directly inside of the canvas and you can see them change inside the preview window.

After the two labels we have the image component, this component will load the images relative to each question. For this example I have 10 different JPG images loaded to the game and it will load one by one with each question.

The text block element will hold the question. It has a text wrap option enabled to it and it has its own height and width assigned too. We done it this way so we can write a long question on there and it will wrap the text inside of it and show it right under the image.

After the text block we have 4 different buttons displaying different answers for each question. As the questions change inside of the game so will the answers inside of it, for each button you have a back ground color, font size, CLICK EVENT, name and few other options.

C# Code for the Quiz Game



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