Quick Tip for Scaling a Silverlight Canvas On Browser Resizing

UPDATE: For the easy route, consider placing your canvas in a ViewBox control which is in the Control Toolkit for Silverlight 3 and is included in the Silverlight 4 runtime.

In December I produced an an easy-to-follow Azure Deployment Guide which has so far been successfully used by hundreds of people to deploy an application to Windows Azure.  It also came with a sample Silverlight application.

That application includes the capability to scale an inner canvas (while maintaining aspect ratio) in response to the outer grid and control being resized as a result of the browser window being resized by the user.

In the following screenshots you’ll notice that the header/footer text stays the same size but the green canvas area scales to fit.  You’ll also notice that it centres horizontally and aligns to the top.

image

image 

image

To achieve this we need to do a few things…

image

In the Silverlight UserControl’s XAML, make sure no Width and Height are set on the UserControl element (note that the d:DesignWidth/Height are there for design-time sizing only).

Note the name of “LayoutRoot” give to the top-most element.

 

image

Give the canvas a starting size which represents 100%.

Note the name “Wall” given to the canvas we want to scale.

Note the Scale and Translate transforms added to this canvas.

 

image

In the HTML page, the Silverlight control needs to be sized to 100% of the available width and height (and this needs to suitably apply all the way to the root of the HTML page).  You may do this with CSS styling or some other means.

 

image

In the Silverlight UserControl’s code-behind find, register for the resize event on the LayoutRoot object (which is a Grid in this case).

 

image

React to the resizing of the Silverlight control.

This code figures out whether there is more space to scale horizontally or vertically, and applies the lower of the two in both the X and Y direction (preserving aspect ratio) using the named transforms.

The calculations make use of ActualHeight and ActualWidth from the containing space.

The code also horizontally centres the canvas in the containing space.

I say ‘containing space’ in this case, because the Canvas to be scaled is in the middle of 3 rows and the single column in the parent Grid.

For the full code, check out the sample application with the Azure Deployment Guide.

I hope you found this tip useful 🙂 If so, and you’re reading this on January 15th 2010 then please vote for my Mix 2010 conference submissions today! :)  Thank you.

Looking to learn more about the Windows Azure Platform, Silverlight, Windows Touch or Windows Identify Foundation?

If you’d like to see these sessions in person at Microsoft’s Mix 2010 conference or the recordings that will likely be made available for free later on, please vote for the sessions before January 15th 2010, by going to the site, adding the 3 sessions to you ballot and submitting it.

Advertisement

Google could win at least the Mobile Consumer Space

If you look at Microsoft’s Project Natal, you know that Microsoft is trying to go after the rest of the family in the gaming space.  Once those people become comfortable playing games like raggedy dolls 😉 they’ll be comfortable using whatever entertainment or service Microsoft provides on the box.

It goes without saying that Microsoft is big in business and will likely continue to be but that focus may continue to be their undoing in other market segments – just look at Windows Mobile.  Take the consumer who is buying their first or next mobile device and just moving into social networking or electronic communications or those that currently have no brand loyalty.  Here, Google could gradually and quietly take over from Symbian, Apple and Microsoft.

Google Wave + Google Search + other Google applications on an Android-based phone, a mini running Android or even on any other low-cost device with a browser, could be a winning formula and all that any social networking consumer needs.

While Microsoft will dominate business, gaming and home entertainment, Google may well end up dominating most of the mobile consumer space (with a little work on the UI – and imagine if Google and Adobe got together…).

Microsoft needs to come out with a Windows Mobile device and fast – like this year.  It needs to be a .NET-based OS and have a flourishing and up-front application/music market place.  That means dismissing their hardware partners and bring out a cheap Zune phone (while extending Game Studio Express to be App Studio Express) – it’s painful to other but it’s the only real way for Microsoft not to lose this space altogether, and not to Apple, but to Google.

Windows Mobile 8 = Windows 7 Lite?

 

Mary Jo Foley’s post speculating about Windows Mobile 7 coming in Q1 2009 says:

