WPF Pong

 

Couldn't keep still over the xmas break, my kids were playing some of those classic games we used to play as kids although now inside a tiny console you plug in to your tv. This got me thinking about writing a classic game using WPF, not being much of a games writer I kept things simple and decided to implement the classic game Pong...My main aim is to continue to ramp up on WPF, one area I wanted to explore further was the use of Content Templates and styles, what I wanted to be able to do was not only clearly separate UI layout from UI behaviour but also allow different Skins to be applied to the game one being the classic black and white look another being a more 21^st Centaury look and feel.

To implement Skining in WPF you make use of Styles contained in resource dictionaries, when a control makes reference to a named style the control tree is walked for each control its resource dictionary is searched for a style by that name if none is found the search continues up the tree. Styles allow you to set properties of the control, very similar to ASP.NET skins. So in the case of the bats you can set a style that sets the colour, width and length of the bats. You can then apply this style to both player one's and player two's bat keeping both bats looking the same. In order to allow the interchanging of Skins I placed all the resource definitions into their own resource dictionaries. Each Skin is then an instantiation of a resource dictionary, when the window is launched I simple associate my window resource dictionary with the currently selected skin. When any of the controls wish reference styles located in resources they walk up the control tree looking for the resource and should find it in the resource dictionary associated with the window. If the user wishes to change the current skin I simply change the resource dictionary associated with the window and the look feel changes to reflect the new skin.

this.Resources = newSkin;// this is the current window

 

Below is an extract from GameWindow.xaml, the style of the stack panel is defined through a resource named StatusPanel, notice that DynamicResource is used as opposed to StaticResource. If you want to have any changes in resources immediately reflected then you need to bind using a DynamicResource, these are slightly more expensive since the infrastructure needs to keep track of any changes.

<StackPanel
Grid.Column="0"
Grid.Row="3"
Style="{DynamicResource StatusPanel}" >

 

One really cool feature of WPF is the ability to change the inner content of a control via the template property. I used this to great effect when defining for displaying the scores using block character style numbers. I used a data trigger to select the appropriate inner content template based on the value of the score.

When I have some more free time I want to add WPF animation effects so that the bat shudders when the ball hits it...Oh and my QA engineer ( AKA my son ) wants to enhance the game so you can move the bats forwards and backwards too...( "Just like real tennis." )

Oh I also perhaps need to have some instructions in regard to keys etc...but for now

A and Z player one

K and M player two

And Space to serve..

First to 9 wins...

When I first started hearing about WPF and how designers would now rule over UI I I started to get the same feelings I had when I first saw VB 6, but what seems to be coming clear whilst the designers can really do cool stuff they really need to have good exposure to the underlying model, so there certainly is still a significant role for us UI developers in exposing the appropriate information all be it perhaps slightly removed from the coal face...

 

You can download the full source from WPFPong , or for any Click Once Jen fans you can install it via ClickOnce