Dear visitor, thanks for stopping by! If you want, you can follow all updates on via RSS. You can also follow me on Twitter or Facebook. More interesting posts from other Microsoft Regional Directors can be found at The Region.
Gill Cleeren     .net | C# | Programming | Visual | WinFX | WPF | XAML     August 18, 2006    

I'm through with learning WPF (Windows Presentation Foundation), so now I'll have more time to write some samples for my blog, so everybode can start learning a little on WPF (that double-U-P-F ;-) ).

Today, I'm going to show you a small sample, in which I use a gradient and a storyboard to create a sort of a flashing circle. This could be used to draw the user's attention to something in the UI.

Here is the sample code:

<Page xmlns=""
WindowTitle=" - WPF Examples" Background="White">
   <Ellipse Width="200" Height="200" Name="MyEllipse">
         <RadialGradientBrush >
            <GradientStop Offset="0" Color="#CCCCCCCC" />
            <GradientStop Offset="0.5" Color="white" />
            <GradientStop Offset="1" Color="black"/>
         </RadialGradientBrush >
   <EventTrigger RoutedEvent="Page.Loaded">
      <BeginStoryboard Name="MyBeginStoryBoard">
         <Storyboard Name="MyStoryBoard">
            <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Ellipse.Height)" 
               From="0" To="200" AutoReverse="true"
               RepeatBehavior="0:0:10" BeginTime="0:0:0" />
            <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Ellipse.Width)" 
               From="0" To="200" AutoReverse="true"
               RepeatBehavior="0:0:10" BeginTime="0:0:0" />

First, I create an circle, which is actually an ellipse with identical width and height (one could also use the RadiusX and RadiusY properties, the result would be the same).

<Ellipse Width="200" Height="200" Name="MyEllipse">

Then, we use a Brush, in this case, the RadialGradientBrush, to create a gradient fill in the ellipse. No longer are the "GradientStops" or the "GradientStopsCollection" tags neccessary (they were in previous CTP's, but now they can be omitted).
To specify the colors, we use several GradientStop elements. The offset specifies where the color should "start". This is a relative value, and thus can't be more than 1. In this case, I specify 3 colors.

<GradientStop Offset="0" Color="#CCCCCCCC" />
<GradientStop Offset="0.5" Color="white" />
<GradientStop Offset="1" Color="black"/>

Now, to create the flashing effect, we have to use an animation. To start the animation, we use a trigger, in this case, an event trigger, which is routed to the Loaded event. This results in the trigger firing when the page loads.

<EventTrigger RoutedEvent="Page.Loaded">

For the animation itself, we use the storyboard. In this storyboard, which is like the name says, a series of steps that will be executed. You can compare it to a band of drawings that form a comic.
The storyboard thus consists of several animations. In this case, I use a DoubleAnimation, because the property I'm going to change, is of value Double: I'm going to alter the Height and Width property of the Ellipse. These are indeed Double values.

In the first animation, I specify that I want to animate the ellipse I created earlier, by setting the TargetName, and the property I want to change is the Height. In the From and the To properties, I specify what the values for the Height should be. In this case, I want the ellipse to pop up out of nothing, so I set the From to 0 and the To to 200.

The RepeatBehavior property specifies how long this animation should repeat, in this case, I set it to 10 seconds. Note that several animations can have different RepeatBehaviors: one can go one longer than the other. The BeginTime simply specifies when the animation should start: you can build in a delay.
Finally, the AutoReverse property indicates that WPF should reverse the animation after completed.

The second animation does essentially the same, but for the width.
Both these animations can't be grouped into one, which is a pity.

The result looks like this:

kick it on
  Posted on: Friday, August 18, 2006 6:37:02 PM (Romance Daylight Time, UTC+02:00)   |   Comments [0] Tracked by:
"WPF Examples: animation and gradients" ( [Trackback]

7/1/2015   11:07:46 PM
 Welcome to
Hello and welcome to!

My name is Gill Cleeren, I'm a Microsoft Regional Director and an MVP ASP.NET.
On, you'll find all kind news and articles on .net, ASP.NET, WPF, Silverlight and Microsoft in general.
More on me can be found on my about page.

Should you have any questions, don't hesitate to contact me by Send mail to the author(s) .

 Partner sites
 Most popular tags
.net (124) .net 3.0 (6) .net 3.5 (18) .NET 4 (18) .NET Show (1) (4) (53) AJAX (4) ASP.NET MVC (3) Atlas (12) Azure (2) Blend (2) Book (6) Book review (4) C# (43) Case studies (1) Chopsticks (3) Community (10) Community Day (16) Consoles (1) Database (1) DevDays09 (4) DotNetNuke (4) Efficiency (57) Enterprise Library (5) Events (62) Expression (7) Games (3) Hardware (9) Internet (18) IT (1) jQuery (1) LightSwitch (3) Links (11) LINQ (4) Mac (2) Metro (1) Microsoft (75) Mix 07 (6) Mix 08 (4) Mix 09 (1) Mix 11 (1) Movies (4) MVP (5) MVP Summit 2008 (3) mvvm (1) NDCOslo (1) Office 2007 (10) Other (8) PDC (22) PDC2008 (10) Personal (36) ppt (9) Programming (52) Programming tools (22) Regional Director (2) Silverlight (143) Silverlight Advent Calendar (24) sl4 (44) SL5 Data and Services Cookbook (2) Slide decks (13) Snowball (13) Software (20) Microsoft (25) Speaking (15) SQL Server (10) TechDays (13) TechEd (14) telerik (6) Telerik (6) TFS (1) Twitter (1) Vista (73) Vista Tricks (9) Visual (38) Visug (33) VS2010 (8) Wallpaper (2) WCF (2) Webcasts (9) Webinars (5) Windows (41) Windows 7 (5) Windows 8 (3) Windows Azure (2) Windows Mobile (3) Windows Phone 7 (2) WinFX (17) WinRT (2) WP7 (2) WPF (40) XAML (24)

 On this page
 This site
 Blogroll OPML

All content is property of Nothing on this site can be copied or published elsewhere, unless otherwise stated.

This site is made by Gill Cleeren.

Questions? Opinions? Send mail to the author(s) E-mail