What a great time to be a .Net developer !

Like many, i’ve been following the announcements on Windows Phone 7 Series. I’ve installed the tools, played with the emulator and ported some experimental XNA code i had written for my Zune HD.
I have to say that i’m really impressed by what the team have achieved during the past months. Okay, there are few things missing here and there (local relational database, low priority background tasks, …). But remember, what we see is still an early CTP. Anyways, the overall developer platform looks really promising and i was so excited, to the point that i’ve decided to learn Silverlight.

Yeah, i’ve been talking about Silverlight for a while but never coded anything beyond hello world apps, until now… I never took the time to sit down and see how my old GDI skills could be migrated over. Well, after few hours of reading and playing around, i have to say that i was really surprised by how fast one could ramp-up and get things going with Silverlight. I think that the quality of the tools and the all the information available through the community really helped out.

While experimenting with the Windows Phone 7 Series CTP SDK, i noticed some things are missing. In particular, i wished there were more high-level UI controls to help developers build apps that look and feel consistent on the platform.
Since i’m getting started with Silverlight, i’m thinking “What’s the best way to learn a UI technology ? Let’s build a control !”.

So i give you my first Silverlight control : a Panorama control for Windows Phone 7 Series.

 panorama-ctrl

The control

We’ve all seen the “Hub experience” in action. However, i’d like to encourage every Windows Phone 7 Series developer to read the preview UI Design & Interaction Guide (also available here). This is a guidance on how to design great Windows Phone apps, it goes into great length at describing some design guidelines for the phone. It’s also a great place to learn about the Metro design. It is still a preview document and i do expect some future updates.

My motivation for building this control was two-fold : (1) to learn Silverlight as i said earlier, and (2) because existing examples of a panoramic apps or controls out there don’t mimic the behavior described in the Design & Interaction Guide described above (in particular, the UI is supposed to wrap-off when panning past the end of the picture).

The PanoramaControl control itself is pretty basic.

It implements a Title and BackgroundImage dependent properties. It also derives from ItemsControl, just like a tab control would. Each individual Item is of type PanoramaItem, you can think of these as visual sections. Each section can use the default Width provided by the control, or specify a custom Width if you need more space. The Header and Content properties must be assigned for each PanoramaItem.

panorama-ctrl-layout

Using the control

Right now, the design-time experience for this control is not “great” but it is pretty much okay. I don’t know how to allow the developer to switch the active PanoramaItem during design-time. I’ll discuss with some folks or look at other controls implementations to find-out and fix this in some future releases.

So let’s look at how you would instantiate and populate the control in XAML, which i think is the most common case:

panorama-ctrl-xaml 

Navigation

Like you would expect, the control supports Pan and Flick for moving between sections.

panorama-panflick

It also has a feature that snaps the viewbox to the closest section’s edge (left or right). I haven’t seen anything about snapping in the Design Guide, however i figured it is convenient so i’ve decided to implement it. You can choose not to snap the sections by setting the AutoSnap property to False on the PanoramaItem, although this only makes sense for longer sections.

While implementing the OnManipulationStarted / OnManipulationDelta / OnManipulationCompleted overrides, i ran into an issue where the manipulation event is captured by a child control first (higher up in the visual tree before the PanoramaControl receives the notification). In such case, the child control will trigger the event regardless of my decision to handle it or not : for example, a button may trigger the “Click” event while you flick the PanoramaControl.
This is best described in the following forum posting, with a workaround suggestion by Peter Torr. I did try this approach, couldn’t make it work for some reason so i’ve implemented another workaround that i’m ashamed to describe here. I sure hope to find a better solution for this in future releases.

Navigation and user interaction is an area in particular where i think the emulator is not sufficient for testing. The form factor, and especially the touch feedbacks, finger size, distances, …, are different in the emulator and the real device. But well… I don’t have a device, so i can’t comment further…

As you may see in the code, i did implement keyboard events for navigation as well (up, down, left, right). Not that i expect the control to be used with the phone keyboard, but this just helped so much during testing outside of the emulator.
Yes, i’ve done most of my tests in plain-Silverlight through the Web Browser (i do provide a browser Silverlight sample as well). And i, for one, can testify that the runtimes are very-very similar from desktop Silverlight to the phone implementation. Of course, you’ll see the obvious differences related to phone specific features. But overall, the developer experience is pretty much the same. What a great time to be a .Net developer !

Templates and styles

Well, this was the most tricky area for me as i am discovering Silverlight, coming from a Win32/GDI background. WPF and Silverlight designers like to change the appearance of controls layouts by overriding the controls templates.

For example, with the default style provided by the control, the Title is just a plain TextBlock. What if you wanted to add a logo image before the title, but still wanted to make it stick to the title and scroll at the same speed ?
A common approach with other controls, i believe, would be to replace the Title’s template. So i’d better make sure you could change templates with this PanoramaControl as well.

As shown in the Expression Blend screen capture below, the PanoramaControl provides templates for the ItemsPanel, BackgroundImage and Title. The PanoramaItem is also templated, although i haven’t merged its template with the PanoramaControl default style yet.
I am lacking experience in this area, and am still looking for the best approach (single and common template for all Items or allowing each Item to have its own template). So i’ve decided to take the “we’ll see later” approach…

I’m sure lots of folks out there have been through this, and i’ll be happy to hear your advice here as well.

panorama.ctrl-templates

Disclaimer

  • I’m not on the Windows Phone team. This is not the official control, and i don’t know if they have plans for such controls in the future. The developer FAQ seems to suggest something may be coming down the road.
  • This is not production code. I am using it as a learning experience for Silverlight, which i’ve started less than 2 weeks ago. I’m still learning about the technology and writing controls : there are lots of areas for improvements in the current implementation (quality and robustness, templates and customization, resource usage, fonts, themes, …).
  • This is a pet project i’m working on during my free time, just for fun. For now there’s no plan to turn it into something more than a pet project, although i’d like to continue the effort and perhaps build something i will call the Pivot control.

Again, here’s the link to the sample Panorama control for Windows Phone 7 Series.

Have fun playing with the control, and do leave some feedback if you like (or dislike) it !

-stephane