Much of the work of building an application such as MetroBones is in creating and arranging its controls. To save space, I won’t discuss where every control is positioned for MetroBones. You can look at Figure 21-1 to see the general arrangement and you can download the example program to see the details.

While I don’t want to cover the code in complete detail, there are a few points worth mentioning.

Control Layout

The program’s left side holds a stack of Image controls holding skeleton images in various states. The program hides and displays these controls to show the game’s current state.

The program’s right side contains a vertical StackPanel that holds a series of other controls. Those controls include:

  • A horizontal StackPanel holding the current word’s letters
  • A TextBlock that can indicate when the user wins or loses
  • Three horizontal StackPanels holding the letter buttons
  • The New Game button

The current word’s letters are displayed as Border controls that hold TextBlocks. They are created at run time when the program picks a word.

Those controls and the program’s buttons use styles defined in the program’s resources to give them their sizes and appearance. The following section describes the program’s styles.


The most interesting part of XAML code is the definition of the resources that determine the appearance of the program’s buttons. The following code shows the application’s resources. Those resources are available to the later XAML code ...

Get Visual Basic 2012 Programmer's Reference now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.