Universal Windows Platform – Tutorial Insider – Codes Game


comentsys.wordpress.com today features a Universal Windows Platform tutorial showing how to create Codes Game where you need to guess the correct combination of four numbers between 1 and 4 – when you check your guess any incorrect ones will show with a black background and white text.


In the Codes Game there’s a CommandHandler Class that will help handle any commanding events and actions from the Library Class. There’s also a Code class which represents a Number that will be displayed and defines the Index, Value plus Foreground and Background colours, then there’s the Action and the commanding Commmand plus this Class implements the INotifiedPropertyChanged event to help update UI for any changes in value.

Within the main Class there’s an ObservableCollection used – this when any changes happen to it will also help update the UI for any changes as also uses INotifiedPropertyChanged, then there’s the Random number generator and list of numbers. There’s a Show method to display any messages on screen, the GetCode method helps create an instance of Code with the given values – it also sets up the Action Method which will determine what happens when during commanding. There’s a Check method to see if a guess has been correct and sets the Foreground and Background accordingly and there’s a Shuffle method to use the Random number generator. The New method starts the game and sets up the sequence of numbers to be guessed and the Accept method is used to confirm the selection and sees how many are correct, get them all and a message is displayed.

The layout of Code Game requires more XAML code to make the layout work, this is comprised of an ItemsControl which is used to display basic lists and within this there’s a DataTemplate which defines what each item in the list looks like and this is a Button which uses Data Binding to set various properties such as Background, Foreground, Value and Command – this last item is the commanding operation of the Button which is performed using the CommandHandler and performs the Action specified which is to cycle through the numbers 1 to 4 and guessing a number correctly or incorrectly determines what the Background and Foreground will be which is set against the Code class and when these values change the INotifiedPropertyChanged event is triggered and the UI knows to display the latest values.

Behind the Scenes

This example is the first time a CommandHandler has been used to perform an action on a Button but given the game mechanic of needing to click on the numbers to cycle through the values and then display whether a selection was right or wrong using it meant everything could work through Data Binding which again is a technique that’s not been used much in previous examples. The inspiration behind the game came from number guessing games and the goal was to create a simple to play game that helped show off what can be done with Data Binding and to use commanding rather than event handlers which are used throughout these examples.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s