Silverlight Sample Application – Part 5

In this series blog post I’m completing this run about the sample Silverlight application that was used in the Ottawa and Toronto code camps this year.

You can get the source to the application on CodePlex.

The purpose of the application (other than to show people how to get started with Silverlight application development), was to be an IT event information application.  The fourth ‘page’ of the application shows a map of the area indicating the location of the event.

Here it is showing the location of the Ottawa IT Day event.

20100613 map

This was done using the Bing Maps Silverlight control.

There are 4 key resource links for using this control.

To use the control you:

  • Install the SDK (which will place a couple of important DLLs in a folder you specify when installing)
  • Add a reference to the SDK DLLs to your project.
  • Add the MapControl namespace to your page XAML

20100613 map ns

  • Add the control to your XAML

20100613 map xaml 

  • Setup the control how you link in your code behind file

20100613 map code

The ApplicationId is obtained from the developer portal where you’ll need to agree to various licensing conditions.  With the Id the control will show a message indicated that it needs to be licensed.

A specific ZoomLevel is set in this example and the view is set to road mode.

The Location is set up from properties on the Application class and initialised elsewhere in this case.

The map is centred on the desired location and a Pushpin added there too.

A piece of control tree is created in code and this is added to the map and positioned at the desired location.  See the interactive SDK to learn how to add information to the map.

This control is extremely powerful and can be seem working live in the Silverlight page designer inside Visual Studio, e.g. set the ZoomLevel as an attribute on the XAML map element and you’ll see the map zoom in live!

Quite straight forward and you can (as with any XAML-related coding) chose for the most party whether to place settings in XAML or in code.

My only real issue with the control is the licensing for use of the control on intranets.

This concludes the posts on the sample application.

Check out other series blog posts for previously posted information about this sample application.

Silverlight Sample Application – Part 4

In this series blog post I’m continuing to talk about the sample Silverlight application that was used in the Ottawa and Toronto code camps this year.

You can get the source to the application on CodePlex.

The purpose of the application (other than to show people how to get started with Silverlight application development), was to be an IT event information application.  The second ‘page’ of the application shows information on the tracks and sessions available.

Here it is showing session information for the Ottawa IT Day.

20100613 sessions

This data was published using an OData-based service which is included with the source code.

Silverlight 4 includes networking classes specifically for OData.  We can use the Add Service Reference feature to add proxy classes which in this case include EventDataContainer.

20100613 sessions code

Silverlight includes LINQ to OData client classes so we can create a LINQ query on the container client proxy class which will be translated (when enumerated) using the magic of IQueryable-based LINQ implementations into an OData URI.  We create a DataServiceCollection based on the Track proxy class and assign it to the ListBox so that results can be shown once this DataServiceCollection is populated.  We then set up a completion handler on the collection and then load the collection asynchronously which causes the LINQ query to be converted.

Once the query completes, we’ll have a set of Track objects in the collection that will appear bound in the UI.  For each Track object we then asynchronously load the Session information underneath each Track.

DataServiceCollection is great because it includes the INotifyCollectionChanged implementation that works with the Silverlight binding system to show the session information under each track as the data loads in.

Check out the code to see the bindings in the XAML.

Check out other series blog posts for more information about this sample application.

Silverlight Sample Application – Part 3

In this series blog post I’m continuing to talk about the sample Silverlight application that was used in the Ottawa and Toronto code camps this year.

You can get the source to the application on CodePlex.

The purpose of the application (other than to show people how to get started with Silverlight application development), was to be an IT event information application.  The third ‘page’ (yes – I’ll get to the second page in the next post) of the application shows tweets about the event.

Since the Ottawa and Toronto code camps happen in April and May, here’s the same page set up to show tweets tagged with #teched for this month’s Microsoft TechEd confeference.

20100613 tweets

