Exercise: Use resources to apply a gradient brush and transform

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 ==> Resources  (3 exercises)
Level ==> Relatively easy
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.

Add the window called Boxes in the folder shown above into your project, and set this to be the default window in app.xaml.

Windows showing coloured boxes

The window uses a WrapPanel to show 4 rectangles, with linear gradient brushes and transformations selectively applied.

 

If you look at the XAML for this window, you'll see there's a lot of repetition.  First create a default style to target rectangles, which sets:

  • the height to 50;
  • the width to 50;
  • the stroke thickness to 1;
  • the stroke to black;
  • the margin to 10; and
  • the fill to LightGoldenrodYellow.

Now create two resources:

  • a TransformGroup with key MoveIt; and
  • a LinearGradientBrush with key ColourIt.

You should now be able to shorten the main bit of your window to read:

XAML using resources

How your XAML should read after creating a style and resources.

Test that the boxes look the same as they did before. 

Congratulations - you now know how WPF works!

This page has 0 threads Add post