Jesse Liberty

[Updated 3/20 to fix the RSS links] 

 I've received a lot of very positive feedback from the tutorials and videos and a lot of inquiries about what help will be forthcoming and how to get help right away. I thought I'd take a few minutes to provide some guidelines that are intended to optimize your experience, not to restrict your access…

First, lots of folks are producing material, both on a regular and on an ad-hoc basis. If you are creating Silverlight 2 applications, I recommend subscribing to

Silverlight Community Blogs

Silverlight Geek Blog  (yah, that's me)

    (these are me too  )

Tutorials

As noted previously, the tutorials will be released at least twice monthly, beginning the end of this month, and my plan is to go through all of Silverlight 2 at an intermediate level.

Videos

The videos will not be released in "order" — that is to say the goal of the videos is for them to stand independently, allowing developers to dip into topics of interest. The first few will cover the basics, but after that I will be moving freely among elementary topics, intermediate and advanced topics. 

Tips of the Day

The tips of the day will range in size from one liners to full explorations of coding issues (with code examples attached) – often diving deeper into issues covered in the videos or the tutorials

Blog Entries

My blog entries will attempt to fill in the gaps, add a bit of a look behind the scenes and maintain some continuity in the story

Web Casts

The web casts will be a combination of deep dives and real-time HDI (How Do I) videos. The tentative schedule (soon to be finalized) looks like this:

Looking for Help

The best place to get the fastest answers is on the forum — though I admit some questions slip through the cracks.  But the forums is where everyone looks first and if your question is unanswered for a while, post a follow up. The tricks to getting a fast answer include:

a. Use a good subject that summarizes the problem so the folks who might know the answer stop and read the question. Good subject: "Urgent: Crashes when two buttons in same stack panel" – Bad subject "Help!!!!"

b. Give as much information in as few words as possible – tell more, not less, but shorter paragraphs are easier to read, and put the important information up front; write like you're a journalist, not a novelist.

c. Be very specific about versions and environment as possible – tell us how to reproduce the problem.

Writing to Me

You are always free to write to me and I love getting suggestions for improving my videos, tutorials, tips, blog entries as well as general complaints, praise, etc.   (Note, you can also leave comments about videos right on the landing page for the video, which is great!)

Writing to me with specific "I can't get this to work" questions will generally get a response pointing out that you'll get a faster answer on the forum, unless you are talking about an example I wrote, in which case, please do write as I'll want to fix it right away. (Unless it is 1.1, in which case, ahhh., welll…. sorry, Mr. Liberty is out, please leave a message…)

Writing to me asking when Silverlight will be released will get my standard "We've not released a date for that yet, though we are aware of how important it is for the community to know as soon as we possibly can tell you."

Dropping By My Office In Redmond

Since so many have asked, nope, I'm not in Redmond (though I visit a lot!). I work from my home in the suburbs of Cambridge MA. 

Reaching Me

The best way to reach me is via email, but there are dozens of other ways, including my blog and my personal portal.

Tip of the Day Release Schedule and Time

Tip of the Day will be released every day by 13:00 UTC-5 (Eastern) except when it isn't.

A number of folks have asked me for a step by step set guide to getting started programming with Silverlight 2. Here it is.

Useful tips

• Memorize this URL: http://silverlight.net – from there you can always find everything you need, including all the tools, tutorials, quick starts, videos, discussions, forums, demo programs, and much more
• Ignore and do not use anything marked Silverlight 1.1 – there are only two versions you care about as of now: Silverlight 1.0 (our release version) and Silverlight 2.0 (currently in Beta).

How to Get Started

1. Navigate to Silverlight.net (did you memorize that URL?) and click on Silverlight 2 Beta 1 Now Available!

If that link has scrolled off the news you can start by clicking on Get Started on the standard menu,

If you click on Get Started follow that by clicking on View Other Versions,

That will bring you to a link to the Silverlight 2 Beta 1 Runtimes. Click on that link.

These three steps from the standard menu will bring you to the same page as the one step from news,

Install the Silverlight runtime and when installed look in the upper right hand corner where you will want to click on Tools,

That will bring you to a page full of tools. I've isolated the essential tools that you'll want to download or follow the links to in the next image,

Note that this is not how the page appears; I've removed the inessential links and I'm showing only the ones you'll want to get started developing with Silverlight 2.

Getting Started Learning To Code Silverlight Applications

There is a lot of information available for learning to code in Silverlight. Of course, I'll start by recommending that you read through the available Silverlight 2 Tutorials (I'll be adding a new tutorial twice each month) and watching the Silverlight 2 videos 

and then finally, I'd return to the Learn page and work through any material related to Silverlight 2.

Don't forget about our Forums which are a great place to ask (and answer!) questions from other Silverlight programmers and Microsoft developers.

