Getting the Windows Phone Blog Rolling with Image Zooming

Update: 2/22/12

My GitHub repo is up with this code! Look there for the latest version of WP7ImageZoomer as well as other things.

Here’s the link: https://github.com/chevonc/ChevonChristieCode

My first blog post here, so let me take the time to say thanks for taking a gander.

One of my biggest frustrations with Windows Phone has been getting an image to zoom somewhat smoothly in an app, as well as behave the way a user would expect it to. Attempts have been made to remedy this problem, most notably the MultiTouchBehavior, which is available on codeplex. However, none of the attempts proved, based on my judgement, satisfactory (until now of course). In my rampant search to find a “good” image zooming implementation, akin to what is experienced in the Windows Phone web browser and other native apps, I stumbled upon the IndexOutRange blog, where another dev has taken what I consider a successful stab at the problem. How I missed it before? I don’t know. But once I saw it, I used it as a jumping off point and made zooming even easier to work with.

Two of the main issues with the MultiTouchBehavior I linked to above, are the need for good documentation of the various parameters you need to set for the attached behavior to work and the requirement to programatically set the position of the image on the screen, despite it being set in the XAML. What a run around?!

Unlike the MultiTouchBehavior, Francesco De Vittori, the author of IndexOutRange, implemented his image zooming to be completely lightweight, using just a few event handlers. And the position of the image in XAML is the only position you need to set, as it should be. Nevertheless, Francesco’s implementation was a bit incomplete as it relied on sticking all the logic in the codebehind of each page that had an image that needs zooming as well as the zoomed image would overflow its container’s bounds. i.e. – no clipping to bounds. The clipping issue is only a factor if the image is not meant to be the only thing on the screen.

After playing around with Francesco’s work and with some reference from a CodeProject post, I created WP7ImageZoomer. It is implemented as an attached dependency property and only needs at most 4 lines of “WP7ImageZoomer-code” to use, but it can be done using only 3. See below.

Required code:

In the codebehind of the page with the image

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedFrom(e);

if (e.NavigationMode == System.Windows.Navigation.NavigationMode.Back)
{
//WP7ImageZoomer.SetIsZoomingEnabled(myImage, false);
//OR
WP7ImageZoomer.EndImageZooming(myImage); //Unhooks events and frees image references so its memory can be released
}
}

In the XAML:

xmlns:imageZooming="clr-namespace:ChevonChristieCode.ImageZooming.Logic">

/.....more code...../

<Grid Background="Transparent" imageZooming:ClipBound.ToBounds="True">

<Image imageZooming:WP7ImageZoomer.IsZoomingEnabled="True" Source="/ChevonChristie.jpg"/>

</Grid>

The sample is attached here: ChevonChristieCode.ImageZooming Sample

Try it out and let me know if it works. I will update this post once the source is on github, so there is an easy way to always get the latest.

Tags: , ,
Posted in Windows Phone | 14 Comments »

14 Comments

  1. just blogged! http://t.co/Pyo49wwy Easily and nicely zoom images in your #wp7 app. :) #wp7dev #finally

  2. Nice one! I’m glad you took my sample to the next level, it needed it badly!

  3. Post Edited: Getting the Windows Phone Blog Rolling with Image Zooming http://t.co/Pyo49wwy

  4. @silverlightshow @thnk2wn #imagezooming in #wp7 for those who’ve wanted to do so. http://t.co/Pyo49wwy

  5. [...] Read original post at Chevon Christie's Blog [...]

  6. Kenny Thompson says:

    Very cool, I’ll definitely be trying this out later this week. Though after using your app for a couple of days I can’t decide if I prefer the smooth pinch-to-zoom you’ve implemented but with slow scrolling or the zoomed in map in a scrollviewer with very fluid scrolling that you had before.

    • admin says:

      Hey Kenny,

      Thanks for the feedback. I will put some more work into making the zooming/dragging smoother and more natural-to-the-touch. Hopefully sometime this week or on the weekend.

      As is now, it makes it easy to drop OK zooming in an app, which was hard to find.

      Keep an eye out on my github for any updates.

  7. Getting the Windows Phone Blog Rolling with Image Zooming | http://t.co/RvczLnGJ http://t.co/i0jIivy9 #WindowsPhone #MetroStyle

  8. BlackLight says:

    Hi,

    This is great. I have used several zooming functions including MultiTouchBehaviors. There is one big problem with all of them. Most people when they want this functionality do so because they want to zoom in on a large image but WP7 has a maximum limit of 4000 for the size of a xaml object.

    I haven’t trried it yet but try it yourself with a large image, zoom in and you get a blank screen on part of your image. My solution is to split the image into four seperate images each showing a quarter of the full sized image and treating this as one object you can zoom into. Would it be possible to add this sort of functionality?

    • admin says:

      Hey BlackLight,

      It would be possible to sorta fake the functionality you mention, but at a point things will get weird. For example, how would you handle a pinch-zoom where each finger was over a different image control? This would be seen as individual drag gestures on each control, and even with a hack to remedy that, picking which on the two images to zoom can be hit and miss from a user’s perspective. Also, synchronizing the remaining images will become a pain.

      What I would recommend is to use the app bar with 4 buttons to view each quadrant of the image, and simply transition in the selected quadrant and hide the others (so 1 quadrant takes up the whole screen). The active quadrant can be set to some particular zoom level based on the information from the last image manipulation.

      This would provide an overall better UX. You can do the above or reduce the res of the original image so it can be rendered and zoomed on its own.

      - Hope this helps.

  9. Post Edited: Getting the Windows Phone Blog Rolling with Image Zooming http://t.co/PynZBWno #wp7dev

  10. Ananth says:

    awesome work man!!! saved a lot of time for me!

Leave a Reply