The ball

Getting started with Silverlight 3 – Hello Bouncing Ball

March 25, 2009 by onishimura
Filed under: Silverlight 

I’ve been playing with Silverlight 3 lately and thought I’d post a quick guide on getting started. Note that once installed you can only develop silverlight 3 applications since VS doesn’t support multi-targeting for Silverlight apps.

Also, in order to start the initial install you’ll have to uninstall any previous betas of Blend you may have installed. I had Expression Blend 2.5 installed and received this: Beta and preview versions of Microsoft Expression Blend must be uninstalled before installation can continue. Don’t worry about Silverlight 2, it will automatically uninstall Silverlight 2 for you. All of the links below are available at http://silverlight.net/getstarted/silverlight3/default.aspx, I’ve just added direct links to the files.

  1. Download and install Silverlight 3 Tools  (which will also install the SDK and runtime) : Silverlight 3 Toolkit March 2009.msi. Installs to C:Program FilesMicrosoft Silverlight
  2. Download and install Expression Blend 3 Preview : Blend_Trial_en.exe. Installs to Installs to C:Program FilesMicrosoft Expression
  3. Download and install the Silverlight 3 Toolkit : Silverlight3_Tools.exe.  Installs to C:Program FilesMicrosoft SDKsSilverlightv3.0ToolkitMarch 2009
  4. Download and install .NET RIA Services preview : RiaServices.msi. Installs to C:Program FilesMicrosoft SDKsRIA Services

Siverlight 3 Videos : http://silverlight.net/learn/videocat.aspx?cat=12#sl3
Silverlight 3 Labs : http://silverlight.net/learn/labs.aspx


One thing to keep in mind, with any new silverlight install, you may need to add the .xap MIME type to IIS (or the web project’s web.config) if you’re running it via IIS instead of casini. This is usually the case when you get a Sys.InvalidOperationException : Could not download the Silverlight application. To do this, add .xap to the MIME types under the IIS category on the main page, and map it to application/x-silverlight-app.

To verify the install worked, let’s create a Hello World application. Create a new project in Silverlight 3 and select ‘Silverligh Application’ as it’s type. Select the defaults for hosting the project in a new asp.net web site. Once the project has loaded modify the MainPage.xaml file so that it looks like this:

<UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:Class="SilverlightHelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="500" Height="700">
	<controls:Label Content="Hello World"></controls:Label>
    </Grid>
</UserControl>

Essentially all I’ve done here is to add the controls namespace to the UserControl, and added a label with ‘Hello World’ as it’s content. While this is great for verifying an install it’s pretty boring considering the cool things silverlight is capable of, so I decided to add a bouncing ball to play a bit with the animations in Silverlight. First let’s add a game loop in the form of a storyboard to MainPage.xaml:

<UserControl.Resources>
	<!-- Game loop -->
	<Storyboard x:Name="ellipseStoryboard" Completed="ellipseStoryboard_Completed">
	</Storyboard>
</UserControl.Resources>

Note that there’s really no animations defined here so it will just call the Completed event immediately. Next, add a canvas and an ellipse to the LayoutRoot of the page:

<Canvas Name="canvasMain" Background="Gray">
	<Ellipse Fill="Blue" Canvas.Left="350" Canvas.Top="150"
		Width="50" Height="50" Name="ellipseObject">
	</Ellipse>
</Canvas>

The designer should show a blue ball on a gray background. Now modify the MainPage class to begin the storyboard and move the ball in the ellipseStoryboard_Completed event:

public partial class MainPage : UserControl
    {
        private int xVelocity = 5;
        private int yVelocity = 5;

        public MainPage()
        {
            InitializeComponent();

            ellipseStoryboard.Begin();
        }

        ///
        /// Storyboard loop : this plays continuously since we have nothing defined for the storyboard
        ///
        ///
        ///
        protected void ellipseStoryboard_Completed(object sender, EventArgs e)
        {
            double ellipseX = (double)ellipseObject.GetValue(Canvas.LeftProperty);
            double ellipseY = (double)ellipseObject.GetValue(Canvas.TopProperty);

            //NOTE: canvas.width - ellipse.width for max, since the left and top properties
            //are based on upper left corner of the object
            if (ellipseX >= (canvasMain.ActualWidth - ellipseObject.ActualWidth) || ellipseX <= 0)
            {
                xVelocity *= -1;
            }
            if (ellipseY >= ((canvasMain.ActualHeight) + ellipseObject.ActualHeight) || ellipseY <= 0)
            {
                yVelocity *= -1;
            }

            ellipseX += xVelocity;
            ellipseY += yVelocity;

            ellipseObject.SetValue(Canvas.LeftProperty, ellipseX);
            ellipseObject.SetValue(Canvas.TopProperty, ellipseY);

            ellipseStoryboard.Begin();
        }
    }

This starts the storyboard in the page's constructor, modifies the position and velocity of the ellipse based on it's current position, and reverses velocity if a border has been reached. Note that we call storyboard.begin() again at the end of the completed event, in order to ensure it continuously loops. There's a lot of different ways to implement this, such as using a DispatcherTimer

Tags: ,

Comments

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!