From recent executive remarks, it sounds like Microsoft is trying to get Windows and Windows Mobile to be more in sync.  Might this mean with Windows Mobile 8 — which Microsoft has told certain folks will be built from scratch — Microsoft might make Windows Mobile a “real” version of Windows, with the same core as Windows client?

I heard from someone at Microsoft probably 5 or 6 years ago that this was the plan.

Windows Mobile currently runs on top of Windows CE which essentially supports a subset of the full Win32, etc. APIs, so doing native (C++) development for Windows Mobile is similar to desktop development (just a little more ‘cramped’).  There is also the .NET Compact Framework, similarly a subset of the full .NET Framework.  There are also Windows Mobile specific APIs at the native and .net level.  Some of the internal sub-systems, for memory, processes, etc. are quite different.

To make Windows Mobile a ‘real’ version of Windows at the core is therefore a lot about how much Windows CE is API-wise (inc. .NET) and sub-system-wise, similar to the Vista kernel.  After that, we have the shell and applications.

The shell clearly cannot be Aero, and the UI experience expectations for mobile has been clearly set by the iPhone with everyone else playing catch-up.  The mobile device really needs a bigger or paper-like-expandable screen at some point – there’s only so far you can go with zooming.

Applications can be split between Office (and other productivity or line-of-business apps) and all the other software+services things that are required activities in this era.  No doubt Windows Live pieces need to be upgraded and combined with great UI.

Why not make Windows Mobile a .NET-only platform with WPF for the shell with add-ins for all MS and 3rd-party applications?  The mobile space is not big enough that breaking compatibility is such a big deal.  It truly can’t be long before Microsoft partners with nVidia and produces a Microsoft ‘mPhone’.  An investment in small WPF mobile versions of Office would be a re-usable investment allowing for web based Office running on Silverlight!

Apple Irony

Apple is again running a new clever and contrite ad on cnn.com involving two ad spots synchronised.  It pans Vista because of apparent remaining glitches a year after release and users downgrading to XP.

I thought I’d head over to apple.com to see if they had any other amusing ads.  I went to this page, only to be presented with a Quicktime upgrade window that hung IE7…

Apple iPhone and HTC Touch is all fingers and no thumbs

Between Windows Mobile 2003(SE) and Windows Mobile 5.0, Microsoft attempted to make the Pocket PC and Smartphone platforms similar.

One way they did this, was to make Pocket PC devices more single-hand friendly.  Their ODM-buddy HTC jumped on by putting more of the important buttons like (Start and OK) at the bottom of the device and a ‘jog-wheel’ where the index finger (for right-handed people at least) goes.  This allows you to do a lot with just your right thumb, and scrolling with your index finger.

Almost everyone using a WM Smart Phone or other ‘Smart Phone’ (e.g. a Nokia running Symbian) is very used to the idea of ‘thumbing’ away of their keyboards.  Even the Pocket PC devices with slide out keyboards, and the UMPCs coming out now with keyboard, really rely on good ‘thumbing’ skills for typing…

Along comes the Apple iPhone and the HTC Touch.  Both of these heavily demonstrate the use of the index finger for controlling the interface, which essentially makes using the device an involved and more distracting experience because it becomes a two-handed (or stable-surface-dependent) experience.  Follow that Apple link – it takes one hand just to hold the thing – great if it’s a Star Trek Tricorder, but not so great if you want to live in the modern world.  Did I mention (as you probably already know) that both of these devices are missing 3G radios?

So forget the wow with these two new devices for a second and consider just how potentially inconvenient they are to use on the go!

iTunes DRM-free doesn’t mean Scott-free Sharing

In a comment on Mack’s post about iTunes going DRM-free I speculated whether they would still keep identity information in tracks to fight file sharing.

Well I’ll happily boast that I seemed to have called it.

The BBC is reporting that the new DRM-free tracks have the full name and email address of the purchaser in them! 

The DRM-‘full’ tracks apparently also had this, but it appears that DRM-free, doesn’t mean scott-free or audit-free sharing.

I personally really think this was to be expected.  Perhaps it’s stated somewhere, but it’s clearly not obvious to most.

So don’t expect someone to set up something like the old-style Napster again fueled by iTunes downloads 🙂