Site Logo

Pixel-in-Gene

Exploring Frontend Development with Design / Graphics / Technology

Screens and Transitions - a cool WPF app

I have been working on a cool new WPF application that is supposed to run on a big Plasma display. It is going to be a non-interactive application that shows some information in the form of screens. A screen is a term we are using to denote a visual representation of some information. Some examples of screens we have include a Statistics screen that shows some numbers in a tabular format, a Photo Album that neatly lays out some photos (say from the last night’s party) and does some cool slideshow effects, etc. Each screen will stay on the display for a certain time after which a transition-animation will be played to switch to a different screen. The application has a plugin architecture, which makes screens as well as transitions, pluggable. A developer could create his own nifty screen, package it into a DLL and drop it into a known location. The application would pick that up the next time it loads.

Similarly transitions between screens are also pluggable. Some of the transitions that we have developed are Cube Rotations where the previous and the next screen are visually mapped to the two side faces of a cube; when the cube completes its rotation, the new screen fills the display. There are other transitions like fade-ins, zoom-ins and a flip-card like transition (think about the transition to Dashboard widgets options page in MacOSX). In fact the Cube rotation is also similar to the fast-user-switching in MacOSX…we are certainly getting lot of inspiration from that OS ;)

If you have seen the North Face demo from the PDC and/or read the North Face White paper, then you can think about this application as the generalized version. Here is a nice screenshot of the app while it is performing the Cube rotation. You can see the screens mapped to the two sides of the Cube. The right hand side screen is blurred intentionally.

What is exciting about this project is the integration with the Windows Workflow foundation. We use WF to describe the list of screens and transitions. The workflow itself is designed using a Visual Designer and exported as a XOML file. The app picks up the XOML and runs throught the screens/transitions as described in the workflow. The workflow side of things was done by my colleague. There are lot of interesting things about WPF and WF that we learned in this project and I’ll blog about them in future posts.

Screens and Transitions - a cool WPF app
Pavan Podila
Pavan Podila
September 8th, 2006