XPF Demo: What’s in store

We are now getting to the point where we have enough functionality in the XPF public beta to start building out a demo application to showcase its functionality. We are going to use the requirements of the demo application to drive functionality that has not yet been built (bear in mind that we still want your feedback as it will also have an impact on our priorities of delivery). Whilst my two business partners, Stu and David (the techy ones) have been enjoying themselves developing XPF and blogging in anger as new nightly builds are released with cool new functionality - I’ve been concentrating on all the non-techy stuff.

So, to give you a heads up of what is in store for the demo that we want to deliver over the coming weeks, this post will go through a few scamps I have done to show some designs of the demo’s functionality.

XPF exists to allow you to build powerful 2D layouts alongside the already powerful 3D functionality that XNA offers.  To showcase XPF functionality the demo will be an XNA application on WP7 with a whole bunch of fluid and logical 2D layouts, combined with some 3D elements too. We have built the story around a pocket mechanic application on which you can view lots of the usual 2D stuff such as – large amounts of textual information, navigate pivot pages (specific to WP7), view thumbnail galleries, view full-screen images (and navigate between them), view menus and app bars etc… you will also be able to interact with 3D models.

So, let’s have a look at some scamps around the pocket mechanic app:


Pivots Nav
Pivots Nav

If you are familiar with WP7 you’ll already know that you can use long horizontal panoramic canvas’ that extend beyond the confines of the screen. It is as if you are using the phone as a magnifying glass to view content across the horizontal display (see to the right).

The horizontal canvas is made up of several pages, in this case pivot pages. A pivot is a control that allows you to navigate across large datasets or multiple pages. Flicking or panning horizontally on the page cycles the pivot, as does tapping a pivot header. In this case we have three pages: Text, Photos and 3D Parts.

The pivot control ships with the WP7 phone in Silverlight but remember this is an XNA app. To do this in XNA is somewhat of a challenge. So we will be using XPF to layout all of these pages, re-build the pivot control and create the animation and gestures to give a smooth experience when navigating between the pivot pages.

Textual Information

Textual Info
Textual Info

The Text pivot page in the demo app will display a chapter of dummy text. This however could support full books of navigable text if necessary, using a Virtualizing Stack Panel.

An up or down swipe gesture will navigate through the text with the headings (chapter and section) remaining in place until you reach the next chapter or section. Such functionality is easy to implement with XPF’s Scroll Viewer.

Once animation is available in XPF, navigation will be in a smooth animated manner with built in physics controlling the speed of the text movement depending on the speed of the gesture.

To be able to build a 2D layout of navigable text, quickly, within an XNA app will be very powerful on both Windows and Windows Phone 7.

Thumbnail Galleries & Image Viewer


You can view a thumbnail gallery of images separated out into their respective chapters and sections with each of the thumbnails having a title and description. Data driven layouts like this are easy to implement in XPF using the ItemsControl which can be configured with any panel - a Wrap Panel might be a good choice here. It is possible to navigate through all of the images in the application via vertical flicks on this pivot page.

Tapping  a thumbnail takes you to full screen mode of that particular image. Once in full screen mode you are able to zoom and move the view of a single image using pinch and pan gestures. To navigate to the next picture without exiting full screen mode you flick horizontally and if you want to exit full screen mode you can either tap the back button on the phone’s hardware (to go back to the thumbnail view) or tap the home button on the app bar to return to start page of the application.

App Bar and Menu Items

With Silverlight applications on the WP7 you get an application bar which allows you to display up to four buttons used to invoke the most common application tasks. This does not ship with XNA applications. So, by using XPF we have created the ability to generate your own app bars to interact with your XNA application. In the demo we have a common app bar that will be consistent across the application as well as a menu item app bar that we will use to interact with the 3D content.

Lets have a quick look at the menu item app bar that we’ll use to interact with the 3D models...

When we are in 3D mode we want to provide a flexible way to manipulate the view of the model you are looking at. This will include picking a specific component within a model by interacting directly with the 3D model.

However, we also want to provide some contextual 2D textual information to show what you are looking at as well as some efficient ways to navigate to specific components on the model without having to interact with the 3D model itself. To do this, we are going to build a menu item.

Menu Item App Bar
Menu Item App Bar

As you can see in the scamp (above), when first entering into 3D mode for a specific model, you will be presented with the menu item that sits on top of the app bar. By default no component will be selected. Selecting the text (in this case ‘None Selected’) will present you with a list of selectable components or by using the left and right arrows you can cycle through the components one at a time. If you tap the text ‘None Selected’, the menu item will raise upward, revealing a list of components that you can select within the model. You can select any of the components from within the list and the menu item will collapse back down to the app bar (hiding the list) and you will be ‘flown’ to the optimum viewing angle of the specific component of the 3D model. Cycling through the components by using the left and right arrows “Flies to” and “Picks” components in the same way.

3D Content

Whilst the 3D content does not demonstrate XPF functionality directly, it does demonstrate the sort of situation that has brought about its creation - you would not be able to build this sort of 3D interactive functionality in Silverlight.  XPF allows you to combine both 3D and 2D, linking the two worlds using powerful data binding to create elegant implementations.


So to summarise, hopefully this blog will give you an idea of some of the things that you are able to build by using XPF within your XNA applications. Our complete set of scamps around this demo app are much more in-depth with lots more ideas for future functionality. However, what we actually build for a demo app will be closer to what I have talked about in this post.

We’ll post a video shortly of us playing with the 3D model interface deployed on a WP7 device.

We’ll continue to build out XPF with new cool features in the mean time. More blogs to follow and of course, more nightly builds.

Cain Ullah

CEO / Founder

More from Cain