Jesse Liberty

We are in the process of reorganizing each of the pages on Silverlight.net to make them more useful and usable (though in some ways this is like painting the Brooklyn Bridge ; as soon as you're done, it is time to start over again!).

One of our top goals has been the "How Do I?" videos stand alone,  so that  you can watch each without having had to watch any of the others.

That said, for someone new to Silverlight; it is great to have at least a set to start with.

In recognition of that, I'd like to recommend you read through my blog post  Silverlight For Total Novices which includes a recommendation on which videos to watch, and in which order.   This will hold true until we reorganize the site to have a collection of videos for Getting Started, at which point it will be much more obvious which videos to watch.

As soon as you are up and running, run, don't walk, to the Firestarter videos that were delivered on the Microsoft campus; together they make for a Silverlight 1 day university in a box.

The next stop would be to watch some of the other videos to get ideas about how to accomplish specific tasks.

As you feel more confident, consider subscribing to some of the sites that cull for the best postings of Silverlight information; especially Silverlight Cream,  and an experiment I'm particularly intrigued by: Adam Kinney's idea of using Twitter to disseminate information about Silverlight developments and ideas. 

Finally, note that Silverlight 2.0 is right around the corner, and this represents a huge increase in functionality, capability and usability. It isn't too early to begin to take a look at what is coming, which you can do pretty easily by reading, first, Scott Guthrie's blog entry and then  keeping an eye on VisitMix where there already is a surprising amount of advance material.

Be sure to keep an eye on Silverlight.net; we hope to provide a lot more information leading up to Mix.

When you use an image brush, the target of the brush is the image you wish to display,

<Rectangle x:Name="myRectImage"
           Width="100"
           Height="44"
         Canvas.Left="0"
         Canvas.Top = "500"
           StrokeThickness="2"
           Stroke="Black" >
  <Rectangle.Fill>
    <ImageBrush ImageSource="Picture.jpg" />
  </Rectangle.Fill>
</Rectangle>

<Ellipse x:Name="myEllipseImage"
         Width="100"
         Height="44"
         Canvas.Left="110"
         Canvas.Top = "500"
         StrokeThickness="2"
         Stroke="Blue" >
  <Ellipse.Fill>
    <ImageBrush ImageSource="Picture.jpg" />
  </Ellipse.Fill>
</Ellipse>

Assuming you have a jpeg file in your directory named Picture, the ImageBrush will find it and display it,

If, however, you wish to display a video, you can not write your code by simply pointing the VideoBrush to the video image, as you might expect, (even if Butterfly.wmv is in the correct directory)

<Rectangle x:Name="myRectVideoBroken"
           Width="100"
           Height="44"
         Canvas.Left="0"
         Canvas.Top = "500"
           StrokeThickness="2"
           Stroke="Black" >
  <Rectangle.Fill>
     <!-- Won't work!!-->
    <VideoBrush VideoSource="Butterfly.wmv" />
  </Rectangle.Fill>
</Rectangle>

<Ellipse x:Name="myEllipseVideoBroken"
         Width="100"
         Height="44"
         Canvas.Left="110"
         Canvas.Top = "500"
         StrokeThickness="2"
         Stroke="Blue" >
  <Ellipse.Fill>
         <!-- Won't work!!-->
    <VideoBrush VideoSource="Butterfly.wmv" />
  </Ellipse.Fill>
</Ellipse>

Unfortunately, this will generate nothing more than an error message,

Video brushes require that their source be a MediaElement, whose source, in turn, is the video you wish to display.

<MediaElement
  x:Name="butterflyMediaElement"
  Source="Butterfly.wmv"   />

It is this MediaElement (butterflyMediaElement) that becomes the source for the VideoBrush:

<Rectangle x:Name="myRectMedia"
       Width="100"
       Height="44"
     Canvas.Left="220"
     Canvas.Top = "500"
       StrokeThickness="2"
       Stroke="Black" >
    <Rectangle.Fill>
        <VideoBrush SourceName="butterflyMediaElement" />
    </Rectangle.Fill>
</Rectangle>

<Ellipse x:Name="myEllipseMedia"
     Width="100"
     Height="44"
     Canvas.Left="330"
     Canvas.Top = "500"
     StrokeThickness="2"
     Stroke="Blue" >
    <Ellipse.Fill>
        <VideoBrush SourceName="butterflyMediaElement" />
    </Ellipse.Fill>
</Ellipse>

With this bit of indirection, the VideoBrush is able to display the movie.

Unfortunately, the MediaElement itself totally dominates the page; which is not at all what we want. We can solve this by making the MediaElement invisible. One easy way to do so is to set its opacity to 0. While we're at it, we'll mute the MediaElement, thereby turning off all sounds from the movie as well,

<MediaElement
  x:Name="butterflyMediaElement"
  Source="Butterfly.wmv"
  IsMuted="True"
  Opacity="0.0" />

The result is that the MediaElement continues to serve as the source for the VideoBrush but is not itself visible.

By default, linear gradients are on a diagonal. 

Understanding this begins with the implicit assumption of a coordinate system superimposed on every shape in which the upper-left hand corner is set to 0,0, with the x axis extending to 1 at the right edge of the shape, and the y axis set to 1 at the bottom of the shape.

An implicit diagonal is then superimposed from 0,0 to 1,1, and the colors are placed at GradientStops along that diagonal. The LinearGradientBrush blends the colors evenly from one Stop to the next,

<LinearGradientBrush >
  <GradientStop Color="Red"
                Offset="0.0"/>
  <GradientStop Color="Orange"
                Offset="0.143"/>
  <GradientStop Color="Yellow"
                Offset="0.286"/>
  <GradientStop Color="Green"
                Offset="0.429"/>
  <GradientStop Color="Blue"
                Offset="0.572"/>
  <GradientStop Color="Indigo"
                Offset="0.715"/>
  <GradientStop Color="Violet"
                Offset="1.0"/>
</LinearGradientBrush>

You can see, therefore why the color lines are on a diagonal,  but this is actually trivial to change. If you prefer vertical lines, you have only to change the origin and termination of the gradient line; instructing it to run not from 0,0 to 1,1 but rather from 0,0.5 to 1, 0.5. 

<LinearGradientBrush StartPoint="0,0.5"
                     EndPoint="1,0.5" >

That is, the line will run from 0 to 1 on the x axis, but will run from 0.5 to 0.5 (no change at all) on the y axis,

Of course,  you can create horizontal lines by setting the x axis to start and end at 0.5 and letting the y coordinates move from 0 to 1.

 Update: For more on this topic you may want to watch either this video, or this video.

I receive a lot of email asking questions about Silverlight; which is great, but the most effective way to get these questions answered is usually to post them to the Silverlight Forum, where a lot more people can take a look and respond.

In any case, wherever you ask your question, be sure to include the following essential information:

• The version of Silverlight you are using (be as specific as possible, including the release you're working with)
• The version of Visual Studio you are working with
• Other supporting software you are using (e.g., Silverlight 1.1 tools for Visual Studio 08 / December)
• What you are trying to accomplish
• Specifically what is going wrong

This helps all of us try to recreate the problem and thus to solve it quickly and efficiently.

Don't be afraid to write to me; but please understand that one geek answering email will never be as effective as a community working together. (And the truth is that the closer we get to Mix, the more I'll be frantically preparing to help ensure that we have all the videos, tutorials and etc. ready to go for Silverlight.Net.)

In what I honestly believe is a stunning announcement, Scott Guthrie blogged moments ago that we have released the source code for the following .NET Framework libraries for browsing and debugging,  with more to come:

• .NET Base Class Libraries (including System, System.CodeDom, System.Collections, System.ComponentModel, System.Diagnostics, System.Drawing, System.Globalization, System.IO, System.Net, System.Reflection, System.Runtime, System.Security, System.Text, System.Threading, etc).

• ASP.NET (System.Web, System.Web.Extensions)

• Windows Forms (System.Windows.Forms)

• Windows Presentation Foundation (System.Windows)

• ADO.NET and XML (System.Data and System.Xml)

For full instructions on how to install this for VS 2008, a process that takes only a few minutes, please see Shawn Burke's blog post. Scott also points you here for help if you run into any problems.

For an excellent example of how to use the source to step through the Framework code; please be sure to read Scott's blog post.

I woke up yesterday and realized what a bad idea it was that I had planned a Webcast called Tips and Traps in Programming Silverlight 1.0 for today.

First, if you're going to do such a thing, you want to start about two weeks out asking everyone you know to send you their best tips and traps. I didn't do that that. Total brain lapse due to painkillers and stupidity. Second, I've been working my way back to full time, and over the past 4-5 days I've been spending a lot of hours preparing for a new set of lengthy blog posts (to be unveiled soon) and handling a crisis with a book (don't ask) and so I never really got around to practicing with the web cast software as much as I'd hoped — finally did yesterday, only to learn that things were not 100% exactly as I'd hoped. Took a few hours, but got it all fixed up. Sure wish I had some content though.

Now, to fully appreciate my level of panic, you really need the context. I should have been doing one web cast per month since September. That is, by now, I should have done at least 4. I did one. I canceled one because of surgery and one more was picked up for me by a colleague (who had his own technical difficulties!). So this was Webcast, err…. 2.

I set my alarm for wicked early this morning so that I could create a truly professional web cast, with tight integration of PowerPoint and great demos, and laid out 25 Tips and Traps which I whittled down to 10 that I could demo the heck out of. I then set it all up, including a cheat sheet and, just to be safe, working backup copies (belt and suspenders).

I then signed in 1/2 hour early to make sure the mic was set up right, sound was good, the screen resolution was great.  50+ people were there by starting time; eager and responsive. I went over the agenda, set expectations low (I've been watching the politicians!)  got to my first point and just as I was recovering from the fact that my Favorites collection was not set up to find the web page I needed, and I was ready to display the page I was looking for, ker-pow! my entire town lost power. I do have 5 UPS's in my house, but not quite enough to keep the entire network structure up when the town goes down.

I know, I deserved it for last minute preparation and bad karma, but ouch.

Fortunately, I  was able to forward the meeting information to Joe Stagner, who put up an explanation to the members, who, in turn  were very understanding (power came back 90 minutes later at 14:40 Eastern (GMT -5) and the few remaining folks were very kind).

We will, of course, reschedule, but I invite your feedback on whether the Tips and Traps I was going to show were too elementary and I should look for more advanced material, or you'd like to see the ones that were planned (or you'd like to skip this topic altogether and go on to something else).

In any case, I apologize for the inconvenience.

Here is the list of tips/traps that was scheduled:

• The new way to create 1.0 apps in VS 2008
• Making horizontal linear gradients
• Creating sharp lines in gradients
• Image brush source vs. video brush source
• Getting programmer data into Silverlight controls (InitParams)
• Getting non-string data into Silverlight controls (context)
• Why isn't Javascript debugging working?
• Why don't HTML overlays work?
• Why is my transparent control black?
• Two ways to wire up event handlers
• Why did my drag and drop stop dragging?

 (Okay, so it's 11).

This tip is thanks to Adam Nathan and his excellent book Silverlight 1.0 Unleashed

You can achieve the startling effect of introducing sharp lines within a linear gradient by adding two GradientStops at the same offset, using different, and reinforcing colors.  In the following example, I show two polygons. The first uses a standard gradient brush, but in the second I introduce a new color (DarkBlue) which I place at the same GradientStop as Green and at the same GradientStop as Blue. The effect is quite unmistakable, as shown in the image.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Polygon x:Name="PolyWithGradientBrush"
         Points= "50,70, 100,70, 150,120, 150,170, 100,220, 
         50,220, 0,170, 0,120, 50,70"
         StrokeThickness="2"
         Stroke="Black" >
  <Polygon.Fill>
         <LinearGradientBrush>
            <GradientStop Color="Red"
                          Offset="0.0" />
            <GradientStop Color="Orange"
                          Offset="0.3" />
            <GradientStop Color="Green"
                          Offset="0.5" />
            <GradientStop Color="Blue"
                          Offset="0.7" />
            <GradientStop Color="Violet"
                          Offset="1.0" />
         </LinearGradientBrush>
      </Polygon.Fill>
</Polygon>

   <Polygon x:Name="PolyWithGradientBrushAndSharpLines"
            Points="250,70, 300,70, 350,120, 350,170, 300,220, 
         250,220, 200,170, 200,120, 250,70"
            StrokeThickness="2"
            Stroke="Black">
      <Polygon.Fill>
         <LinearGradientBrush>
            <GradientStop Color="Red"
                          Offset="0.0" />
            <GradientStop Color="Orange"
                          Offset="0.3" />
            <GradientStop Color="Green"
                          Offset="0.5" />
            <GradientStop Color="DarkBlue"
                          Offset="0.5" />
            <GradientStop Color="DarkBlue"
                          Offset="0.7" />
            <GradientStop Color="Blue"
                          Offset="0.7" />
            <GradientStop Color="Violet"
                          Offset="1.0" />
         </LinearGradientBrush>
      </Polygon.Fill>
   </Polygon>
</Canvas>

In today's Tip of the Day I wrote that Canvas's Height and Width properties default to zero. A reader wrote to me in email saying,

Actually, unless it was implemented differently in Silverlight than in WPF (which I cannot exclude), the default width and height is Auto. In this, Canvas is no different from any other Panel (Width and Height of a WPF Grid also are Auto).

I will check with the folks who implemented Canvas, but for now I can tell you that the Silverlight documentation confirms that the values default to zero (though, as I wrote in my return email, I would agree that this is not dispositive).

I also wrote a test program, though I'm not certain enough about the internals to be sure that even this puts the matter to rest:

Scene.xaml

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Canvas Name="InnerCanvas"
           Background="LightBlue"
           >
      <Rectangle x:Name="myRect0"
                 Width="100"
                 Height="44"
                 Canvas.Left="0"
                 Canvas.Top="10"
                 StrokeThickness="2"
                 Stroke="Black"
                 Fill="Red" />
      <TextBlock Name="Message"
                 Width="200"
                 Height="200"
                 Text="Ready"
                 Canvas.Left="150"
                 Canvas.Top="10" />
   </Canvas>
</Canvas>

(Note that Canvas has no Height or Width set).

Scene.xaml.js

?<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Canvas Name="InnerCanvas"
           Background="LightBlue"
           >
      <Rectangle x:Name="myRect0"
                 Width="100"
                 Height="44"
                 Canvas.Left="0"
                 Canvas.Top="10"
                 StrokeThickness="2"
                 Stroke="Black"
                 Fill="Red" />
      <TextBlock Name="Message"
                 Width="200"
                 Height="200"
                 Text="Ready"
                 Canvas.Left="150"
                 Canvas.Top="10" />
   </Canvas>
</Canvas>

If you don't specify otherwise, the Canvas object has a height of 0, a width of 0 and a background of null.

It turns out that this has some very profound effects that I will explore in this and the next couple Tips of the Day. A canvas with a height of 0 and a width of 0:

• isn't very good at displaying its background color
• isn't very good at responding to mouse clicks
• yet, is able to have children outside its bounds!

Each of these three facts can lead to surprises for the unwary programmer.  Let's start, today with the first.  Examine this code,

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Canvas Name="InnerCanvas"
           Background="LightBlue">
      <Rectangle x:Name="myRect0"
                 Width="100"
                 Height="44"
                 Canvas.Left="0"
                 Canvas.Top="10"
                 StrokeThickness="2"
                 Stroke="Black"
                 Fill="Red" />
   </Canvas>
</Canvas>

On examination it would be reasonable to expect to see a red rectangle with a black border on a light blue background, but what is rendered appears to have no background,

While the canvas does have a light blue background, it is invisible because the width and height are zero. Thus, the rectangle is actually rendered outside the borders of our 0 x 0 canvas.  To fix this, add an explicit width and height to the canvas,

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Canvas Name="InnerCanvas"
           Background="LightBlue"
           Width="200"
           Height="200">
      <Rectangle x:Name="myRect0"
                 Width="100"
                 Height="44"
                 Canvas.Left="0"
                 Canvas.Top="10"
                 StrokeThickness="2"
                 Stroke="Black"
                 Fill="Red" />
   </Canvas>
</Canvas>

Hey! Presto! the canvas now encompasses the rectangle and the background color is visible:

In his seminal work, The Wisdom of Crowds, financial journalist James Surowiecki notes that large numbers of people can often provide better or more reliable information in the aggregate than any member of the crowd can as an individual. The canonical example is that if you ask 50 people to guess the number of marbles in a jar, and provide them with an incentive to be accurate, the average of the guesses is likely to be closer to the correct answer than most of the individual guesses.

It is in this spirit that a number of sites have been created in which blog readers and site users are invited to vote on the quality or utility of various contributions. One site of particular interest to .net programmers is the open-source, community based news site DotNetKicks.com

The main page shows a list of the latest popular stories with links to the top stories of the day, week, month and year. All of the stories relate to programming in .net.

You can submit stories from the website, vote for stories on the website, and some authors will include a kick–it button on their stories, to allow you to vote for the story while reading it.

Articles with more kicks are elevated as top stories, and thus are probably worth a look.

While it is our goal that Silverlight.net will continue to provide not only the best articles on Silverlight, but virtually everything you need for learning and using Silverlight, DotNetKicks.com can be a powerful resource for finding additional top quality articles and blog entries.