A good part of my professional life last year was taken up working with Showtime and Method (among others) to get Showtime Interactive built while we were still creating the Windows Media Center Presentation Layer platform (Media Center Markup Language + .NET 2.0).

Thanks to our friends over in developer envangelism you can learn more about what it took to build this experience at http://www.microsoft.com/casestudies/casestudy.aspx?casestudyid=4000000490.

Charlie

Matt Ivers has a pretty good article on Code4Fun titled Control Windows Media Center using a Windows Mobile 5 Device. I haven't tried it out yet, but looks like a solid tutorial on how to create a background application.

Charlie

For years we have had folks ask us for a complete end to end sample. Allow me to take a brief moment of your time and introduce you to our newest family member...

Z

Here are screenshots of what you get with this sample application which debuts with the Windows Media Center Software Development Kit we are making available today:

An on screen keyboard designed to work especially well for remote control (while still working quite naturally for mouse and keyboard). For example, Channel Up / Down allows you to cycle through pages of characters (we ship EN-US uppercase, lowercase and symbols) without having to navigate off of the characters themselves. You can expand the number of pages by adding additional MCML to the source. A commented QWERTY version is already present in the source if you prefer that approach for your end users.

The login page demonstrates a typical username, password and remember me functionality. It's not actually wired up to anything for authentication, but provides a ready made example appropriate for most login experiences.

The top level navigation ('Main Menu') features a nice animation to highlight the row which has current focus. The hypothetical Z company is a triple play, offering great content for Movies, TV and Music. You will begin to notice the animated 'living' background and multiple levels of transparency within and across objects.

The main menu features promotional items which can drill down to the detail page for that item. A good bit of Z is data driven using XML and the SDK includes the Microsoft Access database used to create the XML for developers who want to start with Z and expand features.

Selecting the Movies item takes us to the gallery featuring all movies. The galleries have working filters similar to the pivot points in Windows Media Center. Here we begin to see that in Z, content is king. The design is heavily weighted towards highlighting the images associated with the content and a de-emphasis of the user interface elements.

Selecting one of the items in the gallery takes us to the details page where content is really highlighted with a full screen image. Note the alpha blending of graphics. This is also a good chance to point out the Z main menu logo at the top as well as the Search and Downloads buttons at the bottom which persist on almost every page in Z.

After selecting the Preview button you are treated to the graphics alpha blended on top of a full screen video. In this case it's a sample from the Windows Media High Definition Showcase.

After selecting the Purchase button, Z begins the download of the content using a download manager service (again, full source code included in the SDK) which runs in the background. You can exit out of Z and even close Windows Media Center and the download will continue. By default, downloaded files are placed in \users\public\videos\ so they can be viewed in the Windows Media Center Videos gallery. Note the dialog box customization with Z logo.

Navigating down to and selecting the Downloads button takes us to a page where we can monitor the status of all current downloads, complete with working progress bar.

Here we see the TV gallery which showcases reuse of the same focus elements as other galleries but sized differently and arranged in two rows. In addition, the TV feature is 'deeper' than Movies -- it features 'Shows' which can be selected to see the 'Episodes'. This is designed to show how flexible the databinding is in Media Center Markup Language.

Drilling down to one of the TV episode items ('Error Amice') takes you to a details page which demonstrates use of the FindService method. As with Movie Preview we have alpha blended graphics (we can't show you a screen shot of that because we don't have rights to the images in the TV show -- but it works :-).

Selecting the 'Poena Commemorandum' item in the TV strip on the Main Menu takes you to a details page where you can schedule an individual recording using the Click To Record API. Note the Dialog box customization with the show image instead of the Z logo.

The Music feature in Z is designed to enumerate files and folders located in \users\public\music\ and offer them up to the user. This was one of the last features we implemented and we didn't have time to 'make it pretty' via interop with Windows Media Player to get additional metadata and album art. There have been a few requests from end users to be able to walk folders and this example provides a good starting point. When you select and individual music file we add it to the queue using the PlayMedia method. If there are no other items in the queue it immediately starts playing.

Z implements a search feature which returns results from the data XML and allows you to navigate directly to the detail page for the items found in the search. This works for Movies and TV but we didn't get around to enabling music. (Ah, work to book for vNext...!) It's also important to note anytime you navigate to a text box you can invoke the on screen keyboard.

At the top of every Z page (with the exception of login, main menu and on screen keyboard) there is a 'back to main' button which allows you to return to the Z Main Menu at any time. It's a graceful animation when it gets focus and the logo 'expands' to show the 'back to main' text.

Here I've brought up the mouse navigation and transport toolbars. Our design team did a great job making the 'back to main' button conform to the SDK guidelines for mouse overlays while at the same time giving it 'feature parity' with the Green Button and Back buttons native on the mouse toolbar.

Z was a wonderful group effort leveraging a great team both internal and external to Microsoft. A huge word of 'Thanks...!' goes out to the following folks.

The 'Softies...

Brian Kralyevich, Design Manager and Kristina Voros, Usability Engineer were invaluable in working with Method (see below) to make sure our design and usability was awesome and elegant.

Chris Glein, Software Development Engineer was responsible translating the design and making it a reality for the bulk of the data + logic (managed code) and UI (Media Center Markup Language).

Jeff Bogdan, Software Development Engineer took on the stretch goal of implementing the download manager using the new Windows Communication Foundation.

Michael Creasy , Software Design Engineer for Test and Reza Khoshbin provided the testing to make sure Z worked well and delivered what we said we wanted. Michael also provided some of the photography you find in Z.

Aaron Stebner , Program Manager provide a ton of testing, code reviews, developer scripts, Visual Studio integration, source code control and the wonderful Wix (http://wix.sourceforge.net/) installer files which makes it super easy for developers to compile and build a ready made MSI with this sample out of the box.

Michael Palermiti and Lars Giusti provided images from their personal photography collection.

And our partners...

Method (http://www.method.com/) in San Francisco did a great job working with the design and usability team here at Microsoft to envision a back story for the hypothetical Z company as well as come up with several elegant (and highly usable) designs which really made 'the content king' as we requested. Let me give props to Wendy McKennon - Senior Interaction Designer, Tomas Celizna - Senior Designer, Jon Arnett - Senior Designer, Aaron Clinger - Design Technologist, Darcy DiNucci - Interaction Director, Robert Murdock - Design Director, David Nelson - Senior Design Technologist and Galen Myers - Relationship/Account Manager. You guys utterly ROCK...!

Thomas Hawk provided the bulk of the wonderful photos from his personal collection. We wanted some images which would really inspire designers and developers alike and evoke emotion to represent TV and movies. It is very gratifying to highlight the work of a capable photographer who is also an end user fan of Windows Media Center and a passionate blogger.

Watch for a subsequent post today on where you can go to download the Windows Media Center Software Development Kit 5.0. Once you've gotten the SDK we encourage you to compile this app, install and give it a whirl...!