To get the data, we can use one of the great methods available in Silverlight to get data – the WebClient class.  This class is often used when you are connecting to a RESTful service which is documented somewhere but is not self-described with metadata (like many SOAP/OData web service where Add Service Reference in Visual Studio can often be used to create a proxy class).

All network data access in Silveright must be asynchronous to avoid the UI from freezing up.

We create out WebClient, setup a completion event handler and start an asynchronous download of a string using the Twitter Search API.

20100613 tweet behind

Once the completion event fires, we make sure there’s no error and then pass off processing of the received string to a utility function to get back objects we can bind to on our ListBox.

The Twitter Search API response format is document (or discoverable at least) so we set up a class to hold the items of a tweet we are interested in, and use LINQ to XML code to pull out the appropriate XML elements from the Twitter API Atom feed.

 20100613 tweet util

It’s that simple when you get the hang of LINQ to XML.  It’s a must learn for the modern .NET developer.

With objects to bind to we need to create a DataTemplate for our ListBox ItemTemplate (the template used every time the visual tree for a new item needs to be generated).

20100613 tweet xaml

And there you have it.  It’s surprising there aren’t even more Twitter Clients coming out of the woodwork.

Check out other series blog posts for more information about this sample application.

Silverlight Sample Application – Part 2

In this series blog post I’m continuing to talk about the sample Silverlight application that was used in the Ottawa and Toronto code camps this year.

You can get the source to the application on CodePlex.

The purpose of the application (other than to show people how to get started with Silverlight application development), was to be an IT event information application.  The first ‘page’ of the application shows the event website.

20100613 home

To do this, our page simply includes the web browser control in the XAML…

20100613 webbrowser

and a bit of code in the code-behind class also inheriting from the provided Page class constructor.

20100613 webbrowser 2

Simple enough right?

Wrong.

This code will fail when you try to debug/launch the application in a web browser.  The web browser control requires the application to be installed out-of-browser by the user and with elevated full trust.

20100613 oob

In the project properties, running Out-of-Browser needs to be enabled, the settings configured and the “Require elevated trust when running outside the browser” needs to be checked.

So HTML content and be hosted alongside the Silverlight control in a web page, but to host HTML content inside the Silverlight control you need the user to agree to the elevated trust and run the application outside of the browser.

To avoid making this page useless when the application is run inside the web browser, code was added as follows:

20100613 oob detect

This code detects if the code is running out of browser or not.  If it’s in-browser then the browser control is hidden, and a hyperlink control added to the main grid allowing the user to click it and be taken to a web page using their default web browser.

Be sure to check out the other features a Silverlight 4 application can use if it runs out of browser.

Check out other series blog posts for more information about this sample application.

Silverlight Sample Application – Part 1

In this series blog post I’m starting a new set to talk about the sample Silverlight application that was used in the Ottawa and Toronto code camps this year.

I was given the whole Silverlight track to develop and lead in Ottawa and decided that I wanted to use the opportunity to show how a complete sample application can be built, deployed and adapted for Windows Phone 7.  At the same time I wanted to introduce many of the topics involved with Silverlight development.

Below is the chart showing the 5 sessions presented along with a section at the bottom showing a few other major topics we didn’t have time to include.

20100613 topics 

So, a fair challenge to pull off in 5 1-hour sessions.

This was made possible through the skills of my fellow track presenters: Peter Henry, Sylvain Boucher & Louis-Philippe Pinsonneault.  In particular Peter was my right-hand man and come up with the application concept.

I also repeated the Essentials and Data Matters sessions at the Toronto Code Camp.

You can get the source to the application on CodePlex.

In the next few posts I’m going to explain how parts of the application were built including use of the web browser control and out-of-browser applications…

20100613 home

using LINQ to XML to get data from Twitter…

20100613 tweets

connecting and Binding to OData…

20100613 sessions

and using the Bing Maps Silverlight Control…

 20100613 map  00

Overall the application leveraged the Silverlight Navigation Application project template for navigation.  The template is provided with the Silverlight Tools for Visual Studio.

