After reading Matthias’s post about porting WrapPanel and DockPanel from the Silverlight toolkit to WP7 I was interested in creating a multi-scale ui for the phone and set about it, however the other piece of the puzzle that’s needed to acheive this is the ViewBox which was part of the Silverlight toolkit.
The source for the ViewBox control can be downloaded from the November 2009 version of the Silverlight Toolkit, however as with the WrapPanel and Dockpanel there are only a few files you actually need:
- Viewbox.cs
- StretchDirecton.cs
- NumericExtensions.cs
- Resources.resx
To save you the leg work, I’ve parcelled them up into a zip of the source project or the dll for you to download to save some time.
Once you have downloaded or built the DLL you can add a reference to it and then access it in Expression:
Now that we have a ViewBox we can scale the control hosted inside it:
This will scale the button up to 400 pixels wide like:
By adding a slider to the UI we scan databind the size of the ViewBox to the value of the slider to make the button resize:
And by adding the WrapPanel in we can fill it full of resizable buttons:
And for the extra Silverlight sauce, add a fluid movement behaviour onto the wrap panel:
