stephanc's blog

Windows Phone 7 Pivot Control sample

Stephane Crozatier — Sun, 09 May 2010 18:50:00 GMT

Today i am releasing the first preview of the Pivot Control for Windows Phone 7.
Like the Panorama Control, this is intended to be a sample code you can re-use in your own Windows Phone app, or as a learning experience for Silverlight (that’s my case).

So, what is a Pivot control ?

I guess you’re all familiar with the Tab Control concept. If not, here’s a quote from the MSDN documentation of the Win32 Tab Control:

“A tab control is analogous to the dividers in a notebook or the labels in a file cabinet. By using a tab control, an application can define multiple pages for the same area of a window or dialog box. Each page consists of a certain type of information or a group of controls that the application displays when the user selects the corresponding tab.”

Well, a Pivot Control is very similar to that, except for navigation. There are two ways to navigate from one page to another : you can either click the page’s Header, or simply flick through the pages.

The control

The PivotControl was built using the exact same paradigm as the PanoramaControl. It derives from the ItemsControl class, provides it’s own UI and navigation system. You can assign it a Title, although this is completely optional if each page also specifies a Title.

Each section of the control is called the PivotItem. The PivotItem has a Header and a Title. When a PivotItem is selected, its Title will replace the main control’s Title (on the top) and also animate the Headers list. The selected PivotItem’s Header will then move to the left of the screen, and it’s template will change to highlight the selected PivotItem.

Using the control

Each PivotItem has a (implicit) Content property. This is where you integrate your own group of controls.

Just like the PanoramaControl, the design-time experience here is far from perfect. You’ll probably be better off populating the control in XAML directly.

Contrary to the PanoramaControl, i believe that there are many scenarios where the PivotControl will be populated dynamically by code.
This is the case for applications that need to show a variable number of pages that share the same layout (but not only). A good example for this is a Weather forecasting application : you can choose to show forecast data for a variable number of cities, but each page will be built using the same structure.

The way to achieve this is by creating a empty PivotControl using XAML, and then create and populate the PivotItems by code as shown below.

Navigation

As i described above, the Header portion of the PivotItem is sensitive to clicks so one way to navigate from one page to another is to click the Header.
Now, depending on the number of PivotItems or the size of the header’s text, you may not see your target Header : you need another way to switch pages.

You probably expect the PivotControl to support flicking directly inside the PivotItem. Well, that’s what it does ! Flick left, flick right, flick through the end and cycle back to where you started.

I am aware of at least one animation bug in the current implementation. I’m still tracking it down, and will follow through every bug report you file here.

Sample WeatherForecast application

The screen captures in this blog post are from a sample application i’m building called WeatherForecast. As its name suggests this is a weather forecasting application (what a surprise !).

I chose to build a weather forecasting app as a sample, because it is a concept that everyone understands and it allows me to create PivotItems dynamically. Right now, the application is incomplete and only shows fake data. But i do plan to complete it shortly, and will write a series of blog posts as a tutorial for writing a Windows Phone 7 app using the PivotControl.

On a side note, the weather web services i’m using are from World Weather Online, weather forecast and weather content provider. I think that their weather icons blend quite smoothly with the Metro design language.
Go to their web site to request a API Key, if you want to call their services.

What’s next ?

I haven’t had much time to debug the PivotControl yet. As a consequence, i do expect a number of UI or reliability bugs to pop-up. If you find a bug, please make sure you file it here. If you find a workaround or manage to fix it somehow, also make sure that you share the information in your bug report as well.
I’ve had lots of fun writing these controls, and will continue the effort. If you find them useful, please let me know by sending me an email or dropping a comment below. Also send me a link to your project, i’m really excited to see what type of apps you guys will be building with these controls.
Again, these controls aren’t the official Microsoft Panorama and Pivot controls.

In case you’ve missed it, here’s the link to the Windows Phone 7 Panorama & Pivot controls sample projects.

Cheers
-stephane

Update to the Panorama Control for Windows Phone

Stephane Crozatier — Tue, 04 May 2010 21:01:00 GMT

I’ve been busy with work during the past few weeks, so i haven’t had time to work on Windows Phone as much as i wanted…

Anyhow, i just wanted to give you a quick heads-up on the lastest drop.

I took some time this week-end to update the control code, fix some bugs, implement few change requests, and prepare for the next milestone.

I have also completely rewritten the PictureViewer sample code to drop the dependency on the Silverlight Toolkit. I realized that many developers, like me, aren’t familiar with the entire Silverlight ecosystem. And for that reason, they may find it challenging to install/run sample projects that have external dependencies.
Because i still wanted to use some kind of WrapPanel to show the pictures in a vertical container (and track vertical manipulations), I ended-up writing a very simple panel substitute. I got to discover MeasureOverride and ArrangeOverride in the process, which was a great learning opportunity.

The PictureViewer sample is a dummy picture viewer application (duh!). It downloads the latest Bing background images to the device’s Isolated Storage, and show them (tile view) inside the Panorama Control and also (full view) inside a dedicated application page.

As i wrote the code for this sample, i got to learn more about Silverlight/.Net. So i hope that i’ve made smarter coding decisions this time around. I’m still not happy with several details (the Async download implementation for one), but that’s part of the learning process...

While writing the PictureViewer application, i got to learn and use the following features :

Navigation Framework for moving to/from different pages in the application
WebClient class and async downloading documents thru HTTP.
XML Serialization and XMLElement attribute to read and persist structured data.
LINQ to XML to read/write arbitrary XML data.
Isolated Storage to persist data (binary and XML)

If you are developing an application with one of the features above and you’re looking for examples, feel free to download the code and peek around. If you are already familiar with those, well … you can always download the latest Panorama Control drop and have fun with it.
Head over to http://phone.codeplex.com.

By the way, i’ve started to work on a Pivot Control implementation based on the same concepts i used for the Panorama Control. I’m not sure when i’ll publish it (perhaps in 1 or 2 weeks) as i have higher tasks in my priority list right now.

I’m also interested in having your feedbacks on missing controls that i can put together. I’m thinking a ComboBox that adheres to the Metro UI design language, but i’m sure that you have other ideas. Feel free to drop a note in the comments.

Stay tuned for more, and remember : this is by no means a Microsoft supported and official project, i’m just a guy trying to learn Silverlight on the Phone. Please use the official controls if/when they are released.

Windows Phone 7 Panorama Control sample

Stephane Crozatier — Sun, 04 Apr 2010 20:04:00 GMT

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.

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.

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:

Navigation

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

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.

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