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.