So follow the series posts to learn how it was done.

In a later set of posts I’ll talk more about Silverlight data in more detail.

Silverlight From The Client To The Cloud: Part 5 – Image Data Binding

In this series final blog entry I’ll show how to enhance Silverlight binding to show image data as shown in a sample application I created that was demonstrated across Canada in Microsoft’s EnergizeIT tour.

20100514 claim

As I explained in Part 4 of this series, the data for the image above was downloaded from an ADO.NET Data Services (or an OData service) and displayed in the UI. 

Typically in Silverlight, an Image element has its Source set to the URL of an image and Silverlight takes care of downloading the image.

image

When the image needs to be dynamically set, you may not have a URL available (either different URLs or one that takes a query string parameter to dynamically return an image) to get the image you want.  Such a URL capability may be worth thinking about in the long run (given suitable security) using something like Windows Azure Storage (and its associated Content Delivery Network). 

What you may have is the bytes for the image returned to you through some data service request.

In that case you’ll need a binding convertor if you still want to use binding.

We create a class based on IValueConvertor which in this case can take the bytes and create the necessary BitmapImage as an acceptable source for the Image element.

image

We then need to use this in the XAML so we declare our class namespace in the XAML namespace…

image

then declare a resource instance based on the class, here called “converter”

image

then when we bind our image to the binary data stream, we use our converter…

 image

There are many uses for converters, typically converting between text and structured types, but this conversion between binary data and an image source is often useful and allows us to stay within a binding-based architecture.

This post concludes this series.

Silverlight From The Client to The Cloud: Part 4 – OData

In this series blog entry I’ll show that data from an ADO.NET Data Services (the OData predecessor) can be retrieved and displayed in a sample application I created that was demonstrated across Canada in Microsoft’s EnergizeIT tour.

Silverlight 3 includes support for consuming ADO.NET Data Services which use a RESTful architecture to expose CRUD operations on data in the cloud.

OData is a Microsoft-published open protocol which builds on ADO.NET Data Services.  Full OData support is not included in Silverlight 3, though a CTP add-on was made available.  Silverlight 4 does include support for consuming OData.

WCF Data Services in .NET 4.0 includes the ability to publish OData-based data sets based on entity framework models, CLR objects or a custom-built publisher.

OData (and its predecessor) is typically used for publishing and consuming sets of data, but in the sample application, we published sample insurance policy, claim data and customer activities using ADO.NET Data Services, and allowed client software to query the data for a single customer as shown here…

20100514 home

20100514 claim

In this case, not only was basic text data loaded into the UI, but binary image data was loaded into the application and geo-coordinates used with a Bing Maps Silverlight control to show a location.

In Silverlight 3 there are LINQ to ADO.NET Data Services classes and in Silverlight 4 (or the 3 add-on CTP) there are LINQ to OData client classes.

Code like the following allows Silverlight to easily connection to an OData service (after an earlier Add Service Reference) and query deeply into the datasets.

image

All such requests must be handled asynchronously in Silverlight, though inline anonymous delegates in C# (shown above) are very handy for processing the asynchronous results with inline code (though typically with more exception handling code than shown here).

Binding or imperative code (or MVVM) is then typically used to show the results in the UI.

This sample application represents a fairly basic case.  Silverlight 4 + OData opens up some great possibilities and you can see more in my Dot Net Rocks TV episode on how to create an OData services in .NET 4 WCF Data Services and consume it in Silverlight 4.

Silverlight From The Client to the Cloud: Part 3 – 3D UI Context

In this series blog entry I’ll explain how one can use perspective 3D in Silverlight 3+ to create interesting UI transitions as shown in the following screenshot sequence from part of a sample application I created that was demonstrated across Canada in Microsoft’s EnergizeIT tour.

Initial state prior to 3D animation…

20100514 home

the central UIElement is leant back and faded out in a short animation…

20100514 fade back

