Flash to Silverlight

You do Flash and now you want to add Silverlight to your skillset?
You've come to the right place.

Handling the Mouse Click

This is page 4 of The Beginning tutorial in the Getting Started series. As an introduction to Silverlight, this tutorial walks through a simple project - adding a ball to the stage when the mouse is clicked.

Add the Event Handler

Event Handler

Now it’s time for some action! The stage and the ball control are ready, let’s hook up the mouse click on the stage to some custom code.

Switch back to “MainPage.xaml”. Select the LayoutRoot Grid in the Objects panel. Now in the Properties panel, find the Events button with the lightning bolt icon in the upper right. Click the Events button to show the list of events raised by the Grid.

Double-click the textbox next to the MouseLeftButtonDown event to generate a handler. Event handlers in C# are very similar in concept to event listeners in ActionScript.

After double-clicking, Blend will automatically switch to "MainPage.xaml.cs" and display the new event handler LayoutRoot_MouseLeftButtonDown.

Add the Code to the Handler

And now for the big finale, check out the ActionScript code we used for the Flash example at the beginning:

var b = addChild(new ball());
b.x = mouseX;
b.y = mouseY;

Compare that code to following C# code:

ball b = new ball();
Canvas.SetLeft(b, e.GetPosition(this).X);
Canvas.SetTop(b, e.GetPosition(this).Y);
LayoutRoot.Children.Add(b);

While very similar, there are a few important differences to point out in the C# version:

  • Adding a child to a container does not return the child, so we save that for last
  • UserControls do not have x and y properties, instead their positioning is dependent on the container they are added to and some cases, like this one, attached properties.
  • The position of the mouse is made available as an EventArg which is similar to the parameter of an event listener. You also have the option to get those coordinates relative a specific element set as the first parameter of the method.

Place the code above in the LayoutRoot_MouseLeftButtonDown event handler.

Change Layout Type

There is one last step before running the project to see your work. Switch back to “MainPage.xaml” and in the Objects panel, right-click LayoutRoot.

From the menu, select Change Layout Type > Canvas.

In the code above we set the attached properties of Canvas.Left and Canvas.Top because we wanted absolute positioning.

By changing the LayoutRoot object from a Grid to a Canvas, those values will now be respected and the ball will be added where specified.

Hit F5 to Run the application and you should be greeted with the following:

Get Microsoft Silverlight

Pages 1, 2, 3, 4

 

Success! You're adding balls to the screen when and where the mouse is clicked. And you've picked up some Silverlight concepts along the way. Ready for something a little more adventurous? Let’s move on to Storyboard Animations.

blog comments powered by Disqus