XAML

Or “What you can use to target 1+ billion devices with one application”

Further resources including videos are indicated at the bottom of this post.

Windows 10 is scheduled for its first official public release today, Wed Jul 29 2015, on desktops, laptops, 2-in-1s and large tablets. More so than with any previous Windows release, millions of users either already have the bits (‘Windows Insiders’ – anyone who decided to sign up for the free program and install bits on their system) or are registered to upgrade (as regular consumer or small business users with Windows 7/8.1 users who signed up via the icon in the their taskbar).

In any case, anyone with a legitimate copy of Windows 7 or 8.1 (with the latest updates) can update to Windows 10 for FREE within the next 1 year. Enterprise users have to pay to upgrade but may be covered by an existing Software Assurance arrangement. MSDN should also carry various editions applicable to the MSDN subscriber level, subject to MSDN licensing terms.

Starting a little later in the year, we’ll see a roll out of Windows 10 for other device families, including Windows 10 on 55” and 80” Microsoft Surface Hub devices, Windows 10 Mobile on phones and small tablets, Windows Holographic on HoloLens and further Windows 10 IoT Core releases for IoT devices like Raspberry PI 2.

In any case, Microsoft is targeting 1 billion + users for Windows 10 on many device families.

Here are 10 things you should know about to help you build an application that can run on those devices.

Continue reading →

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.