Mike Taulty's Blog
Bits and Bytes from Microsoft UK
QCon Talk - Silverlight 2

Blogs

Mike Taulty's Blog

Elsewhere

Archives

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;

image

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

image

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;

image

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

image

I altered the backdrop of my layout grid;

image image

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

image

 

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

image

and I changed the HorizonalAlignment to centre;

image

and now my UI looks like this;

image

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.

image

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,

image

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

image

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

image

image 

image

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

image

and added a handler for the Click event called OnClick;

image

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;

image

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;

image

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

image

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

image

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;

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;

image

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;

image

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;

image

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.

image

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;

image

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.


Posted Fri, Mar 14 2008 2:53 AM by mtaulty
Filed under:

Comments

Community Blogs wrote Silverlight Cream for March 14, 2008 -- #223
on Fri, Mar 14 2008 3:49 PM
Bill Reiss posted his SL2 Game Loop part 1, Pete Brown on XAP, SL2 startup, and the Uri Issue, Daniel
Mike Ormond's Blog wrote Intro to Silverlight 2
on Sat, Mar 15 2008 8:22 AM
Mike's posted about his talk at QCon earlier this week which is a great intro to Silverlight 2 with links
MSDN Blog Postings » Intro to Silverlight 2 wrote MSDN Blog Postings &raquo; Intro to Silverlight 2
on Sat, Mar 15 2008 8:56 AM
Screen Handlers is here to save the world » Blog Archive » Fast Monday links wrote Screen Handlers is here to save the world &raquo; Blog Archive &raquo; Fast Monday links
on Mon, Mar 17 2008 10:33 AM
ui central download wrote ui central download
on Wed, Mar 26 2008 2:05 AM
ui central 4 download wrote ui central 4 download
on Wed, Mar 26 2008 2:06 AM
how do i get an onclick to show an image wrote how do i get an onclick to show an image
on Thu, Apr 24 2008 3:26 AM
net xaml ui example code wrote net xaml ui example code
on Thu, May 8 2008 10:59 PM