I did a talk on Silverlight 2 at the QCon conference in London yesterday.

I enjoyed it but there weren't a whole lot of people in attendance ( about 30 ) although I'd like to say thanks a lot to the people who did come along as QCon isn't necessarily the most .NET of conferences :-)

I thought it might be worth splitting the talk up and blogging the whole thing here as a way of perhaps getting more re-use of what I'd put together.

So...firstly, here's the slides in PPTX, PPT and PDF format

Here's the demos that I worked through;

1 "Hello World"

I just used Visual Studio 2008 and Expression Blend 2.5 March Preview here. First off, I created a new Silverlight project in Visual Studio 2008;

took the option to create a website to test the project;

and that brings up the XAML editor on my first page Page.xaml with a piece of XAML that looks like this;

<UserControl x:Class="SLOne.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>

I altered that piece of XAML so that it looks like this;

<UserControl x:Class="SLOne.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Gray">
    <StackPanel>
      <Button
        x:Name="btnGood"
        Content="Good" />
      <Button
        x:Name="btnBad"
        Content="Bad" />
    </StackPanel>
  </Grid>
</UserControl>

 

and the designer nicely updates in order to display what I've done;

I then wandered over to Expression Blend 2.5 March Preview and opened this solution in Blend.

I altered the backdrop of my layout grid;

and I gave my StackPanel a bit of a margin to more or less centre it within the grid.

 

I then switched my StackPanel's orientation to make it horizontal;

and I changed the HorizonalAlignment to centre;

and now my UI looks like this;

I then went and changed the template of these buttons. The next step I wanted was to replace the control template for these two controls. However, as far as I know, the 2.5 preview can't do templates yet ( unlike it does for WPF applications ) so I switched over to XAML view and pasted in some XAML based resources.

I've put the XAML file with these styles here for you to download. You might be surprised to see me resizing my content through the use of a grid here. If you want to ask more about that, drop me a line.

I altered my buttons to use this style,

and, with a minor bit of resizing, my design view now looks like;

I then went and added a simple storyboard that spins the button on the left;

 

With that in place, I exited timeline recording mode and then selected my btnGood button and got its events in Blend;

and added a handler for the Click event called OnClick;

and then pressed return and let Visual Studio spring up and let me edit that event handler;

    private void OnClick(object sender, RoutedEventArgs e)
    {
      spin.Begin();
    }

and then I press F5 and we've built a simple app with styled buttons and animations.

2 "Core UI Capabilities"

I wanted to show a lot of simple Silverlight capabilities in as short a period of time and also to keep it to pure XAML as much as possible so I built a simple Silverlight application that looks like this;

What it allows you to do is load a bunch of XAML files from the filesystem and then you can click on one to display it;

and it also has a Play mode which will go through all the files you've loaded and will display the XAML;

and it'll then show the results of what you've loaded when you click the button;

I've uploaded the application project here. It wasn't really built to be shared so bear that in mind.

It's just a quick way to flick through a lot of XAML very quickly. Here's the XAML files that I showed in this tool;

1. Line
2. Rectangle
3. Ellipse
4. Polyline
5. Polygon
6. Path
7. SolidFill
8. GradientFill
9. RadialGradientFill
10. Image
11. Video
12. ImageBrush
13. VideoBrush
14. Transformations
15. Composition
16. Animation
17. Text
18. Complex Drawing

3 "Silverlight Controls"

I used the same tool from section 2 to show some more XAML files with most of the Silverlight controls in them;

1. Border and Button
2. Calendar
3. Checkbox
4. DatePicker
5. HyperLinkButton
6. ListBox
7. RadioButton
8. RepeatButton
9. ScrollBar
10. ScrollViewer
11. Slider
12. TextBox
13. WatermarkedTextBox
14. Layout - Canvas
15. Layout - Stack Panel
16. Layout - Stack Panel
17. Layout - Grid and Grid Splitter
18. DataGrid
19. MultiScaleImage

Now, when we hit MultiScaleImage I can't show that in its entirety using XAML so I switched to a separate Visual Studio project which I've shared here.

This presents an image;

and I can zoom the application right into the eye of the central image and a fish within it where there are some more images;

and, in fact, if I zoom further into the central image here, there's some more images hidden in there too.

4 "Control Features"

I used the tool from section 2 to show a few more XAML files which show a few features of the Silverlight controls - namely that they support arbitrary content, that they can styles applied to their properties and then finally to show that they can be templated. I've included the XAML files that I showed here;

1. ContentControls
2. SimpleStyling
3. Templating

I should say that I got the fish for my templating example from here  - I didn't draw it. I should also say that the display application has a hacky implementation of a "WPF-style" Viewbox to handle some resizing issues for me.

Beyond that I also wanted to show some simple data binding and some list-based data binding so I used a couple of applications.

The first one looks like this;

and all the things on the screen are bound to a simple class with a Value property on it. I've put the solution file for this here.

The second one looks like this;

and it has a data bound listbox on the left hand side and a set of data bound controls on the right hand side that syncs to the listbox selection. I've put the solution file for this here.

5 "Network, Files, LINQ, HTML Bridge"

I wanted to demonstrate some bits of the .NET Framework in Silverlight 2 but it's big so it's hard to try and be comprehensive in a 60 minute slot :-)

So, I built 2 applications. One is an Mp3 player which calls web services and using isolated storage to cache Mp3 files locally.

This is how the app works and/or how it has to be used (i.e. it's not very flexible :-));

1. The app calls out to a webservice to get a list of album data (hardcoded in the service)
2. The list of albums is databound onto a listbox.
3. The listbox selection change fires.
4. The app calls out to a webservice to get a list of tracks for the current album.
5. The list of tracks is datatbound to a listbox.

First time around, you have to set the cache size using the "Set Cache Size" button otherwise things won't work. This resizes the isolated storage quota size for the user for the app.

When you select a track and click play, I look for the mp3 file in isolated storage and play it from there. If it's not there then I use WebClient to asynchronously download it.

Couple of notes on this app - it's not very robust :-) Not entirely sure that its threading is quite right but it served my purpose. Also, I've replaced the mp3 files I used with a dummy mp3 file.

The solution is here.

The second app just demonstrates a few interoperability features betweeen Silverlight .NET code. It looks like this;

This is how this one works;

1. The application runs. .NET code creates and registers a scriptable object that has a public event on it which fires a list of SalesItem types { Name, TotalSales } on it. It also syncs up an event handler to the "Click Me" button in the HTML DOM.
2. You click the Initialise button. Javascript code syncs up an event handler to the public event on the object that was registered in (1).
3. You click the "Load File..." button. We pop open the file open dialog and look for an XML file. I've placed an example one into the solution file.
4. We load the XML file and run a LINQ query against it in order to produce an array of SalesItem types.
5. If the ".NET Builds Table" checkbox is ticked then .NET code is invoked to reach into the HTML DOM and populate a DIV with an HTML table. This is the green table of data on the right hand side.
6. If the ".NET Builds Table" checkbox is not ticked then the scriptable object from (1) fires its event which is sync'd in Javascript (from (2)) and the array of SalesItem types is passed into the Javascript which uses it to build the HTML table on the right (it's coloured white in that case).

I've attached the solution file for this one here.

And that was pretty much my 60 minute talk - as always, don't assume any of this is best practise or anything like that. It's just a bunch of quickly knocked together demos that might be useful to someone else and so I thought I'd share.

Finally - let me know if you spot broken links or corrupted downloads here, I uploaded half of this from a hotel room and it may not quite have got to the network correctly.