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

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 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
        storyboard.Begin()
    End Sub

Step 7: Run  the application.

Output:
 

  pulseanimation.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.