DoubleAnimation Basics with Silverlight Application
page 3 of 4
by Jayaram Krishnaswamy
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 28688/ 57


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

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

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 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="AliceBlue">
        <StackPanel Height="120">
                <Storyboard x:Name="myStoryboard">
                    <DoubleAnimation Storyboard.TargetName="rst" 
                    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"
            <Button Height="25" Width="150" Name="btn1" 
             Background="BlueViolet" BorderBrush="Salmon”    
             Click="btn1_Click"             >
            <TextBox TextAlignment="Center" Text="Welcome" Width="200" 
             x:Name="txt1" Background="BlueViolet"
            <ListBox Height="150" Background="BlueViolet" Width="100" 
             x:Name="rst" BorderBrush="Salmon" >

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()
    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.

View Entire Article

User Comments

No comments posted yet.

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

©Copyright 1998-2024  |  Page Processed at 2024-04-15 7:02:01 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search