WPF - Visual C# | Styles exercise | Create button styles, and inherit a base style

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).

Software ==> WPF - Visual C#  (20 exercises)
Version ==> Any version of WPF
Topic ==> Styles  (2 exercises)
Level ==> Average difficulty
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.

Add the window in the above folder into your project (or use one you created at the end of the previous exercise).  When you run this as an application, you should get:

The initial window appearance

Initially the buttons at the bottom look scrunched up together and a bit dull.


The aim of this exercise is to improve the appearance of the buttons:

The formatted buttons

We'll create a default style for all buttons, then a named style which inherits this for the Exit button.


Start by creating a named style called btnStyle (and apply it to the first two buttons) to set each button's:

  • background colour to something tasteful (the example uses Bisque);
  • font weight to bold;
  • right margin to 20 pixels;
  • top and bottom padding to 5 pixels, and left/right padding to 20 pixels; and
  • font size to 12 points.

The best place to do this would normally be app.xaml, as this would then apply to all windows, but for this exercise just create a resources section in the StackPanel containing the buttons.

Now create another named styled called btnExit which is based on btnStyle, but also sets a button's:

  • background colour to LightCoral; and
  • border brush to Maroon.

Apply the btnExit style to the 3rd button to format it:

Formatted buttons

The Exit button has the formatting of the first two, but with a different border and background colour.


Close down any windows you have open!

This page has 0 threads Add post