Windows Phone 7, new controls for a better UX

Introduction

I have been developing windows phone applications since the WP7 SDK CTP but last September 16 2010, the Silverlight team developed a new SDK for Windows Phone 7. There have been controls that are developed at codeplex by Stephane Crozatier before the final release of the SDK like the Pivot and Panoramic controls that brought high-level UI controls to help developers  build apps. Today, these two controls are now officially shipped into the new release.

Now for those who are not yet familiar with the Pivot control and Panoramic control, I’ll share to you my experience in using these two controls.

First, let’s know what are these controls and what do they do.

Panoramic control from the word “panoramic” which is a picture (or series of pictures) representing a continuous scene ,

(Apolo 11 – Commander Neil Armstrong’s pan of East Crater, with LM Eagle in the background)

for me I have never seen any panoramic user interface in the mobile platform. that are developed today in the mobile world. It’s a nice to have control for a mobile platform since it brings the user to a new experience when using their smart phones.

Pivot control, to those who are developers out there and have heard of the word “Tab Control” then it’s concept is just the same with the Pivot Control. If you’re not familiar with the tab control then here’s a quote from MSDN.

“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.”

You might be wondering now why would someone create a Pivot control if there’s already a Tab control for it?

Well to answer that, Pivot control has a difference with tab control when it comes to Navigation. Since most of the smart phones right now are touch screen especially Windows Phone 7, we expect the users to use their hand gestures in navigating pages. In pivot control, you can either click the header to switch or simply flick through the pages.

Developers side

Just a tip before using these controls, Panorama control is designed for starting place, think whitespace. not tons of data. So resist using Panorama controls all over your application.

As a developer, I was excited to use these controls and add them to my current project. But the first problem that I thought was, how will I navigate through the pages without having the user flick or click the header. So as usual, I have tried searching in the Internet on what event handler do I have to use to implement what I want. After hours of searching, the most common one that ended with is the event SelectionChanged so I went back to visual studio 2010 and kept pressing the ‘.’ button to search for the methods/events that will give me to SelectionChanged.

Now, I assume that some of the developers have already tried this event but for the others who have not, I would want to share how to handle SelectionChanged event and navigate through other PivotItems without having the user click the Header or flick the page.

<Grid x:Name=”LayoutRoot” Background=”Transparent”>

<!–Pivot Control–>

<controls:Pivot Title=”MY APPLICATION” Name=”header”>

<!–Pivot item one–>

<controls:PivotItem Header=”item1″ Name=”header1″>

</controls:PivotItem>

By default, your pivot control will not have a name in your xaml file. As you notice, I added a name tag for my pivot control called “header” so that I can manipulate the properties of the control. After adding the metadata “name” let’s go to the behind the code of this xaml page and add this code.

header.SelectionChanged += new SelectionChangedEventHandler(header_SelectionChanged);

with this code, whenever the user navigates to another PivotItemHeader all the changes you want to happen within the PivotControl must be coded within the header_SelectionChanged method. Now what’s good with this event handler is that we want to minimize the use of memory of the phone and maximize the UX of the users. Let’s say I have an ItemHeader[0] called “Gallery” and a ItemHeader[1] called “Pictures”. Now if I would like to load the data in the ItemHeader[1] without having to load all the data in that page everytime the user loads the whole xaml page of the Pivot control, I would use SelectionChangedEventHandler.

void header_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(header.SelectedIndex == 1)

{

//Load Items for ItemHeader[1]

}

}

Now what if I want the user to flick from ItemHeader[0] to let’s say ItemHeader[10]?

Normally, the user will have to slide the headers to ItemHeader[10] and click it or flick the page until ItemHeader[10] is displayed.

What I thought is that why not add a special event when the user is on ItemHeader[0] and would like to be flicked straight to ItemHeader[10] with just a click.

Assuming we added a button in our xaml page, called “loadBtn” and added a event handler for that button.

loadBtn.Click +=new RoutedEventHandler(loadBtn_Click);

private void loadBtn_Click(object sender, RoutedEventArgs e)

{

//Navigate to ItemHeader[10] with a click

header.SelectedIndex = 10;

}

Now it’s all up to you what would you like to do with your Pivot control but what I’ve shown here is just a basic tutorial on how to handle SelectionChanged for Pivot Control since I have not found any tutorial for it. I would like to share a PDF file by Microsoft, it’s a UI Design and Interaction Guide Download here. Remind yourself with these reminders when using Pivot and Panorama controls.

  • Panorama looks nice, but Pivot will offer faster start time.
  • Be aware of how many pano and pivot items you do have. Memory expands quick when you have a lot of views and images!
  • Pivot and Panorama can have UI element headers and titles, too, but you’ll need to apply your own styling
  • A lot of people try building ‘wizard’ screens with panorama & pivot control. Please don’t do this! Thx, the “UX gods”
  • 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