Be sure to check (or better, subscribe to!) the blogs (under Community)

That will make for a good start, and remember that lots of folks are adding new material every day; I personally will be adding two tutorials, half a dozen videos, a web cast and a couple dozen blog entries every month. So you'll want to stop by pretty often to keep up to date.

The Tip of the Day occasionally will delve deep into code (other days it will just provide a bit of useful information, or a tip, etc.)

When code is examined, however, I'll try to provide a complete working example, and to get us started, I've gone backwards in time and added links to complete sample applications for

Master Detail in Silverlight 2 (3/15)

Content – It Ain't Just Text (3/11)

Routed Events (3/10)

Each article now begins with a nice big link to the source code.

The source code should run well with the Beta 1 of Silverlight, but if you encounter any difficulties, please do let us know.

Just for the record, every example is tested on the public release of Visual Studio 2008 and the public release version of Silverlight 2 Beta 1.

Source Code – Same as Yesterday 

The Tip of the Day doesn't usually carry on a related series of postings, but data binding is so important that I'm making an exception this weekend. Yesterday we looked at laying out a form using a grid holding a DataGrid and a second grid to create a master detail relationship, with the end goal looking like this:

To populate the DataGrid that we've placed in the left column of the outer grid, we'll need a collection of business objects. To keep this simple, I've returned to the idea of a book class,

While it isn't strictly necessary for my Book class to implement INotifyPropertyChanged, it is convenient to have it do so, so that if the Book object is changed in the underlying data, the UI can be updated as well. Thus, each of the underlying private member fields  has a public property whose getter returns the private field and whose setter both sets the field and calls the Notify method to update the UI,

With the book class in place, it is easy to create a collection of Book objects based on the last few books I bought for my Kindle.  The steps are:

1. Create a member variable to hold the collection
2. Allocate memory for the collection
3. Add objects to the collection
4. Set the DataGrid to bind to properties of each individual object
5. Set the collection as the ItemSource property of the DataGrid

Create a member variable to hold the collection

Allocate memory for the collection

Add objects to the collection

You can imagine that we would normally be retrieving these objects from a database, web server, or other common data source. Here we are hand coding to keep life simple.

Set the DataGrid to bind to properties of each individual object

In this small snippet you can see that we've created an instance of the DataGrid, named it Books, placed it in the grid, and told it not to auto generate its columns (we only want two columns, not all of the properties of the Book!).  We then manually create two text box columns, one for the Title and one for the ISBN.

Set the collection as the ItemSource property of the DataGrid

If you look closely at the line numbers you'll see that I cut out most of the "Add Book" calls to focus on the call to setting the ItemsSource on the DataGrid (look at line 23 in the previous image!).  By creating this binding, when the page loads the collection is bound to the data grid and the two properties from each book object are displayed automagically,

More soon on displaying the details and then moving beyond!

Source Code 

