Information Technology Consulting Service

Welcome Guest Search | Active Topics | Members | Log In

Silverlight animation QuickStart Options · View
Posted: Thursday, April 09, 2009 9:42:42 AM
Rank: Administration
Groups: Member

Joined: 3/24/2008
Posts: 2,804
Points: 5,588
Location: South Florida USA
Silverlight animation QuickStart

1. start a new "Silverlight Application" project in Visual Studio.

2. select "Automatically generate a test page to host Silverlight at build time"
project type: ASP .NET Web Application Project

3. add the following code to Page.xaml.vb


Partial Public Class Page
    Inherits UserControl

    Public Sub New()
    End Sub

    Private Sub Animation_Begin(ByVal sender As Object, ByVal e As RoutedEventArgs)
    End Sub

    Private Sub Animation_Pause(ByVal sender As Object, ByVal e As RoutedEventArgs)
    End Sub

    Private Sub Animation_Resume(ByVal sender As Object, ByVal e As RoutedEventArgs)
    End Sub

    Private Sub Animation_Stop(ByVal sender As Object, ByVal e As RoutedEventArgs)
    End Sub

End Class

4. Add the following XAML code to Page.xaml


<UserControl x:Class="SilverlightApplication9.Page"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
                <Storyboard x:Name="myStoryboard">

                    <!-- Animate the center point of the ellipse. -->
                    <PointAnimation Storyboard.TargetProperty="Center"
      RepeatBehavior="Forever" />

            <Path Fill="Blue">
                    <!-- Describe an ellipse. -->
                    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
      Center="20,20" RadiusX="15" RadiusY="15" />

            <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
                <!-- Button that begins animation. -->
                <Button Click="Animation_Begin"
    Width="65" Height="30" Margin="2" Content="Begin" />

                <!-- Button that pauses animation. -->
                <Button Click="Animation_Pause"
    Width="65" Height="30" Margin="2" Content="Pause" />

                <!-- Button that resumes animation. -->
                <Button Click="Animation_Resume"
    Width="65" Height="30" Margin="2" Content="Resume" />

                <!-- Button that stops animation. Stopping the animation returns the
    ellipse to its original location. -->
                <Button Click="Animation_Stop"
    Width="65" Height="30" Margin="2" Content="Stop" />


5. Build/test the code

6. There are 3 files that you need to add to your Visual Studio website project:

These files can be found in your project build folder, typically:
My Documents\Visual Studio 2008\Projects\{SilverlightApplication name}\{SilverlightApplication name}\Bin\Debug

7. The JavaScript and HTML from TestPage.html can be copy/pasted into your .aspx file.

8. A sample of the above code can be found here:

Users browsing this topic

Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Main Forum RSS : RSS

YAFPro Theme Created by Jaben Cargman (Tiny Gecko)
Powered by Yet Another version (NET v2.0) - 11/14/2007
Copyright © 2003-2006 Yet Another All rights reserved.
This page was generated in 0.038 seconds.