Thursday, February 23, 2012

Nice panning and zooming in Windows Phone 7

A bit of time ago I published an app called Hidden Pics on the Microsoft Marketplace, on that entry I covered some basics on the Isolated Storage and the PhotoChooserTask for Windows Phone 7. On this entry I want to cover the zooming and panning. As part of that app, the user has the option to open a photo full size on the device screen and then pinch to zoom the photo.  They can also pan by dragging on the screen with the fingers.

Now this is supposed to be very basic, but there is a catch, which is making the zoom stable. By stable I mean that if you use two fingers to zoom in the photo, once you finish the two fingers should have the same pixels behind them, which indicates that you zoomed proportionally and panned correctly. After googling around a bit I put together the code to do both zooming and panning properly.

So here is the XAML for the control, I am using an Image control inside a Canvas with a CompositeTransform:

The photo will start fully fitted on the Image control, and in this case my app starts in portrait. Now the event is hooked for flicks (I use them to switch from one photo to the next one) and the PinchDelta and PinchStarted events are the ones we will use here. Now check the code and see how it is done.

Now notice the OrientationChanged event of the Silverlight page is here, the reason is that I want the user to be able to use the zoom and panning either in portrait or landscape mode, but for that, I do really need Width and Height of the Image control to be set. Also I check if the scale is 1 or less, then in that case the ApplicationBar is shown and the image is fit to the screen. So if the photo is not zoomed, a flick will move to the next or previous photo, but then the photo is zoomed, no menu and and flicking will just pan around the photo. See the code for the flick event:

Hope you can make use of this.

Saturday, February 18, 2012

Hidden Pics: My first App on Windows Phone marketplace

Just days ago I finished and published my first app to Microsoft Windows Phone Marketplace. As part of the "#30tolaunch" program, I must admit that waiting for  the app to be certified was a little scaring, but the app was approved without any trouble and is already up, you can grab it here.

Now the idea of the app is simple, it uses the Isolated Storage to hide pictures you want to keep out of curious people looking at your phone. And it involves two common elements that might be useful for you in future apps.

1) Isolated Storage
2) Photo Chooser Task

Isolated Storage.
The Isolated Storage is a virtualized file system so your app can't really access the device storage like it used to be. If you are a Windows Mobile developer, you might remember those times where you could write/read files all across the filesystem of a windows device. Thankfully that's not like that anymore. And you get a isolated space just for you application. Reading bytes from a file on that storage looks like this:

In a nutshell is pretty much what you do using the regular File, Directory and Stream classes in System.IO Namespace. Just that now you are reduced to work over a private space for you application and not the whole storage device.

Photo Chooser Task
Letting the user select a photo from either the media library or the camera is a very straight forward action. Paraphrasing  Chris Koenig this is an "anti-climatic" kind of stuff, because is so easy, that you have nothing to ask, and hence, you might get bored. If you remember battling with a camera in Windows Mobile 5.0 you will love this.

Just opening the photo chooser task will let the user select a picture from the media library or take one from the camera. No work with the camera is involved at all, not even with the Media Library. All you get is a file at the end of the process, no  matter if the file is new from the camera or it was selected from a user's photo album.

The overall experience
Being a developer from the times of eVB and eVC, then .NET Compact Framework with C# (which did rock, but wasn't enough) I must say the experience is great. I do miss some low-level power control with p/invoke (which is forbidden in the marketplace). Also miss control on how I could connect external devices to the phone and develop for that using COM ports. But with more sensors everyday on the phones that might not be missed.

The UI being developed with Silverlight instead of Windows Forms is a huge step forward especially on screens that auto-rotate and re-layout. This could not get easier to develop using Visual Studio. And finally the process of submitting an app to the marketplace is easy and simple.

So... just submit your app.