RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Get Started with Silverlight Using Visual Studio 2008 and Expression Blend 2 : Page 6

The Microsoft Silverlight browser plug-in enables developers to host Rich Internet Applications (RIAs), which feature animation, vector graphics, and video playback. Find out how to get started with Silverlight, and get a feel for how this new type of development works.

Now that you have your first Silverlight application running, modify it to do some animation so that you can do justice to Silverlight. As an example, let's modify the button so that it can rotate and update the time simultaneously.

Using the same project, add a new Timeline to the XAML file in Expression Blend 2. After adding the new Timeline, your XAML code should look like this:

    <EventTrigger RoutedEvent="Canvas.Loaded">
        <Storyboard x:Name="Timeline1"/>
    		<Storyboard x:Name="Timeline2"/>
In the Page.xaml.vb file, declare a private member variable called degrees:

Partial Public Class Page
    Inherits Canvas
    Private degrees As Integer = 0
In the Page_Loaded() subroutine, add a new duration for the second Timeline:

    Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
        ' Required to initialize variables

        '---display the clock---
        Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1))

        '---rotate the clock---
        Me.Timeline2.Duration = New Duration(New TimeSpan(100))

End Sub
Here, you are setting the Timeline2's interval to 100 milliseconds (the TimeSpan object constructor is overloaded). Every 100 milliseconds, the Completed event of Timeline2 is fired, and here you call the PerformTransformation() subroutine:

Private Sub Timeline2_Completed( _
   ByVal sender As Object, _
   ByVal e As System.EventArgs) _
   Handles Timeline2.Completed


    End Sub
This subroutine uses the RotateTransform object to perform a transformation on an object. Here, you will use it to rotate the button one degree at a time:

Private Sub PerformTransformation()
        '---use a RotateTransform object to perform transformation---
        Dim rt As New RotateTransform

        '---define the transformation---
        With rt
            .Angle = degrees
            .CenterX = 50
            .CenterY = 50
        End With

        '---increment the degree of rotation---
        degrees += 1

        '---transform the button---
        btnTime.RenderTransform = rt
    End Sub

Figure 16. On the Run: Rotating the button.

In addition, when the user clicks on the button, the button will be reset to its original position and start rotating again:

Private Sub btnTime_MouseLeftButtonDown( _
   ByVal sender As Object, _
   ByVal e As System.Windows.Input.MouseEventArgs) _
   Handles btnTime.MouseLeftButtonDown
        degrees = 0
    End Sub
Figure 16 shows how the button looks when it's run.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date