New UI is shown on top… using the energy reveal shown in Part 2 of this series….

20100514 claim

… and once this UI is removed, the UI behind is faded back in and pulled back up to its start position.

 

To do this means declaring a Projection property element on the component…

image

Property elements in XAML provide a means to declare a property that take an object rather than a simple value.  It would be difficult or clumsy to try to declare all the properties of an object (and even any sub objects) in a single attribute value.

We then need a storyboard to animate the X rotation of the projection on the UI element and the opacity of the UI element.

image

This has given you one possible use for the 3D projection addition in Silverlight 3.  Retaining elements of you UI on screen (but put ‘aside’ or back in this case) can help the user to easily keep track of their current context or position in the flow of the application UI navigation.

Silverlight From the Client To The Cloud: Part 2 – Clip Reveal Animation

In this series blog entry I’ll explain how I did the ‘electric energy’ reveal shown in the following screenshot sequence as demonstrated across Canada in Microsoft’s EnergizeIT tour.

 

20100514 reveal 1

20100514 reveal 2

20100514 reveal 3

20100514 reveal 4

A key feature of this reveal animation is that the underlying UI appears to be ‘generated’ or ‘materialised’ by the ‘energy bar’ as it swoops down the page.

To create the adaptable energy bar, I created a ‘dot’ (that can be stretched into a line) of energy ‘glow’ using two rounded-corner rectangles – one inside the other – with blur effects…

image

A ‘reveal’ storyboard sequence ‘framework’ was created to reveal the dot (set to fully transparent initially above), stretch it horizontally, move it down, shrink it back to a dot and fade it out.  It’s a framework because I designed the overall animation so that it could be applied to any UIElement – generally a user control.

Here are the storyboard elements in the ‘reveal’ storyboard for outer ‘ring’ of energy.  A similar set is used for the inner ‘ring’.

image

In order to make the energy bar appear to ‘generate’ or ‘materialise’ the controls beneath, a clipping rectangle will be applied to the UIElement being revealed.  Then, the other key storyboard element needed is something to animate the Y element of a TranslateTransform that is applied to the clipping rectangle…

image

The TargetName of this storyboard element will need to be set as appropriate. I created a function called EnergyReveal taking a UIElement argument, to do this and other necessary tasks.

A few of the key steps in this function are:

  • Make the target UIElement visible and call UpdateLayout() on it, to make sure the width and height of it are known.
  • Create a rectangle big enough to cover the target UIElement – this will be the clipping rectangle.
  • Assign the rectangle as the clipping region for the target UIElement.
  • Creation an new TranslateTransform and assign it to the the clipping rectangle.
  • Set the TranslateTransform as the target of the TranslateAnim storyboard element above.
  • Calculate the initial X and Y values for the position at the top-middle of the UIElement where the energy dot will appear and grow from.
  • Position the outer/inner elements of the energy dot and set values on the storyboard framework to match the size of the UIElement so the energy bar trajectory matches the edges of the target UIElement.
  • Start the reveal storyboard.

It’s possible to mix and match the location of the ‘framework’ components between XAML and code.  This is just the way it evolved in this case.

A similar EnergyHide() function sets things up for the energy bar to swoop down the screen again, but with the clip going downwards so that the target UIElement appears to be ‘dissolved’ from the top down.

I’ll leave it as an exercise to the reader to reconstruct such a framework to their liking, but hopefully this has given you an idea of the kind of interesting reveal transition you can create in Silverlight.

Silverlight from the Client to the Cloud: Part 1

This post is part 1 in one of several series.  The series gives you a glimpse into some of the experiences and capabilities available with Silverlight and gives pointers on how to get started with them.

From March 30th to April 22nd this year, the Developer & Platform Evangelism Team at Microsoft Canada delivered a combination of all-day From Client to the the Cloud tour  and evening Community Connection Series events in 19+ cities across Canada as part of EnergizeIT 2010.

