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