The attached source code shows how to provide faded animation affect in XAML. The original drawing looks like Figure 1 and Figure 2 shows a animated form of the same drawing.
Figure 1. Original drawing
Figure 2. Drawing during animation
The key part of animation is StoryBoard tag in XAML. It takes a TargetName as the name of the XAML control, a Polygon for example, and TargetProperty, which is Opacity in our below example. The Duration property defines the duration of the animation and RepeatVehavior tells us how long the animation will run.
As you can see from below code, I start the animation on Ploygon.Loaded event.
<Polygon.Triggers>
<EventTrigger RoutedEvent="Polygon.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="YellowPolygon"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Polygon.Triggers>
</Polygon>
You may apply the same animation on any control available in XAML.
The final code is listed in Listing 1.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="AnimationXAML.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Margin="10" >
<Polygon Name="YellowPolygon" Points="100,0 75,75 100,100 125,75"
Stroke="Black" StrokeThickness="2" Fill="Yellow">
<Polygon.Triggers>
<EventTrigger RoutedEvent="Polygon.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="YellowPolygon"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Polygon.Triggers>
</Polygon>
<Polygon Name="BlackPolygon" Points="100,100 125,125 100,200 75,125"
Stroke="Yellow" StrokeThickness="2" Fill="Black">
<Polygon.Triggers>
<EventTrigger RoutedEvent="Polygon.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="BlackPolygon"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:10"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Polygon.Triggers>
</Polygon>
<Polygon Name="BluePolygon" Points="100,100 125,75 200,100 125,125"
Stroke="Red" StrokeThickness="2" Fill="Blue">
<Polygon.Triggers>
<EventTrigger RoutedEvent="Polygon.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="BluePolygon"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:15"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Polygon.Triggers>
</Polygon>
<Polygon Name="RedPolygon" Points="100,100 75,125 0,100 75,75"
Stroke="Blue" StrokeThickness="2" Fill="Red">
<Polygon.Triggers>
<EventTrigger RoutedEvent="Polygon.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="RedPolygon"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:20"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Polygon.Triggers>
</Polygon>
</Grid>
</Window>
Listing 1. Animation Sample
Download the attached code for more details.