If you're into Silverlight or WPF, then you've undoubtedly heard the nonstop clamoring over Composite Application Guidance for WPF and Silverlight - aka Prism. I have a list of things in Evernote that I'd love to write about Prism, but I figured I would write about something I actually felt like typing up instead - something I tend to call Street Fighter style compositing in Prism.

Recap on UI Compositing in Prism

You already know one of the bigger parts of Prism is the UI compositing it supports. Regions are defined in the Shell.xaml and you inject modules into them. The idea being that you can add, remove, and swap out sections of your application dynamically. It's one of many great technologies in Prism.

Sample Stock Trader application using UI compositing

Prism documentation highlighting defined regions

Street Fighter Style Compositing in Prism

Having done a few Prism applications, I've found that the composite UI support in Prism is really snazzy, but I've also found that I don't tend to use it the way that most Prism examples show it off. While I will frequently define region areas like shown in the example above, I will just as frequently use regions for layering - kinda like how they did it in Street Fighter.

If you've played Street Fighter before then surely you've noticed that the UI is made up of layers on top of layers. The bottom layer is the static stage background, a layer on top of that might be the animated characters in the background, the layer above that may be where the fighters are shown, above that a layer for projectiles, above that a layer for health bars and high scores, and a layer above that for the menu - which is currently hidden.

If you're going to try and do this kind of layering with regions in Prism then one thing to keep handy is how to create a Prism region whose contents will not specify a specific size, but will scale to fit the entire region. You'll want this code snippet for such a region:

<!-- image popup area -->

<ItemsControl cal:RegionManager.RegionName="ImagePresentationRegion">

    <ItemsControl.ItemsPanel>

        <ItemsPanelTemplate><Grid/></ItemsPanelTemplate>

    </ItemsControl.ItemsPanel>

</ItemsControl>

The reason I find myself using this style of composition is that it allows a lot more flexibility if you're not creating a rigid desktop style layout. Using full window overlays will make it easy to place modules into the region centered horizontally and vertically - popup menus or loading status windows for example. There are some really neat things you can do with this kind of layering, especially with perceived depth - but that's not really the point of this article.

A Quick Example

Regions used in ImageWind.net alongside its current appearance

To use Image Wind as an example, here is a rough outline of the regions used (from back to front):

• background layer
• image side scrolling layer
• title region (upper left)
• controller region (lower left)
• full size image display popup layer
• popup dialog / loading layer (various modules displayed in center)
• beta badge and service error region (upper right)

Wrap up
The main point of this article wasn't to show the cool stuff you can do with layering, or to cover when you might want to do layering within the same region versus in different regions, etc. The point of this article was really just to make sure that the composite UI in Prism isn't always thought of in such a rigid way. Oh, and to coin the term 'Street Fighter' style compositing.

A rough outline of the region layout from another recent project