Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Coding4Fun Toolkit: Introducing SuperImage

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.

SuperImage

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)

URI Schemas

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.

Placeholder

When using the PlaceHolder part of this control, you specify an image that will be displayed until your actual image is loaded.

Multiple Resolution

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.

That’s It

So there you have SuperImage, go forth and use it. If you find any problems with it, let myself or @ClintRutkas know, but more importantly, raise an issue on Codeplex.

SL

Advertisements

3 responses to “Coding4Fun Toolkit: Introducing SuperImage

  1. Pingback: Coding4Fun Toolkit: Introducing LockScreenPreview | Metro Nuggets

  2. Pingback: TWC9: TechEd++, VS/TFS 2013, C4F Toolkit 2.0.6, Azure Updates and more - Windows Azure Blog

  3. Pingback: Windows Store Developer Links – 2013-06-26 | Dan Rigby

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: