Silverlight Pulse Animation in VB.NET

It is an easy tutorial, by which you can learn how to create a Pulse Animation in Silverlight.
  • 2343

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"
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.

<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"/>

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" />

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 AsSystem.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
    End Sub

Step 7: Run  the application.




More Articles

© 2020 DotNetHeaven. All rights reserved.