The EnergizeIT events give an idea of what’s possible.  To compliment those events, the TechDays events by Microsoft Canada coming up again this year in the Autumn season, give attendees the opportunity to learn more about how they can use Microsoft products and technologies.  I’ll be speaking there again this year on topics that may include Silverlight, Azure, OData and Windows Phone 7. 

At each of the recent EnergizeIT events, a 2.5 hour demo showed the tip of the iceberg in terms of what’s possible with some of the latest Microsoft tools and technologies from the viewpoint of developers and IT professionals.  They covered technologies and products included .NET 4.0, Visual Studio 2010 (including Lab Manager), Hyper-V, Windows Mobile, Office 2010, SharePoint 2010, PowerShell, System Center, the Windows Azure Platform and Silverlight.

The demo covered the user, developer and IT pro experience for a new car insurance business.  It showed how a consumer could use software on a Windows Mobile device to capture critical information when a collision occurs as well as how they can review and connect with the insurance company back at home.  It continued to show the construction of the application on the backend, how the back office workflow can operate, and how the application can be deployed to the cloud to take advantage of various benefits.

About two months before EnergizeIT, the DPE team contacted me to produce the Silverlight portion of the demo.  I had the pleasure of working closely with Christian Beauclair and Rick Claus to integrate the Silverlight application into the demo experience.

The user experience starts when they use their Windows Mobile device to capture collision incident information and submit a claim to the insurance company which is stored it in a SQL Server database via WCF Web Services and ADO.NET Entity Framework.  You can read about the mobile application portion in Mark Artega’s blog post

The Silverlight experience begins when the user gets home and follows up with the insurance company on their home computer.

First the user logs into the application…

20100514 login 

To reflect the ‘electric energy’ style of the the Energize ‘brand’ and the logo, the UI reveals areas using a specific ‘energy bar’ animation.  This grows from a spot…

20100514 reveal 1

…to the full width of the element to be revealed…

20100514 reveal 2

… and ‘materializes’ the element as the energy bar sweeps down over the area…

20100514 reveal 3

… after which the energy bar then shrinks until it disappears.  We joked about putting a ‘vudgzzz’ sound with this, but the demo didn’t have sound up. 

20100514 reveal 4

The Silverlight application uses ADO.NET Data Services in Silverlight 3 (now WCF Data Service in Silverlight 4 including OData support), to pull down a series of connected entities including a customer record, policies, claims, related employees, pictures, etc.  You can see how the sections of this application UI could lend themselves to display on Windows Phone 7.  The policy type icons are XAML resources bulit into User Controls, built from vectors allowing for a great scaling experience.  Unfortunately the release of Silverlight 4 was too close to the tour launch for us to use Silverlight 4 features like global implied styling.

20100514 home

When the user select the Claim activity, an animation storyboard acts on the UI to fade it and tilt it away using the Perspective 3D capabilities in Silverlight 3…

20100514 fade back

… and the claim details are revealed.  This includes binary image data transfered from the backend database.  The geospatial data in the claim is used with the Bing Maps Silverlight control to show the location of the collision on a map (with full zoom and pan support aloing with road and aerial views).

20100514 claim

It would then be possible to store updated information back to the SQL Server database via the WCF Data Service wrapping around the ADO.NET Entity framework model wrapping the database.

The asynchronous nature of all network calling libraries in Silverlight ensures that the user interface does not freeze up when the application is talking to services in the cloud.

The demo goes on to demonstrate a chat session between the user and an insurance adjuster which results in an appointment being placed in the users pending activities list.

This demo application scratches the surface of what’s possible.  Features like mic/webcam capture, WCF RIA Services, Templating, Deep Zoom, DRM, Streaming A/V Support, Printing, Out-of-browser execution, etc. really empower developers to take Silverlight to the max.

In upcoming series posts, I’ll give you pointers on the Silverlight experiences and capabilities of this application and the technologies it uses.