DoubleAnimation Basics with Silverlight Application
 
Published: 19 May 2009
Unedited - Community Contributed
Abstract
This article describes the basics of developing an animation application using the Silverlight Application project found in Visual Studio 2008 SP1.
by Jayaram Krishnaswamy
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 33202/ 68

Introduction

Silverlight within a short time has made great progress and continues its battle with Adobe applications such as Flash and Adobe Air. Clearly the battle lines are drawn. Adobe is no soft stuff either. But Silverlight has great capability. Events like the Presidential Election and the Olympics have left a lasting impression. Also anybody who has interacted with Netflix or Playboy would know the difference it has made for user experience.

This article is about developing an animation application using the Silverlight Application project that you find in Visual Studio 2008 with SP1. You must download Silverlight 3.0 and Silverlight Tools as described in a number of posts in my blog http://hodentek.blogspot.com. Why did I choose animation? It's the best eye candy and it sure arrests attention. I am not adept at animation but I describe some of the basics to go about creating animation. The Out of browser experience possible with Silverlight 3.0 is also described.

About Silverlight Application

File | New | Project... opens the New Project window. Expand Visual Basic and highlight Silverlight as shown.

Click on Silverlight Application in Visual Studio installed templates. [If you don't find this then your installation is incomplete. Get the latest installation items from http://silverlight.net/GetStarted/]. This will create an application with a default name, SilverApplication1. Change it to something different. Herein it is named SL3Animation. When you click OK, the New Silverlight Application window gets displayed as shown.

You can create either an ASP.NET Web Application Project or an ASP.NET Web Site. Here the Application Project is chosen. When you click after making this choice you will have created the whole set of template items that you see in the Solution Explorer as shown in the next figure.

You have actually two projects, a vb project and a web project. Further more; the web project has both a HTML page as well as an ASPX page. Behind the scenes what this amounts to is that in the case of the HTML page [SL3AnimationTesPage.html] a Silverlight ActiveX control gets embedded which you can find in the Silverlight.js file. The ActiveX control is named AgControl (good use of the chemical formula for silver). The design surface of the HTML is empty except for a <div/> element to display run time errors.

In the case of SL3AnimationTestPage.aspx, a Silverlight ASP.NET control gets added to the page as shown in the <Form/> element of the ASPX page. In design view you may see a 3-D cube in a light blue background color.

Listing 1

<form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div  style="height:100%;">
            <asp:Silverlight ID="Silverlight1" runat="server" 
            Source="~/ClientBin/SL3Animation.xap"
            MinimumVersion="3.0.40307.0" Width="100%" Height="100%" /> 
        </div>    
</form>

Silverlight applications are based on XMAL, the new declarative markup language. The ActiveX control AgControl as well as the ASP.NET Silverlight control get their content from the MainPage.XAML that you find in the VB Project. If you now browse the HTML or the ASPX page you will see an empty browser as nothing has been added to the template as yet.

The MainPage.XAML

This is where the UI design is going to take place. If you click on MainPage.XAML you will see the XAML page as shown in the next figure.

XAML is a very powerful declarative language (Microsoft caught up with Adobe Flex) and Visual Studio has a terrific WYSIWYG editor. If you are new to XAML you will see what looks like a visual design interface is really a preview screen of the design. You cannot drag and drop objects on to it. Whatever object you declare in the XAML code is readily seen on refreshing this preview.

 

Further, you can drag an object from the toolbox and drop it on the XMAL page. Another way to bring in an object is to just type < and hit the enter key, you have intellisense to depend upon as shown in the next figure. Don't worry about the bunch of errors and wiggly lines. They will go away once the XML is properly terminated.

 

Build the XAML Objects for this tutorial

Lay down the following XAML controls on the XMAL page either manually with intellisense support or drag and drop from the Toolbox | Silverlight XAML Controls list. I recommend that you take the manual route as you will get to see more details of what you are doing. The <StackPanel/> is a container which is first placed inside the grid [Between <Grid> and </Grid>]. Then you can place the Button, TextBox and ListBox in that order. Follow this up by adding attributes like width, height, background etc. Again use intellisense support. For example, for the button, after typing 'n' if you click the enter key, you get the drop-down to choose the attribute. When you are done you will see the MainPage as shown in the next figure.

The TextBox and the ListBox have their XAML specific names like "x:Name='txt1'" and "x:Name='rst'". You may also notice that these are in the XMAL schemas which is referenced in the <UserControl/> at the very beginning. The various colors are only for effect. You may choose your own attribute values. After building the web project and browse the HTML (or ASPX) page you see the controls that you placed in your MainPage as shown in the next figure. In the next section we will be adding a click event to the button shown in the above figure.

Adding a Click event to the button

This is very simple. Just insert a Click from the intellisense by typing it in the <Button/> control as shown in the following snippet.

Listing 2

<Button Height="25" Width="150" Name="btn1" Background="BlueViolet" 
BorderBrush="Salmon" Click="btn1_Click"

After inserting the Click event as above if you build the project you would notice that there is a build error. This is because the click event is not completely configured.

Now click on the MainPage.xaml.vb page and add code to the btn1's click event as shown.

Listing 3: MainPage.XAML.vb

 

Partial Public Class MainPage
    Inherits UserControl
 
    Public Sub New()
        InitializeComponent()
    End Sub
    Private Sub btn1_Click(ByVal sender As System.Object, _
    ByVal e As System.Windows.RoutedEventArgs)
        txt1.Text = "Welcome to XAML"
        txt1.Text = txt1.Text & vbCrLf
        rst.Height = 50
        If btn1.Width = 150 Then
            btn1.Width = 300
        ElseIf btn1.Width > 150 Then
            btn1.Width = 150
        End If
    End Sub
 
End Class

 

You will notice that the click event changes the TextBox's text property, ListBox's height property and the toggles the Button's width. This is nothing new. Now the error you saw earlier goes away as you have added the event.

Build the project and verify that the click event brings about the changes you anticipate. You may need to clear the browser cache sometimes if your display does not show up properly. Notice that the project displays in its own local website and not the intranet site at port 80.

Adding animation to the project

There are a lot of details associated with animations in Silverlight. The animation in Silverlight 3.0 refers back to the System.Windows.Media.Animation namespace of which Double Animation is described in this tutorial. When you create a project make sure you look up this namespace and the classes related to animation in the Object Browser.

In addition to DoubleAnimation there are two other animations, the point animation and color animation. The way the animation progresses can be a linear change from one instant to another (From/To animation); specified values at discrete time intervals (Key/Frame animation); or values that depends on a function (Easing animation with 11 ready to use animations).

DoubleAnimation

In order to use DoubleAnimation you need a StoryBoard Control you find in the Toolbox's Silverlight Controls. The StoryBoard controls the animation of the properties of the object and is placed as a resource in the XAML code.

The Storyboard targets an object such as a TextBox, a Button, etc. It then works upon the target's properties such as its dimensions, its opacity(property values between 0 and 1), etc using the object’s name.

In order to control the beginning of the animation the Storyboard should also have a name. The targeted control must have a name associated which can be easily discovered by the program. You should make it a point to look up the attributes /values in the object explorer to get a better understanding.

These are summarized in the snippet whose listing is shown below

Listing 4: StoryBoard

 <StackPanel.Resources>
         <Storyboard x:Name="myStoryboard">
                    <DoubleAnimation Storyboard.TargetName="rst" 
                    Storyboard.TargetProperty="Opacity" From="1.0" 
                    To="0.0" AutoReverse="True" RepeatBehavior="1" 
                    Duration="0:0:1"/>
                    <DoubleAnimation Storyboard.TargetName="txt1" 
                     Storyboard.TargetProperty="Width" From="200" 
                     To="25" AutoReverse="True" RepeatBehavior="1"
                     Duration="0:0:1"/>
          </Storyboard>
 </StackPanel.Resources>

From the above code you will easily see that there are two double animations taking place at the same time.  The target with the name 'rst' is animated in such a way that its opacity is changing from 1 to 0 and the target 'txt1’s width is varying from 200 to 25.

There are two dependency properties AutoReverse and RepeatBehavior. AutoReverse (Boolean) means in both directions (the timeline is both forward and backward) and repeat behavior has three possible values, duration, iteration count or the string 'Forever'(indefinitely till stopped).

After inserting the code your XAML code would look like this:

Listing 5: MainPage.XAML

<User Control 
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  
x:Class="SL3Animation.MainPage"
    
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="AliceBlue">
        <StackPanel Height="120">
            <StackPanel.Resources>
                <Storyboard x:Name="myStoryboard">
                    <DoubleAnimation Storyboard.TargetName="rst" 
                    Storyboard.TargetProperty="Opacity"
                    From="1.0"To="0.0" AutoReverse="True"
                    RepeatBehavior="1" Duration="0:0:1"/>
                    <DoubleAnimation Storyboard.TargetName="txt1" 
                     Storyboard.TargetProperty="Width" From="200" 
                     To="25" AutoReverse="True" RepeatBehavior="1"
                     Duration="0:0:1"/>
                </Storyboard>
            </StackPanel.Resources>
            <Button Height="25" Width="150" Name="btn1" 
             Background="BlueViolet" BorderBrush="Salmon”    
             Click="btn1_Click"             >
            </Button>
            <TextBox TextAlignment="Center" Text="Welcome" Width="200" 
             x:Name="txt1" Background="BlueViolet"
             BorderBrush="Salmon">
            </TextBox>
            <ListBox Height="150" Background="BlueViolet" Width="100" 
             x:Name="rst" BorderBrush="Salmon" >
            </ListBox>
        </StackPanel>
</Grid>
</UserControl>

All you need to add is to tell the Storyboard to run the animation when you click the button. This you do in the code behind by just adding this single highlighted line to the same button click event shown earlier.

Listing 6: MainPage.XAML.vb

 Partial Public Class MainPage
    Inherits UserControl
 
    Public Sub New()
        InitializeComponent()
    End Sub
    Private Sub btn1_Click(ByVal sender As System.Object, _
    ByVal e As System.Windows.RoutedEventArgs)
        txt1.Text = "Welcome to XAML"
        txt1.Text = txt1.Text & vbCrLf
        rst.Height = 50
        If btn1.Width = 150 Then
            btn1.Width = 300
        ElseIf btn1.Width > 150 Then
            btn1.Width = 150
        End If

            myStoryboard.Begin ()

End Sub
 
End Class

 

Build and run the project

When you build and run the project you will see the animation of the TextBox and ListBox controls as specified in the code. Make variations to the From/TO values and notice animation behaviors changes. Also this is a good time to verify the dependency properties, the AutoReverse and RepeatBehavior.

Out of browser experience with Silverlight 3

The ‘Out of Browser’ rendering of Silverlight application is a new feature in Siverlight 3.0 but is disabled by default. After browsing the ASPX page or the HTML page if you were to right click not too far from the objects on the page you would see the following displayed with ‘Install onto this computer…’ dimmed.

You can enable the ‘Out of browser’ execution of the project by uncommenting the deployment specifics in the AppManifest.xml file in your MyProject folder as shown.

Now if you build the project and browse to one of the HTML or ASPX pages and right click near the objects you would see the following displayed.

With this displayed you can now click on the ‘Install Out of Browser Silverlight…onto this computer…’ link. The following window gets displayed where in you choose the option(s) to place the shortcut of an executable (which will render the project in its own browser) called the sllauncher.

This is an executable you will find in ‘C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe ‘. This executable will be placed either on the desktop or the start menu or both when you make the choice and click OK.

When you click the sllauncher.exe on your desktop you will see the project rendered as shown. This is a reversible process and by reverting to the comments you would make the out of browser deployment disabled.

This executable will not work on another computer if you were to copy over the executable. The demo is very nice but I am not sure what the usefulness as there are no computers without a browser and Silverlight is already cross-browser.

Summary

This tutorial describes the basics of setting up an animation project in Silverlight 3.0 using the Silverlight Application Project template in Visual Studio 2008. The tutorial describes DoubleAnimation applied to two of the XAML objects in the application. Also discussed are the details of enabling Out of Browser execution of Silverlight Applications.

 

 

 

 

 

 



User Comments

No comments posted yet.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-10-17 9:26:21 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search