Now Playing with MVVM – Replicating the Zune Now Playing layout

This is part 4 of a series of posts in which I attempt to reproduce the Zune Now Playing interface using the MVVM pattern within WPF. An introduction to the series and table of contents can be found in the first post of this series.

In the previous postings I’ve assembled the infrastructure (however simplistic) that will help me reconstruct the Zune Now Playing interface. The plumbing I have in place so far has a lot of shortcomings, but I’m ready to put them behind me for now and focus on the layout for a bit. So the first order of business is to analyze the Zune software to see how they organize the covers. There is a pattern to the layout, which I’ve outlined below.

As you can see, the interface is made up of a collection of templates that overlap, giving it a random feel. With this information, I can lay out the interface by creating a new view that hosts 49 individual cover views of varying sizes.

These cover views are arranged in a parent grid by setting the margins for each one individually.

<Grid x:Name="LayoutRoot">
 <Views:LargeCover    Margin="0,0,0,0"      />
 <Views:SmallCover    Margin="0,280,0,0"    />
 <Views:SmallCover    Margin="70,280,0,0"   />
 <Views:SmallCover    Margin="140,280,0,0"  />
 <Views:SmallCover    Margin="210,280,0,0"  />
 <Views:SmallCover    Margin="0,350,0,0"    />
 <Views:SmallCover    Margin="70,350,0,0"   />
 ...

The interface is still Blendable, which gives me the opportunity to see how the albums line up.

To get a better feel for how the templates are going to come together, I can replace the covers on the MainWindow from previous postings with a couple of these new CoverTemplateViews.

Sweet. The UI is beginning to take shape, but it also creates a few //TODO items for me.

• Now that I’m working with larger surface areas, I’ll need some more sample data. I need to be sure that the covers are evenly distributed and changed randomly. I’d also like to introduce song data into the model for future use.
  
• The Zune software is resizable, and allows the user to maximize to a single monitor. Since I won’t know the end user’s screen resolution ahead of time, I’ll need to dynamically assemble these CoverTemplateViews inside a host container at runtime.
  
• The cover transitions in the Zune software are smooth and buttery. I need to work on the transition animations for my implementation.
  
• The Zune software has a nice looking overlay that tints the covers. The overlay is radial, and moves around a bit.

Download Project