Jesse Liberty

In many examples you will see the Silverlight control passed into handleLoad as the plugIn parameter, and stored as a member variable,

handleLoad: function(plugIn, userContext, rootElement) 
{
    this.plugIn = plugIn;

This is typically done so that you can use the plug-in object in other member methods, such as event handlers.

var rect = this.plugIn.content.FindName("myRect");
rect["Canvas.Left"] -= 50;

An alternative, however, is not to store plugIn as a member variable, but rather to retrieve a reference to the Silverlight control when you need it, by calling GetHost() on any convenient  Silverlight element

handleLoad: function(plugIn, userContext, rootElement) 
{
    var rect = plugIn.content.FindName("myRect");
    rect["Canvas.Left"] = 300;
    
    rect.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseUp));

},

handleMouseUp: function(sender, eventArgs) 
{
   var plugIn = sender.GetHost();
   var rect = this.plugIn.content.FindName("myRect");
   rect["Canvas.Left"] -= 50;
}

Silverlight Fire Starter is a one day event introducing Silverlight to both developers and designers

The original Fire Starter presentations given at the Redmond campus are now available for viewing or downloading at Mix University

The presentations include

• An introduction to Silverlight
• Getting started programming Silverlight
• Workflow of Silverlight with Expression  and Visual Studio
• Silverlight XAML
• A development story
• Media, markers and more
• Popfly and Silverlight
• Silverlight in the future

It is useful to think of the Silverlight object as having its own object model. Within that object model, some properties, methods and events are directly accessible, such as onError,  Settings,  Source, InitParameters and CreateObject.

In addition, the Silverlight object has a sub-object named content and a second sub-object named settings

The content sub-object

it is common to access properties of the content sub-object, especially as this is how you access FindName().

plugIn.content.FindName("myRect");

However other useful properties of the content sub-object include ActualHeight. ActualWidth, CreateFromXaml, FullScreen and OnResize, among others.

The settings sub-object

Perhaps the most important properties of the settings sub-object are Background and Windowless. This sub-object also includes MaxFrameRate and a few others.

All of this is well documented under the topic Silverlight Object Models and Scripting to the Silverlight Plug-In in the Silverlight 1.0 Documentation. Scroll down to Scripting to the Silverlight Plug-In where you'll find three very useful tables

Is very common to need to access a Silverlight element programmatically. There are numerous ways to do so. Assuming you have named your element as shown here

<Rectangle Name="myRect"
           Width="100"
           Height="44"
           Canvas.Left="0"
           Canvas.Top="10"
           StrokeThickness="2"
           Stroke="Black" />

One very simple way to access this rectangle from the handleLoad function is by using getItem() and indexing into the children collection of the root element

this.rect = rootElement.children.getItem(0);
this.rect.strokeThickness="5";

An alternative and more general approach is to use findName(),  which you can also call on any element, including the root element

this.rect2 = rootElement.FindName("myRect");
this.rect2.Fill = "Red";

Note this quote from the documentation: the object you are searching for does not have to be a direct descendant of the object that invokes the findName method.

In addition, you can call FindName() on the plugin's content sub-object

var rect3 = plugIn.content.FindName("myRect");
rect3["Canvas.Left"] = 300;

There are two ways to add attributes to any element in Silverlight:

1. property attribute syntax, which takes a string
2. Property elements

Silverlight provides a number of built-in type converters to allow you to use the simpler property attribute syntax, where you might otherwise need to use a property element. The most familiar example of this is that you can write

<Rectangle Name="myRect0"
       Width="100"
       Height="44"
       Canvas.Left="0"
       Canvas.Top="10"
       StrokeThickness="2"
       Stroke="Black"
       Fill="Red"
       />

A naïve view of this code, might lead you to think that the stroke and fill colors are both strings.

You can quickly disabuse yourself of this notion by adding a little bit of code to your handleLoad event handler

