WPF - Visual C# | Triggers and animations exercise | Use a storyboard and event trigger to animate a circle

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 ==> Triggers and animations  (3 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.

Open the window in the folder above, and change app.xaml so that it is the default window.  When you run your application, you should see a not terribly interesting circle:

Coloured circle

The circle has a radial gradient brush composed of two colours - we'll animate both of these.


Start to create an event trigger for the ellipse:

  1. Start by creating a Triggers section for the ellipse in XAML.  Within this create an event trigger, where the routed event is that of a mouse entering the ellipse (MouseEnter).
  2. Set this event trigger to begin a storyboard (you don't have to give it a name if you're not storing it in a separate resource).
  3. Now create your storyboard (setting it to repeat 3 times - 3x - and automatically reverse when finished).

Within your storyboard now create two colour animations - one for each gradient stop - remembering to spell "colour" the American way:

Color animation XAML

Animate each gradient stop, taking 1 second to change its colour.


See if your animation works, then take a moment to reflect on just how long it's going to take you to remember syntax like this ...

This page has 0 threads Add post