Building compelling user experiences with Silverlight and the Windows Live Platform

Author : Jason Kelly - Senior Solution Architect - Akona Consulting

This article appeared in the Expression Newsletter; subscribe to get the next issue.

The art of building compelling Web experiences took a giant leap forward with the introduction of Silverlight and Expression Studio. Back up your great user experience design with the online services users already trust. Windows Live Services keep users coming back to your site to communicate, search, and share their data.

The Windows Live Services are designed to be building blocks for next-generation web experiences. The platform provides rich services that you can add to your site and give your users access to the services they already know and trust. Microsoft is providing APIs for core Live services - such as Windows Live Messenger, Virtual Earth, and Live Search - so that developers can access and use these services in the applications they create.

There are many resources available to get you started quickly on developing with Windows Live. Foremost are the Windows Live Quick Applications. The Quick Applications provide free source code and hosted applications that show how to get the best out of the Windows Live Services. Browse http://dev.live.com/QuickApps to see the full list of Quick Applications.

Now let's explore some of the experiences you can create with Windows Live Services.

Windows Live Messenger

With over 300 million active users around the world, the Windows Live Messenger system is a massive social network. Now you can bring the power of that network onto your own site with the Windows Live Messenger Library. The Messenger Library lets you add instant messaging interactivity to any site.

The Windows Live Messenger Library is a JavaScript client API that lets you build Messenger onto your site. The library handles secure authentication and communication with the Messenger system, leaving you to focus on the user experience. It's especially well-suited to innovative user experience designs in Silverlight.

By adding Messenger, your site becomes part of this massive social network. Messenger users can sign in and chat inside your site without switching out to the Messenger application. This allows your application to be the hub of your users' existing social network, providing an immersiveness that will bring them back again and again.

One example of an immersive Messenger experience is Tafiti Search Visualization (http://tafiti.mslivelabs.com). Tafiti shows how to weave Windows Live Messenger together with Silverlight and Live Search to create an immersive social search experience. In Tafiti, you can sign into your Windows Live Messenger account and collaborate on Web searches with other users. It's done with an intuitive, drag-and-drop Silverlight interface.

Tafiti's source code is freely available for you to explore, learn, and adapt to your own site. Visit http://dev.live.com/QuickApps to get the code.

If you're interested in integrating Messenger into your own rich interactive application, the Windows Live Messenger Developer Samples are another great starting point. This resource includes an illustrative Silverlight interface driven by the Messenger Library.

This is an example Web application that shows how to use the Windows Live Messenger Library to drive a Silverlight UX. To start developing a Messenger UI for your site, go to http://www.codeplex.com/messenger and click on the Source Code tab. Once you get the source code, open the Silverlight sample in Visual Studio 2008. You'll need the Silverlight Tools installed.

Inside the MessengerSample solution, there are three projects. Take a look at the MessengerSample project, and you'll see the three XAML files that make up the interface:

Page.xaml: The overall user interface of the application, including the sign in control and contact list
ConversationWindow.xaml: The area that displays the IM conversation history, and the input field for typing messages
App.xaml: The main application class that binds everything together and defines control styles

You can start customizing these XAML files to build a new Messenger experience.

Virtual Earth

If your application calls for mapping, driving directions, or aerial imagery, Virtual Earth is the best way to meet these needs with a slick AJAX user interface. It's easy enough to include Virtual Earth in a traditional HTML/JavaScript web site, but what building it into a next-generation Silverlight user experience?

The Windows Live team continually explores new ways to seamlessly integrate Virtual Earth into RIAs. You can see the state of the art in Visit Planner, another one of the Windows Live Quick Apps.

Visit Planner shows how to build a application that customers can use to plan, save, and share their trips. The adoption of a rich Silverlight UI allows compelling design and an absorbing, intuitive experience.

You can try out Visit Planner at http://visitplanner.mslivelabs.com/.

While the Virtual Earth part is an HTML/Javascript control, it is made a first-class citizen in this Silverlight application. The Virtual Earth control is shown in a HTML <div>, but transparent Silverlight controls are overlaid on top of it.

The best way to learn how to create an interface like this is to dive into the code. Just like all the Windows Live Quick Applications, the source code for Visit Planner is a free download. Anyone can get the source code and modify it to create a new web application.

To get the source:

Go to http://www.codeplex.com/WLQuickApps and click the Releases tab.
Download the latest source code release.
All of the Quick Apps come in one source code package. To see the Visit Planner source code, unzip the package, and open up the WLQuickApps.VisitPlanner folder.

Launch Visual Studio and open VisitPlanner.sln. Visit Planner has several projects, but VESilverlight is the most important. It contains all of the Silverlight code and the interaction with Virtual Earth.

Silverlight + Silverlight Streaming

If you're building rich media into your applications, then Silverlight Streaming by Windows Live will supercharge your site. Silverlight Streaming lets you host streaming media and rich interactive applications without the cost of streaming servers and bandwidth. With Silverlight Streaming, you get immediate high-performance, global-scale application and media delivery.

To see Silverlight Streaming in action, go no further than (where else?) the Windows Live Quick Applications. The Retail Quick Application demonstrates a "Wall of Video" hosted in Silverlight Streaming. The demonstration application is available at http://retail.mslivelabs.com:

When you visit the Retail site, the Silverlight application is downloaded to your browser. After that, when mousing over one of the products, streaming video fires up immediately. What's more, this video is being streamed directly from Silverlight Streaming - meaning no bandwidth-hogging streaming video from your web servers.

The workflow for building a site like this is roughly as follows:

Encode your video with Expression Encoder
Upload your video to Silverlight Streaming (http://silverlight.live.com)
Use the Silverlight Streaming video URL in your application

Retail demonstrates a new model of application architecture enabled by Silverlight 2 and Silverlight Streaming. The end-user’s browser hosts a rich interactive application with an engaging user experience. Delivery of streaming video is offloaded from the web server to the Content Delivery Network provided by Silverlight Streaming.

Get Started

The Windows Live Services are designed to give you the best back-end support available, so you can focus on creating the best user experience possible.

The first stop for information on Windows Live Services is http://dev.live.com/. This site links to blogs, a mashup showcase, and information on each of the Windows Live Services

For sample applications and free source code, download the Windows Live Quick Applications from http://dev.live.com/QuickApps/.