Exercise: Add lots of styles to a window to make it look pretty

This exercise is provided to allow potential course delegates to choose the correct Wise Owl Microsoft training course, and may not be reproduced in whole or in part in any format without the prior written consent of Wise Owl.

The answer to the exercise will be included and explained if you attend the Wise Owl course listed below!

Category ==> WPF - Visual C#  (20 exercises)
Topic ==> Styles  (2 exercises)
Level ==> Average difficulty
Course ==> WPF using Visual C#
Before you can do this exercise, you'll need to download and unzip this file (if you have any problems doing this, click here for help).

You need a minimum screen resolution of about 700 pixels width to see our exercises. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

This exercise will take a dull form and make it a bit more elegant:

Bill Gates unstyled Bill Gates styled
Before styles After styles

The differences are:

  1. The labels giving the score categories are in bold and right-aligned;
  2. The labels giving the scores have top margins; and
  3. The buttons at the bottom have margins, background colours and other properties (and the Exit button is formatted differently).

Turn the page for how to proceed!

Start by adding the files in the folder above into your project, and setting Bill.xaml to be your startup window in app.xaml. This should give you this:

Vanilla Top Trumps card

The basic card is OK, but we need to do something about the labels and buttons.

 

Now create a style called ScoreLabels at the appropriate level (within the window's resources?) to make score labels appear better:

Outline of creating style

A hint on how to start creating named styles.

 

As a suggestion, the styles should set:

  • the font weight to bold;
  • the horizontal alignment to centre;
  • the vertical alignment to centre; and
  • the margin to 20 pixels on the left, 5 on the right and 0 top/bottom.

Now set the style attribute of the 4 score labels to the static resource called ScoreLabels to get:

The labels with styles applied

Already things are looking better!

 

Add another named style called ScoreItself (and apply it to the 4 score labels) so that they look a bit better:

Formatted scores

Set the horizontal and vertical alignment to centre-aligned, and a 10-pixel right margin.

 

Time for a breather!  If you still have the time and energy, the next exercise will apply styles to the buttons.

This page has 0 threads Add post