Using New Windowing Feature in Windows 8.1

  • Article

I’ve just updated my Windows Store app, Zoetrope to take advantage of the new Windows 8.1 feature where apps can span across multiple windows. With this new feature, your app can create new windows to accomplish tasks.  If you are looking to understand how to design this feature in your app, take a look at these new guidelines for multiple windows article on MSDN.  In the case of my Zoetrope app which is the easiest app to create stop-frame animation movies from still photographs, I decided to create a new window when taking photos.

In the Windows 8 app, when the user wanted to take photos from their webcam, I showed a new preview pane in the app and slid the photo collection to the right.

 Zoetrope1
Original Single Window Design

Now – in the new Windows 8.1 version of Zoetrope, I show a new window to the right of the main app window – a much cleaner design and it allows the user to resize each window and even move the windows to additional screens if the user has them.
Screenshot1
New Multiple-Window design

Design Considerations

With multiple windows, there are a number of design considerations that you take into account – the guidelines are helpful and here is how I applied them:

  • imageI put a close pane button in the upper right corner of the preview window to give the user a clear way to close the preview and stop taking photos.  Putting this in the upper right corner would be familiar to anyone who has used the Windows desktop. 
  • I oriented the bottom App bar buttons to the right, putting the photo button in the most accessible location – as the preview pane will be displayed to the right of main screen.  Because the user can reposition the preview window to the left edge of the screen, I had to make a decision about whether to reorient the buttons when the window is on the left.  I opted to leave the buttons in the same place for consistency, following the design guidelines for app bars, even though the buttons aren’t optimally placed for touch – when on the left, the photo button is the furthest from the left edge.  I’d love to get your opinion here – did I make the right decision when the user moves the preview pane to the left of the screen?
  • I followed the design guidelines for resizing windows to tall and narrow layouts to change the margins and title sizes when the preview pane is narrow – 500px is the default width.

Development Considerations

As I changed Zoetrope to use a secondary window, there were a number of changes that I had to make to my app in order to accommodate the new application architecture.  I used the Multiple Views Sample as a starting point for understanding how to use the new feature.

  • Each window has a separate user interface thread – this means that a MVVM design where two views connected to the same model that implements INotifyPropertyChanged will not work.  I ended up with a design where each view accessed the Dispatcher of the Page-derived classes that implemented each view.  I would then call Dispatcher.RunAsync() when I wanted to send information from one page to another.
  • The secondary window can be closed programmatically or via user interaction.  You need to handle the ApplicationView.Consolidated event to handle both instances if you need to do any cleanup of resources when the window closes.

Try Zoetrope

Please give Zoetrope a try – it’s free and I’d love your feedback on how you like the app – how are you using multiple windows in your app?