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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
WindowTitle="www.snowball.be - WPF Examples" Background="White">
<DockPanel>
<Ellipse Width="200" Height="200" Name="MyEllipse">
<Ellipse.Fill>
<RadialGradientBrush >
<GradientStop Offset="0" Color="#CCCCCCCC" />
<GradientStop Offset="0.5" Color="white" />
<GradientStop Offset="1" Color="black"/>
</RadialGradientBrush >
</Ellipse.Fill>
</Ellipse>
<DockPanel.Triggers>
<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" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DockPanel.Triggers>
</DockPanel>
</Page>
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:
