A little bit ago I wrote a post on how to create a "Hello World" Silveright web part and deploy it into SharePoint. Well since then I gave a presentation at a SharePoint Saturday event on the subject, but I added a few more "zingers" into the mix to make it a bit more interesting. Firstly, I added a transform onto the text to make it spin on its axis, and secondly I added a DoubleAnimation to make the opacity of the text fade in and out, forever. Read along if you're curious on how to implement these fundamental Silverlight techniques. Here's a working example: http://philwicklund.com/pages/sltest.aspx

Prerequisite: Start by working through the steps in this post: http://philwicklund.com/blog/Pages/Hello-World-SilverLight-Web-Part-for-SharePoint-Introduction-to-Silverlight-Development.aspx, to learn the first steps on creating a basic Silverlight application. Then, after you've created the new visual studio project and built the Hello World app that looks as below, proceed through the rest of the steps found within this post…

(note: if you don't see the "Silverlight" project, go here [http://tinyurl.com/4nrb44] to download the extensions for Visual Studio 2008 SP1)

Step 3.1: Adding a Silverlight RenderTransform to make the text spin

Add a UserControl.Resources tag into the Page.xaml file, containing a double animation to make the "Hello World" text spin 360 degrees:

<UserControl.Resources>

    <Storyboard x:Name="homeboard">

        <DoubleAnimation

            Storyboard.TargetName="spin"

            Storyboard.TargetProperty="Angle"

            From="0" To="360" Duration="0:0:5"

            RepeatBehavior="Forever" />

    </Storyboard>

</UserControl.Resources>

This Storyboard contains a DoubleAnimation that will make the text block spin from 0 degrees to 360 and will continually repeat every 5 seconds (duration). Now, the spinning won't start yet until the Storyboard is initiated. What we need to do is call the "Begin" method on the homeboard storyboard object. To do that, let's wire up an onclick event, so when the user clicks on the text, we'll handle the click event and call begin to initiate the spinning.

In the properties of the TextBox, add "MouseLeftButtonDown="StartAnimation"" and the TextBlock.RenderTransform:

<TextBlock

    x:Name="Text"

    Text="Hello World!"

    FontSize="50"

    FontFamily="Georgia"

    FontStyle="Italic"

    FontWeight="Bold"

    FontStretch="Expanded"

    VerticalAlignment="Center"

    TextAlignment="Center"

    MouseLeftButtonDown="StartAnimation">

    <TextBlock.Foreground>

        <LinearGradientBrush>

            <GradientStop Color="Red" Offset="0.0" />

            <GradientStop Color="Yellow" Offset="1.0" />

        </LinearGradientBrush>

    </TextBlock.Foreground>

    <TextBlock.RenderTransform>

        <RotateTransform x:Name="spin" Angle="0" CenterX="200" CenterY="50" />

    </TextBlock.RenderTransform>

</TextBlock>

The MouseLeftButtonDown will "hook up" an event handler into our code behind so when the user clicks the text, the Storyboard will initiate. Go into your Page.xaml.cs file and paste in the following method:

private void StartAnimation(object sender, MouseEventArgs e)

{

    homeboard.Begin();

}

Notice the RenderTransform. This ties the TextBlock to the Storyboard. The DoubleAnimation's Storyboard.TargetName property is set to this RenderTranform which has the coordinates (x,y) specified which is the axis the rotation revolves around.

Retest your application (right click the aspx page, and do "view in browser"), and thereafter you can click the text it will be spinning!

Step 3.2: Making the text fade in and out

To make the text fade in and out, we want to add another DoubleAnimation into our story board, but this time lets use the DoubleAnimationUserKeyFrames object to specify precise times to fade in and out. Paste the following into the story board:

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Text" RepeatBehavior="Forever" Storyboard.TargetProperty="(Opacity)" BeginTime="00:00:00">

    <SplineDoubleKeyFrame KeyTime="00:00:01.0000000" Value="0"/>

    <SplineDoubleKeyFrame KeyTime="00:00:02.0000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

Notice the Storyboard.TargetProperty="(Opacity)", this DoubleAnimation is going to be effecting the Opacity of the TextBlock. The AplineDoubleKeyFrame elements within the DoubleAnimation specify two milestones in time. The first milestone is at one second, in which case the TextBlock will have disappeared (opacity equals 0). By the second milestone ending at the second second, the TextBlock will have reappeared (opacity equals 2).

Pretty simple – below is my visual studio project if you want to see the source code…

Phil