Step 1: Open New Silverlight Project.
Step 2: Go to your XAML Code and change the
value of following attributes of "User Control" tag, as shown below -
<UserControl
x:Class="PulseAnimationNew.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="30">
Step 2: Set the attributes of grid as shown
below -
<Grid
x:Name="LayoutRoot"
Background="White"
Width="30"
Height="30">
Step 3: We are using two ellipses in this
tutorial to create a pulse animation, create two ellipses.
<Ellipse
x:Name="ellipse1"
Fill="#FFF4F4F5"
Margin="0"
Stroke="Black"
Width="30"
Height="30"
HorizontalAlignment="Center"
VerticalAlignment="Center"
/>
<Ellipse
x:Name="ellipse2"
Fill="#FFF4F4F5"
Margin="0"
Width="10"
Height="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
/>
You can see in the design view that you have created two ellipses as shown in
below figure
Step 4: We need to use <UserControl.Resources> tag to define a Storyboard which
is necessary to create the animation.
<UserControl.Resources>
<Storyboard
x:Name="PulseStoryBoard"
AutoReverse="True"
RepeatBehavior="Forever">
<ColorAnimation
Duration="0:0:0.5"
To="#FFB40074"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
Storyboard.TargetName="ellipse2"
d:IsOptimized="True"/>
</Storyboard>
</UserControl.Resources>
Step 5: Add "Loaded"
attribute to ellipse1 as shown below.
<Grid
x:Name="LayoutRoot"
Background="White"
Width="30"
Height="30">
<Ellipse
x:Name="ellipse1"
Fill="#FFF4F4F5"
Margin="0"
Stroke="Black"
Width="30"
Height="30"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Loaded="ellipse1_Loaded"/>
<Ellipse
x:Name="ellipse2"
Fill="#FFF4F4F5"
Margin="0"
Width="10"
Height="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
/>
</Grid>
Step 6: Triggering the
Storyboard (PulseStoryBoard) - Writing few lines of code for the Load event of
ellipse1.
Private Sub ellipse1_Loaded(sender
As System.Object,
e As System.Windows.RoutedEventArgs)
Handles ellipse1.Loaded
'Get the StoryBoard created using XAML.
'Casting from object to Storyboard
because objects in the resources are stored as type object.
Dim storyboard =
TryCast(Me.Resources("PulseStoryBoard"),
Storyboard)
'Start the storyboard
storyboard.Begin()
End Sub
Step 7: Run the application.
Output:
