Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

Facelift for the Windows Phone 7 Social Viewer Template

I’ve just checked in the latest Social Viewer template to http://socialviewer.codeplex.com which among a number of bug fixes (including the fix to get Twitter auth working again) also includes a significant facelift.

Previously you defined a number of sources (RSS, Atom, Facebook, Twitter or your own) then grouped them into lists. These lists would then appear in a panorama. This sort of worked for a small number of lists, say 2-4, but you ended up with list after list after list – probably a pivot would be better suited to displaying all the lists.

I’m not a big fan of using a pivot as the starting point for an application so I wanted to craft a better experience that demonstrated the use of both the panorama and pivot controls, as well as using more of the features of the social viewer template itself. What we ended up with is a template that is broken into a main panorama which shows highlights, a more detailed pivot showing a number of on-demand lists and then of course the reading page. Let’s walk through them.

Main Panorama

The main panorama is essentially the launching point for the application. The first pane includes a vertical list of items that is entitled “what’s new” in keeping with the what’s new lists across the core platform. This is a simple list allowing you to easily scan the list for items of interest. Items appear dimmed/greyed to indicate it has been read.

Next we have the recent panorama item where we introduce a bit of a change in pace – you’ll again notice this across the core platform, where you’ll see the panorama broken up into different styles of panes. Here we’re including items that have got images/enclosures to add some life to the panorama.

Lastly we have a pane that is sort of a menu in that it links to different parts of the application. As the template can take advantage of trial mode, there is also a Purchase menu item that is not visible here, linking the user off to the Marketplace link for the application to be purchased.

image image image image

On-Demand Pivot

Clicking on the Developers link on the main panorama navigates the user to a page which contains the pivot control. The control is data bound to a collection of lists. As the user flicks between the lists, the corresponding feeds are downloaded and processed on-demand (as you can see in the second image with the progress bar still visible).

image image image image

Reading

Clicking on any of the items from any of the lists on the Main Panorama or the On-Demand Pivot will navigate the user to the reading page. Here the full post is available, along with any links (see second image) that the user may want to navigate to. The user can also opt to share the post via Facebook, email the post or tweet a reference to the post.

image image image

Settings and About

The last two pages of the template are the Settings and About pages. These are provided out of the box to allow the user to manage their Facebook and Twitter credentials, and to list relevant information about the sources of the data for the application. The About page also provides a mechanism whereby the user can review (via Marketplace) or provide feedback (via email) on the application.

image image

I would love feedback on the latest version of the social viewer template – http://socialviewer.codeplex.com (the updated version is still on the source code tab until I finish testing the updates)

Comments are closed