What’s New In Silverlight 3

I had the pleasure of presenting What’s New In Silverlight 3 both at TechEd this year and then again to the Redmond .NET Developer’s Association,

I think the best way to make this material available is to post my slides here along with the source code, and then to point to videos and blog entries that cover this material (either existing or as I create it in coming weeks).

Please note that this presentation was given using Silverlight 3 Beta.

• If you are reading this and we are still in Beta, then you can get what you need by clicking on the image below, but please read the caveats carefully about using the Beta version.

• If you are reading this after we’ve released the RTW version of Silverlight, be sure either to obtain the updated version of the code or to proceed with caution as there may be small differences from the beta.

The slides are here as a zip file.

The Demos and Supporting Videos

For the first demo, 3d flip,  I recommend reviewing Using 3d Transforms Part 1 and Part 2.

For the second demo “The Slider and the TextBlock” you’ll want to look at the video Element to Element Binding.

The third demo is on Easing, and we have a good video on that here, as well as a mini-tutorial here 

Demos #4 and #5 are on Pixel Shading and bitmaps. Best we can do for you for now is this excellent video on Pixel effects.

The Bounce demo shows how messaging works and is so much fun you won’t need much to go with it.  After that you come to the demo for “based-on” styles.

Based-On Styles

I don’t have an entry for that for you yet, but one is coming very soon. For now, take a look at the following Xaml which is the heart of the demo:

   1: <Style x:Key="StandardButton"

   2:        TargetType="Button">

   3:   <Setter Property="Width"

   4:           Value="100" />

   5:   <Setter Property="Height"

   6:           Value="35" />

   7:   <Setter Property="HorizontalAlignment"

   8:           Value="Left" />

   9:   <Setter Property="VerticalAlignment"

  10:           Value="Bottom" />

  11: </Style>

We start by defining the style for a standard button, setting a width, height and alignments.  This style can be assigned within the Xaml to any button as follows:

   1: <Button x:Name="Button1"

   2:         Content="I am a standard button"

   3:         Style="{StaticResource StandardButton}" />

Now we want to create a Big button. A big button style is just like a standard button, except that it is taller and wider. Its alignment is the same.

   1: <Style x:Key="BigButton"

   2:       BasedOn="{StaticResource StandardButton}"

   3:       TargetType="Button">

   4:    <Setter Property="Width"

   5:          Value="250" />

   6:    <Setter Property="Height"

   7:          Value="50" />

   8: </Style>

You can see that what is key in this definition is the new BasedOn property.  You assign this new style exactly as you would any other style…

   1: <Button x:Name="Button2"

   2:         Content="I'm a big button"

   3:         Style="{StaticResource BigButton}" />

You can base a style on a style that is based on another style. In our final example, we’ll create a BigFont button that builds on the BigButton but sets a larger font.

   1: <Style x:Key="BigFontButton"

   2:     TargetType="Button"

   3:     BasedOn="{StaticResource BigButton}">

   4:    <Setter Property="FontSize"

   5:        Value="24" />

   6: </Style>

In this case, BigFontButton is “inheriting” its width and height from BigButton and its alignment from StandardButton.  When we assign this to Button3…

   1: <Button x:Name="Button3"

   2:         Content="Style: Big Font"

   3:         Style="{StaticResource BigFontButton}" />

The results are just what we hope for:

DataValidation

The DataValidation demo is, if I’m honest, my favorite. I particularly like that this works by combining two existing parts of the Silverlight framework:

• The ability to have the data object test a value and throw an exception if the value is invalid, which is turned into an error by the binding object and returned to the UI
• The Visual State Manager which makes responding to that error either trivial or fall within a well established pattern.

Another thing I like about this feature is that you can and will use this long before you have a deep understanding of how it works.  That can be frustrating when you want to modify the behavior, but all the pieces of the puzzle are available, and here’s a road map to getting there.

First, Visual State and Templates

I would approach this by temporarily setting aside the issue of error handling and start with visual states and templates.  We have a series of videos that walk  you through this, and I’d view them in this order:

• Creating Styles
• Templates Without VSM
• Templates and VSM
• Building a Skinnable Custom Control Part 1
• Building a Skinnable Custom Control Part 2
• Building a Skinnable Custom Control Part 3
• Building a Skinnable Custom Control Part 4

If you are serious about obtaining a deep understanding of all this, I’d also read the following mini-tutorials

• Intro to Custom Controls Part 1
• Intro to Custom Controls Part 2
• Creating Custom Controls
• Generic.xaml
• Dependency Properties Part 1
• Dependency Properties Part 2
• Dependency Property Precedence
• Custom Controls – The Denouement

With all that done, error handling will be almost self-evident.  The data entry classes have a new Visual State Group: ValidationStates that consists of three possible states

• Valid
• InvalidUnfocused
• InvalidFocused

The sequence of events is that when the user attempts to enter data into one of the data entry objects (e.g., a TextBox) that data is transmitted to the DataBinding engine which asks the data object to which the TextBox is bound if the data is valid.

In the demo, we create a Book as a data object, and the book has an ISBN field.  We bind a TextBox to the ISBN field and when the user enters the ISBN the DataBinding object asks the book instance if the ISBN is valid.  The Book tests for three conditions:

1. The data must be 10 characters long or it throws an exception with the exception message “Must be 10 characters long”
2. The data must consist only of the numerals 0-9 or the letter X or it throws an exception with the exception message “must consist only of the numerals 0-9 or the letter X”
3. The last character must match the checksum of the first 9 digits (the algorithm is described in Wikipedia) or it throws an exception with the exception message “checksum not valid.”

If you have set your flags properly (to be described in a minitutorial on data validation) the exception is turned into a command on the UI to change the visual state from Valid to either InvalidUnfocused or InvalidFocused.  What happens then is entirely up to whomever created the behavior for those visual states.

Rather than leaving you to your own devices, the controls team has provided default Visual State behavior for the following controls:

• TextBox
• CheckBox
• RadioButton
• ListBox
• ComboBox

and in the next (post-beta version) PasswordBox

That behavior is to turn the control red, and when you click back in, to display the message from the exception,

You are of course free to change all of this by templating this control just as you would any other (which is why you invested all that time reading about templating!)

Navigation

The final demo doesn’t exist. I just open up Visual Studio and create a new project clicking on Silverlight Navigation Application as shown in this cropped image,

Visual Studio creates the infrastructure for you, opening with four Xaml files: MainPage.xaml and in the Views folder, AboutPage.xaml, ErrorWindow.xaml and HomePage.xaml.  Running the application (without touching it in any way) gives you a multi-page application ready to be customized to your needs.

More details to come on Navigation and especially on Validation.