Okay, its true, I was having so much fun at Disney World (and if you've not been on Soarin, then find a conference in Orlando, and sneak out to Soar, yowza!) that Tip of the Day kinda' sorta' stopped for a day or two. But we're back again with more in depth explorations of the tutorials, and responses to your email (which, I note did not slow down very much while I was on vacation, which is great!).

So, today I'd like to lay out a schedule and a project and over the next couple days pursue that project and a few other topics as well.

I've received quite a bit of email about data binding, and Tip of the Day seems like a good place to explore various aspects of this essential feature. I've created a relatively simple starter application that we can take apart, rebuild and then extend to explore various aspects of data binding; taking on other topics as we go.

This Silverlight application consists of an outer grid that has been divided into two columns. In the left column I've placed a DataGrid and in the right column I've placed an inner grid with details about whatever book is selected in the DataGrid.  There is plenty to do to make this look nicer, but for now I'd like to focus on the simple layout and the data binding.

Here's the XAML that divides up the grids. I've collapsed the controls that populate the grids to make seeing the grids themselves somewhat easier,

The outermost grid is defined on line 5 and named LayoutRoot. It serves as the container for everything and is defined as having the size 800×600 and having a background color of Bisque.

This outer grid has one row (with a top and bottom margin). The rows are created on lines 11-15. On lines 16-22 are two columns, with two margins and a padding between the rows. The first column is fixed at 400 and the second column takes up the remaining space.

The first row and first column is populated by a DataGrid which is shown collapsed on line 23 (we'll return to that shortly).

The first row and third column (skipping one column for the padding) is a new grid named details.

In essence, the DataGrid holds the listing of all the books, the details shows all the data about the selected book.

The Details grid consists of six rows plus two margin rows, and two columns with padding between and a margin on either side. The left part of the details grid is set to 150, the right side gets all the remaining space (after allocation for the padding and margins).

The actual contents (data) for the details are shown collapsed on lines 64-88.

The layout is easier to see in the designer, especially if we add the attribute to each grid "ShowGridLines=True"

The steps to building this application, once we have the basic layout are

1. Create the business object (the book)
2. Create a collection of business objects (a list of books, a database of books)
3. Bind a DataGrid to that collection
4. Handle the selection changed event when the user clicks on a book
5. Get the book object selected and present its details in the grid on the right

Piece of cake.

We'll start by creating the Business object and its collection in the next Tip of the Day.

Yes, we have Silverlight 2 Videos and

Yes we have Silverlight 2 tutorials

But don't miss Tim Sneath's entry about his incredible Hands On Labs. These are gems.

——–

Source Code 

In Silverlight 2, many of the controls have a content property where you might expect a text property. While it is common to fill that property with text, it isn't required that you do so.

For example, you might create an application with two buttons…

The code begins by defining three rows, the first of which serves as a margin, and two columns, the first of which is a margin. The first button (red arrow) fills its content with text. Notice also that the first button is self closing. The second button (blue arrow) is not self closing. It is placed in the second row, and all the same attributes are set save one: the content. That will be set in the property element Button.Content

Like matryoshka dolls

To demonstrate the power and flexibility of what you can put into a content property, I'm going to fill the button's content with a stack panel that will in turn contain 3 controls:

1. A text block with the word Play on the left
2. A pair of radio buttons on the right that will be arranged in a stack panel and surrounded by a border
3. In the middle will be a check box whose content will itself not be text, but rather will be a stack panel that will contain two radio buttons. But just to take this one step into the absurd, one of the radio buttons' content property will itself not be text but will be a Hyperlink button. 

Here's what it looks like with both buttons in the grid,

Let's build it up quickly so that we can get to that middle control.

We begin with the declaration of the second button and its content property,

In this block of code we see the second button declared and we see its content property opened. Within the content a stack panel is opened and declared to be horizontal so that the three controls will align next to one another rather than atop one another.

The first of the three is a TextBlock, for which we set various attributes for the foreground color, margin, etc.

The second element is a Checkbox declared on line 28, but which we surround with a Border on line 26, creating a bounding rectangle filled with a nice offsetting background color. Again, we use the Content property on line 32 to fill the check box with something other than text,

The contents of the Checkbox consist of a stack panel (line 33) to hold the radio buttons (lines 36 and 42 one atop the other. The first radio button, however, fills its content on lines 36-40 with a HyperlinkButton which not only presents the word Loud but also provides a link to the Wikipedia article on the term Loud. This could continue to regress indefinitely, but I finally called a halt, filling the content of the HyperlinkButton with text on line 39.

The third element in our button (remember the button?) is a stackPanel inside a Border that holds a pair of Radio buttons to set the musical style. The Rectangle on line 48 is a hack that I'm using to provide a bit of spacing; since I've given it width but no background color, it is invisible, but pushes the two elements apart.

When you run the application, all the inner elements work and you can wire event handlers to them (we'll cover that in another Tip of the Day) yet the button itself works through Routed Events.

Source Code

A routed event is is bubbled up the user interface tree whether or not it is handled by the object that receives the event. For example, if we return to a previous example in which we had a button within which were three sub-controls, the middle of which was a stack panel containing a  check box whose content had another stack panel with two buttons, the first of which itself had content which was an html button…

you can see that we want to be able to click on the radio button within the check box that is within the button and yet still have the click event bubble up and click the button. Yet, at the same time, we may want to respond to the click on the radio button or the check box being clicked. We saw the XAML for creating this control previously so there is no need to review that. It will be unchanged except that  we'll want to add just one control for this example, and that is a list box that can hold messages indicating which control has registered the mouse down event,

Note that to accommodate this helpful list box we need to add a row and a column to the grid, which is easily accomplished in our row and grid definitions at the top of the file,

With that in place, we need only create event handlers to see how the events "bubble up" even as they are handled.

Each of these event handlers is implemented to add a notice to the list box we added in the third column,

If you click on an outer object (such as the check box border, only one event fires,

Whereas if you click on an inner object (e.g., a radio button, you can see that the event is routed to the outer (containing) objects for handling as well.

In this image, the user has clicked on the inner radio button. Because MouseLeftDown is a routed event, the event bubbles up through the UI tree, from the radio button to the check box to the surrounding border (and on up through the other surrounding UI elements that don't have event handlers!)

Personally, one of the reasons that I opted to move to Microsoft tools long ago  was I got tired of LightSpeed telling me that the problem was the debugger and Periscope telling me it was the editor, and XYWrite telling me it was the compiler and… well you get the idea. 

Visual Studio 2008 is pretty amazing, but it isn't (yet) the end of software utilities for me, so here is my personal list of indispensable utilities for serious Silverlight programming.

NB: the usual rules apply – these opinions are mine alone, your mileage may vary, no warranty is express or implied, contents are hot, opening or using of product may void warranty.

1. Video Capture. A lot of material is now available via video; some of it is even good; and some of that is free. If the following conditions apply to you:-

Frequent access to videos (e.g., tutorials) that are legitimately yours to save to disk and
A relatively high speed (broad band connection and }
No easy way to save the video

Then you really want to take a look at WM Recorder.  Truly great.

2. Exam Diff Pro – best software I know for examining differences in files and directories. Incredibly easy to use, to customize and very reliable. Great for those times when you're either not sure which file is the one with the critical change, for merging two branches or for figuring out what it is you did that finally fixed that bug!

Finally, if you are going to do a presentation on Silverlight (or virtually anything else, you must have Mark Russinovich's Zoomit which is truly spectacular, and which you can used incredibly well in Scott Hanselman's presentation of MVC at Mix.

Once you get comfortable with Zoomit, it offers a few features you won't find anywhere else, including (a) very focused zooming and (b) the ability to draw straight lines and real rectangles.

Creating A How Do I Video – Step By Step

Let me bring you behind the scenes and tell you how I create a video. I'm very open to suggestions, but remember that my goal is to create great videos but to create six of them a month..

1. Decide what focused topic I'm going to demonstrate. The topic needs to be related to but build on something in the Silverlight Tutorials (these first few were too close to a repetition of what is in tutorials for my taste; the videos ought to extend the tutorials, not repeat them). 
2. Create an example program that illustrates the point I wish to make with sufficient complexity not to leave anything out but sufficient simplicity that the focus is clear and not obscured by programmer slight of hand.
3. With the working example on monitor 1, set monitor 2 to 1024×768 and fire up Camtasia 5.
4. Key to good sound: adjust my  Samson CO1U USB Condenser Mic sitting in its shock mount, placed on its floor stand. Set the balance equal at 80 and then use the Camtasia audio setting.

Key to good video (for picture in picture): Adjust my  Microsoft LifeCam (and one of these days follow Scott Hanselman's advice about cleaning up the clutter in my office!).

4. Set up all the programs I'll want to have appear in my video (typically Visual Studio, the Silverlight Help files, IE, etc. so that when "restored" they will open nicely in monitor #2, and set up the completed program in monitor #1.

5. Start recording, limiting the recording space to all of monitor #2 – do not use the wonderful utility Zoomit while recording – leave all zooming, callouts, etc. for post-production.

6. Turn picture in picture on and leave it on for the entire video (not to worry, we'll make me go away for most of the video, but we'll do that post-production; fortunately Camtasia has that on a separate track.

(Total set up time is about 1-2 hours)

7. Set up 30 frames per second (the videos up there now have 5-15 fps which is why the picture in picture is so poor!)

8. Record the video. Shoot for 30-40 minutes. Keep an eye on it; it is easy to go twice that!

9 Save the project and get ready to edit. Be sure to restore monitor #2 to full size

(Total Recording time is about 1 Hour)

10.. Two monitor editing, with the image on one monitor and the timeline/editor on the second. Edit with a light touch.

11. Leave minor errors in. Take egregious errors out. Take long waits out (e.g, waiting for Visual studio to set up,  waiting for the program to run the first time. But leave some time at the start and finish of the wait so that there is no jerkiness. Fade out PIP early and fade back in late.Inject new video only when absolutely required. 

12. Take out long pauses between words, and dead air of over 1 second, but again don't over do it or you sound like Max Headroom.  

11. Add zoom for two purposes:
    a: to remove dead physical space and thus make larger the target space (e.g., the editing area) 
                     (do this frequently)
    b: to focus tightly on a very specific area to focus the user's attention
                     (do this as needed)  
    c: Zoom slowly, (1.5 seconds?) so the user doesn't become disoriented. (or sea-sick)
    d. Put some time between zooms – at lest 5 minutes if possible.

12. Make the cursor itself, and especially clicking obvious:
       I tried highlighting the cursor with a circle (yuck!). Next thing is just to try a bigger cursor. 
       I do use a quick double circle for each click  (Extra points if you know which button has which color!)

13. Use call outs (highlighting, arrows, etc.) sparingly, but use them. .

14. Produce the video as required by our production team

15. Pass to our production team for prep for the site.

(Post Production Time: Typically 4 -6 hours)

(Total time to create a Silverlight 2  HDI video averages about 8 hours or 1/2 a Microsoft Day)

My HDI Goals for Q2 2008

• Improve Sound Quality by reducing ambient sounds
• Remove background clutter during PIP (screen?)
• Ensure steady and predictable pace of release (6/month)
• HDI Topics complement but do not repeate Tutorial Topics
• Guest Appearances (topic specialists)

-jesse