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

Saturday June 12 2010Saturday June 12 2010 colinizer Binding, Series, Silverlight

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.

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.

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

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

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

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

Saturday June 12 2010Saturday June 12 2010 colinizer OData, Series, Silverlight

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.

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

Saturday June 12 2010Monday June 14 2010 colinizer Series, Silverlight, Silverlight 3

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…

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.

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

Saturday June 12 2010 colinizer Series, Silverlight, XAML

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…

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’.

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…

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.