Bitesized tidbits for building Modern (Metro) apps.
Coding4Fun Toolkit: Introducing SuperImage
June 11, 2013Posted by on
The Coding4Fun toolkit for Windows Phone and Windows Store was updated recently to 2.0.6, and one of the new things to find its way into the toolkit is a new control called SuperImage. SuperImage is a control for Windows Phone and Windows Store that is basically a multipurpose Image control that you could use instead of a normal Image.
There are three main features that SuperImage brings a developer:
- The ability to use isostore:/ and ms-appx:/// URI schemas for your images (allowing for a much better code sharing story),
- The ability to have a placeholder image show while your main image is loading (thanks to David Anson for letting us incorporate his PlaceImage code into SuperImage),
- Multiple resolution support (only really applies to Windows Phone 8 and Windows Store)
As mentioned, SuperImage supports both isostore (from Windows Phone) and ms-appx (from Windows Store) as urls for your ImageSource. What’s more, both of those schemas are supported on each platform too, so if your code creates ms-appx URIs, you can use those on a Windows Phone app using this control.
What does all this mean? It means that you can actually bind your images to URIs of images in IsolatedStorage, which you normally can’t do.
When using the PlaceHolder part of this control, you specify an image that will be displayed until your actual image is loaded.
We took a slightly different approach to how other controls/methods have implemented this. Rather than provide a single URI which is then “converted” into a resolution specific image, we actually provide you with a way of supplying multiple images that can be used for multiple resolutions.
So, for example:
<coding4Fun:SuperImage> <coding4Fun:SuperImage.Sources> <coding4Fun:SuperImageSource Source="/Images/AppBackground-WXGA.jpg" MinScale="150" MaxScale="150" /> <coding4Fun:SuperImageSource Source="/Images/AppBackground-720p.jpg" MinScale="160" MaxScale="160" /> <coding4Fun:SuperImageSource Source="/Images/AppBackground-WVGA.jpg" MinScale="100" MaxScale="100" /> </coding4Fun:SuperImage.Sources> </coding4Fun:SuperImage>
Here you can see we provide an image and also give it a min/max scale. So if the device you’re on has a scale that matches those min/max, we’ll use that. There’s also an IsDefault property that can be used if the scale isn’t matched.
Don’t want to provide all these images? Just want to give it one image, not a problem, just use the Source property, rather than Sources.