handleLoad: function(plugIn, userContext, rootElement) 
{
    this.plugIn = plugIn;
    var myRect = plugIn.content.FindName("myRect0");
    alert("myRect.stroke = " + myRect.Stroke);
    alert("myRect.fill = " + myRect.Fill);
}

You might expect the first alert box to say "myRect.stroke = Black" and the second alert box to say "myRect.fill= Red"

But on reflection, you realize that what is in the stroke and in the fill is not a string, but rather is a solidColorBrush object that has been placed there using the typeConverter, as shown in figure 1

All of this makes a great deal more sense when you realize that the type converters are simply acting as shorthand, allowing you to avoid the more verbose but more explicit code, shown here

<Rectangle Name="myRect0"
       Width="100"
       Height="44"
       Canvas.Left="120"
       Canvas.Top="10"
       StrokeThickness="2"
       >
    <Rectangle.Stroke>
        <SolidColorBrush Color="Black"  />
    </Rectangle.Stroke>

    <Rectangle.Fill>
        <SolidColorBrush Color="Red" />
    </Rectangle.Fill>
</Rectangle>

I received a quick thank you note from Cal Schrotenboer recently about my video on drag and drop, noting that he had incorporated it into his CodeProject article describing his Silverlight application

I took a look at his extraordinary article (and his more than useful product) and commend the article to you, both as a good example of how to put Silverlight 1.0 to work, and as a canonical example of a technical "how-to."

As you may have noticed, I've been experimenting with writing a Tip of the Day for Silverlight over the past few weeks (until I broke my glenoid and spent a few humerus days in the hospital).

I would now like to officially roll out the Tip of the Day, starting January 2, 2008.  Here is the description from "About this Blog"

It is my goal to add a useful tip every day (every day??) but I won't put something up just to make the frequency: if it isn't worth posting i'll skip that day.  You can count on at least 5 a week. We'll see how it goes.  If you have tips to suggest, please send them to me! 

They'll all begin "Did You Know…" and they'll all be tagged "Tip of the Day."  Extra points to anyone who comes up with a sidebar widget like one of these.

Tim Heuer points out, in his always valuable blog, that there's a new way to create Silverlight 1.0 applications in Visual Studio 2008.

Your first step, as Tim points out, is to install the Silverlight Tools for Visual Studio 2008.  Once that is done, open Visual Studio 2008,and choose New Website. Visual Studio creates the same starter application that it would if you used the template that was provided with Visual Studio 2005.
 

You can still use the old template

As a bonus, Sean Wildermuth responded to Tim with his own workaround for  extracting  the template intended for Visual Studio 2005,and making it available to Visual Studio 2008.

I'm going to personally weigh in on the side of Tim's proposed approach, as it strikes me as more likely to be supported going forward.

In the previous Tip of the Day, we looked at the sixth parameter to createSilverlight/ createSilverlightEx which allowed you to pass in a string as the initParams parameter.

You can also pass in a seventh parameter of type object, which is known as the user context. This can be any object you like. However, rather than retrieving it as a property of the Silverlight control, you retrieve the userContext as the second argument passed to the load event handling method

handleLoad: function(plugIn, userContext, rootElement)

As a simple example, you can create an array in default.html.JS. and pass that in as your userContext object:

var authorArray = 
   [ "Douglas Adams", "Neil Gaiman", "Neal Stephenson" ];

context: authorArray

Since this becomes available to you only in handleLoad you'll save it in a member variable so that it will be available in every member method:

handleLoad: function(plugIn, userContext, rootElement) 
{
    this.plugIn = plugIn;
    this.userContext = userContext;

Using the keyword this creates a member variable that is accessible from any member method. The userContext looks like a variable, but what you passed in is an array, and so you can use it as an array.

handleMouseUp: function(sender, eventArgs) 
{
    alert("this.userContext[0] = " + this.userContext[0]);
    alert("this.userContext[1] = " + this.userContext[1]);
    alert("this.userContext[2] = " + this.userContext[2]);
},

I will be posting a "How Do I" video on using the sixth and seventh parameter of CreateObject, very soon.