WISE OWL EXERCISES
WPF - VISUAL C# EXERCISES
WPF - Visual C# | Styles 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 relevant Wise Owl course (sadly, only in the UK for now).
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:
|Before styles||After styles|
The differences are:
- The labels giving the score categories are in bold and right-aligned;
- The labels giving the scores have top margins; and
- 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:
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:
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:
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:
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.