First Impressions: Working with Prism in WPF

Three weeks ago, I started working with Prism on a WPF application.  Here are a few of my first thoughts:

The Good
Prism is an extremely powerful framework.  It provides classes to help you manage all parts of your WPF application (or Silverlight or Windows Phone 7 -- I'm sure that Metro will be coming soon).  So far, I've worked with the following features:

• Modules / Module Catalog
• UI Composition  / Regions / Region Manager
• Navigation
• Dependency Injection
• Event Aggregation
• Other "Helper" Objects

The Bad
Prism is not for beginning programmers.  If you do not have a solid grasp on intermediate .NET topics, then much of the Prism framework is going to look like magic incantations.  This can only lead to misuse of the framework classes, and most likely this misuse will lead to not getting the benefits (such as good separation of concerns, re-use, and testability).

Before using Prism, you should have a good foundation with the following topics:

• Dependency Injection / Inversion of Control
• Interfaces
• Delegates / Func<T> / Action<T>
• Lambda Expressions
• Events and Event Handlers
• Model-View-ViewModel (MVVM)
• Various other Design Patterns

As a side note, the documentation ("A Developer's Guide to Microsoft Prism 4" -- available as a PDF or as a tree-book) has an appendix dedicated to the primary design patterns used by Prism.  This includes Adapter, Application Controller Pattern, Command Pattern, Composite and Composite View, Dependency Injection Pattern, Event Aggregator Pattern, Facade Pattern, Inversion of Control Pattern, Observer Pattern, Presentation Model Pattern, Registry Pattern, Repository Pattern, Separated Interface and Plug-In, and Service Locator Pattern.

Good Collection of Features
Prism is an extremely powerful framework and has gone through several iterations and refinements.  The current version (4.1) even includes support for Silverlight 5.  The Patterns & Practices team has obviously put a lot of work into the framework, and my experience so far has been bug-free (from the framework perspective at least -- I'm working on making my own code bug-free).  Let's take a closer look at the features that I've experienced so far:

Modules / Module Catalog
Modules allow you to separate your application functionality into discrete units that can be "plugged in" to the application.  The modules can (should?) be designed to be application agnostic and self-contained.  This means that they can be re-used in other applications.  For example, if you have a need for Customer Maintenance, this could be its own module.  If you have proper separation of concerns, then this module could be used in multiple applications.

For the application I am working on, we have modularized most of the application "screens".  These are being tied together through a work flow.  As a (fictional) example, to take a customer order over the phone, you could start with the Customer module (either entering new customer data or selecting an existing customer), moving on to a Shopping Cart module (where products and quantities are selected), then to a Shipping module, then to a Payment module.  If these modules are designed to work in isolation, then they can be reused in the same application in different work flows.

The Module Catalog keeps track of all of the modules in the application.  This can be set explicitly by specifying types and assemblies, or it can be done much more dynamically.  In our project, the bootstrapper process (that loads the module catalog) searches all of the assemblies in a particular folder and catalogs / initializes any modules that it finds in there.

UI Composition / Regions / Region Manager
The Region Manager is another very powerful tool.  It lets you associate different Views with different Regions of the UI.  This allows you to bring several Views together into a single "screen" for the user.  Different Views can interact with each other (through the Event Aggregator) and still remain programmatically isolated.  The idea is very similar to how a Master Page in an ASP.NET application allows you to have multiple web forms shown in different areas of a single "page".

Navigation
The Navigation infrastructure adds quite a bit of functionality to moving between views.  For example, what do you do if you have unsaved data in a View and the user wants to navigate to another View?  WPF does not have anything built in for this scenario, but Prism does.

Prism offers the IConfirmNavigationRequest interface that can be added to your Views or ViewModels (as a side note, many of the Prism features can be added to either the View or the ViewModel and they behave the same -- this gives you great flexibility depending on whether you are coding View-first or ViewModel-first in your application).  This interface has a ConfirmNavigationRequest method.

When using the Navigation infrastructure, you call "RequestNavigate" (notice the word "request").  The method parameters include a callback that runs when the navigation completes successfully.  But, when RequestNavigate is called, ConfirmNavigationRequest is fired on the View/ViewModel that you are navigating from.  This gives that View/ViewModel the chance to confirm or cancel the navigation.  For example, if the current View/ViewModel has unsaved data, it can prompt the user to Save, Discard Changes, or Cancel.  Cancel would then cancel the navigation, and the current View would remain in place.  Otherwise, the "from" View/ViewModel can simply call the callback, and navigation completes normally.

There are also other methods in the interface (part of INavigationAware and IConfirmNavigationRequest) that allow you to run code "OnNavigatedFrom" (to clean up any resources in the current View/ViewModel) or "OnNavigatedTo" (to initialize the new View/ViewModel).

This functionality is very powerful, and if you did not use what comes with Prism, you would probably end up building a lot of this yourself.  I speak from experience: I implemented a much simpler ICloseQueryable interface on a simple form manager used in a non-Prism application (for more information, see XAML App Review - Part 2: Form Manager).

Dependency Injection
You won't be able to use Prism effectively without dependency injection.  In order to have good separation of concerns for the modularity, MVVM presentation pattern, and other cross-cutting concerns, Prism needs a dependency injection container.  Prism ships with implementations for using Unity (from Patterns & Practices) and MEF (built into .NET 4.0), but you can build your own implementations for using a different DI container (or just cruise the web; I'm sure other people have created implementations for the most popular DI containers).

I've been working with Unity on our project.  With Unity, you can use both Constructor Injection (where the dependencies are specified as parameters in the constructor) and Property Injection (where public properties are flagged as "Dependency" and automatically resolved).

Dependency Injection lets your Views/ViewModels get access to the cross-cutting classes in your application.  For example, you could have an Authorization or Logging service/class that gets injected into each View/ViewModel.  This way, if the Module is used in a different application, the ViewModels will automatically get the cross-cutting services that are registered for that application.

In a Prism application you will (hopefully) make heavy use of interfaces.  For example, the ViewModel could have a dependency on a Model interface, and this dependency could be injected with constructor injection.  This gives you the flexibility of swapping out the Model when you want to unit test the ViewModel.

In this scenario, the application would use the DI container to associate the IModel with the concrete Model (with "RegisterType" if you're using Unity).  If this registration is done at the Module level, then the dependency can be correctly injected everywhere it is used. In the unit tests, you could create a mock of IModel that is registered with the test container.  This makes it very easy to unit test your ViewModel without having to worry about a specific implementation of that Model (such as one that needs a network connection to a service).

I'll be talking more about Unit Testing with Prism and Unity in a future article.  That's an interesting topic in and of itself.

Event Aggregation
With all the loose-coupling that is going on in Prism, it could be very difficult to communicate between modules.  This is where the EventAggregator comes in.  The EventAggregator allows one module to Publish an event (with a particular payload), and any other module can Subscribe to that event.  The two modules do not need to know directly about one another.  One is simply publishing an event, and the other is simply listening for an event.  Neither cares about where the event is coming from nor where it's going.

The EventAggregator takes things another step beyond the normal eventing model in .NET.  The Subscribe method also gives you the opportunity put in a condition based on the payload.  For example, you could say that you want to Subscribe to a StockUpdateEvent, but only if the payload has a StockTickerID of "GM".  The event is published normally, but your event handler only fires if the payload has that particular value in it.

Other "Helper" Objects
Prism also provides helper objects that are designed to make life easier (often by reducing boiler-plate code).  Two of my favorites are NotificationObject and DelegateCommand.

The NotificationObject (Prism) is a base class that implements INotifyPropertyChanged (.NET).  Pretty much all of your ViewModels and/or Models will need to implement INotifyPropertyChanged in order for the data binding to behave as expected.  NotifcationObject is a concrete class that implements INotifyPropertyChanged, so you don't need to include the boiler-plate code for that interface in every single object.

DelegateCommand (Prism) simplifies commanding and the implementation of ICommand (.NET).  Commanding is a much larger topic, but the usual process is to create a class that implements the ICommand interface (this can be a class embedded in the class that uses it or a completely separate class).  ICommand has 2 primary methods: Execute (which is the command code) and CanExecute (which determines whether the command can be run -- this can enable/disable a button tied to the command based on a particular state).

DelegateCommand replaces this separate class with a constructor that takes 1 or 2 delegates as parameters. The first delegate is the code for the command to run ("Execute") and the second delegate is for the "CanExecute" (if you don't provide this, it will always be "true").  Again, this class helps to cut down the boiler-plate code of creating an ICommand object and eliminates the need for a separate type.  Since it is part of your class, the delegates also have access to the internal members/state of the containing class.

Putting It All Together
These features all come together with the goal of making the application easier to maintain, more testable, and reusable.

One main thing to note: you don't have to use all of these features.  If you decide that you do not want to use the Region Manager or Navigation, that's fine.  If you don't want to use the Event Aggregator, that's fine, too.  You can use just the features that you want.  Also Prism does not assume that you are using the MVVM pattern; you don't need to use MVVM, but Prism provides helpers to make the pattern easier to implement.  And even though the features are mostly optional, I think that you'll find yourself using most of these features for any non-trivial application.

I've read about Prism (and previously about the Composite Application Guidance for WPF) and have found it interesting.  At the time, I was concerned about a lot of the apparent magic that is going on (and I am still concerned about this).  It is imperative that you have a good handle on the foundational principles used in Prism before you get started.  If you have a good foundation, then you can build very solid (yet de-coupled, maintainable, testable, and modular) applications.

Three weeks is not that long to have worked with a framework such as Prism.  I'm amazed at how much more I know about Prism than I did prior to this project; much of this is due to a couple of folks on the team who have used Prism successfully in prior projects.  There's still some learning to do on the finer points, and we are still tweaking our implementations a bit, but the larger functionality has fallen into place.

[Update: Here are some thoughts after working with Prism for a while: Five Months In: Working with Prism in WPF]

Happy Coding!

Metrocizing XAML: Part 2: Control Templates

In Part 1, we saw how we could update the look and feel of our XAML applications by changing a bit of layout and our Data Template.  This time, we will take things a step further.  First, we'll do a quick overview of some of the minor changes (colors and general layout), and then we'll dive into creating a custom control template for our buttons to make them more Metro-ish (Metroid?).  As a reminder, here are the UIs of our "old" and "new" applications:

Old Layout

New Layout

The source code for both of these projects is available here: Jeremy Bytes - Downloads.  These applications are in the "Old.UI" and "New.UI" projects respectively.

Application-Level Updates
Several of the updates to the application have to do with the general layout and colors.  You can check the XAML for more details on this.  The key features are the re-arrangement of the grid (swapping the ListBox and Button panels), removal of the background gradient, and the insertion of a solid background.

As mentioned in Part 1, the resources for the application (brushes, data templates, and value converters) were moved from MainWindow.xaml to the App.xaml Resources section.  Let's start by looking at the top of our App.xaml (from New.UI):

The first thing to note is that we have moved our Value Converters from MainWindow.xaml to here.  This was necessary because several of the value converters are used in the ListBox Data Template that is also in this file.  To bring in the Value Converters, we needed to add the namespace for the local project (so we can access the classes in Converters.cs).  For more information on Value Converters and how they get added, please see Introduction to Data Templates and Value Converters in Silverlight (also works in WPF).

The next section contains brushes for our application.  There were no resources for these items in the old application.  I added them here so that it would be easy to update the application colors in the future (since Metro-ish applications will go out of style sometime in the future).  Notice that I named the resources after what they are used for and not what colors they are.  If I had named the resource something like "LightGrayBrush", then it would be difficult if we wanted to change it to another color.  Since the name describes what the brush is used for (rather than what it looks like), we can change this to blue in the future without worrying about mis-matched names.

These application brushes are tied to the XAML in MainWindow.xaml (such as setting the application background).  And, as we'll see, these are also used in our control templates for the buttons.

Let's see what else is in the App.xaml (sections are collapsed to get the overview):

First, we have a Control Template and Style for our "GoButton".  We'll be spending quite a bit of time in this detail below.  Next, we have a Control Template and Style for our "ClearButton".  The buttons differ in the icons (an arrow vs. an X), but they otherwise behave the same.

Next we have 3 different TextBlock styles for "ApplicationText", "ListItemTextStyle", and "ListTextStyle".  We saw the ListItemTextStyle and ListTextStyle in use in our Data Template in Part 1.  Finally, we have our Data Template for the ListBox.  We looked at this in detail in Part 1.

Comparing Buttons
So, what are the differences between our old and new buttons.  Let's compare them side-by-side:

Old Button

New Button

One big difference is operation.  The old button is only clickable on the part that looks like a button (the "Fetch" part).  The new button is clickable anywhere in the rectangle.  This makes it much friendlier to touch-enabled applications since it is a much bigger target.

Let's compare the XAML, starting with the old button in MainWindow.xaml (in Old.UI):

Notice that we have a border that encloses a StackPanel.  And that StackPanel contains a TextBlock and an actual Button.

Compare this to our new XAML (in MainWindow.xaml in New.UI):

The difference is here we just have a Button with the content of "Concrete Class".  So, where's the rest of it (the border and the icon)?  That's all part of the custom Control Template.  And it's getting applied to this button through the Style property.

The Button Style
As we saw earlier, the GoButtonStyle is in the App.xaml.  Now, let's take a look at the details:

The Style allows us to apply settings to properties centrally.  We have 2 buttons in our application that use this Style (the "Concrete Class" button and the "Interface" button).  But we only have to set these properties once.  And if we decide that we want to change something (like the FontSize), we just update it here, and it automatically propagates to all buttons that are using this Style.

Notice that the "Foreground" and "Background" properties are set to our "Application" brush resources that we set above.  This is important.  We want our buttons to have the same background as the application.  If the application background changes, we want our button background to change along with it.  (Note: this might not always be the case, but that's the behavior that we want here.)

Finally, we have the "Template" property set to the Control Template that's also in our App.xaml.

The Button Control Template
Before we look at the specifics of the GoButton Template, I want to say a few words about Control Templates.

As mentioned in Part 1, XAML controls are "lookless".  This means that the behavior is completely separated from the visual display.  We are provided with default templates (so that we don't have to create our own), but the templates are fully customizable and/or replaceable.

Control Templates are generally very complex.  They are designed to handle a variety of states.  For example, a button has a number of states, including "Normal", "MouseOver", "Pressed", "Disabled" as well as "Focused" and "Unfocused" (in addition to others).  If you want to have all of these features available, then it's often easiest to use Expression Blend to export the current control template for you to modify.

In our case, we are only handling a subset of these states (Normal, MouseOver, and Pressed), and we don't worry about the other states (since they aren't really applicable to our application).  One thing to note: just because we do not implement a visual change for a State does not mean that that State does not exist. For example, our control template does not implement "Disabled", but our button can still be disabled -- it just won't look any different from an enabled button.  Same with "Focused" -- the button itself still supports the idea of "focus", but it will not look any different if it is focused.

If we were creating a set of custom templates to be used more extensively, then we would definitely want to implement all of these states.  As it is, we'll just focus on the ones we care about for this application.

Control Template Overview
Our Control Template is more complex than other bits of XAML that we've seen so far, so we'll break this down into several different pieces.  First, let's look at an overview of the Control Template with several of the areas collapsed:

First, we have the ControlTemplate tag.  The TargetType lets us know what kind of control this applies to.  This template can only apply to Buttons.  If we were to try to apply it to a TextBox or ListBox, we would get an error.  The Key let's us reference this like any other Resource.

Our outer element is a Grid.  This is there primarily to hold the other elements; we don't have any Rows or Columns defined at this level.

Inside the Grid is the VisualStateManager.  This is how we provide different looks for the States that we mentioned above.

The Border is the first visual element.  We'll take a closer look at the details of this in just a moment.  Inside the Border, we have Grid for layout purposes.  This Grid has both Rows and Columns and contains our ContentPresenter and our Canvas.  We'll see more details on these in just moment as well.

Now, let's go through each of these parts.  We'll start with the primary elements and then swing back up to the VisualStateManager at the end.

The Button Border
Here is the complete markup for the Border (the outer edge of our Button):

Notice that the BorderBrush property is set to a "TemplateBinding".  The TemplateBinding markup extension indicates that this should be bound to one of the main properties of the Button.  In this case, we want the BorderBrush to be the same as the Button's "Foreground" property.  And remember from our Style, the "Foreground" is set to the "ApplicationTextForeground" by default.  But this can be changed.  If we change the Button's Foreground property (either in the property inspector or in the markup, then the BorderBrush will change along with it.

The Border Background property is a little bit different.  Notice that we have a SolidColorBrush that is set to the TemplateBinding of Background.  This let the background color change if the Button Background property is updated.  Notice also that we have a x:Name on our brush (ButtonBackgroundBrush).  We gave this element a name because we will use it in our VisualStateManager -- when the State changes, we want the Background to change.  We'll come back to this.

The Button Main Layout Grid
The next element is the Grid which has our main layout for the Button:

Let's look at our button again:

The Grid defines where we will place our elements.  The first Grid Row/Column contains the "ContentPresenter".  The ContentPresenter is responsible for displaying whatever is in the "Content" property in the Button.  In our case, the Content is simply text ("Concrete Class").  We use a ColumnSpan of 2 so that the content can stretch the full width of the Button.

Notice that our ContentPresenter does not have any sort of Font information included.  Any text that appears in the ContentPresenter automatically picks up the Font information from the Button itself.  Since we have all of that information set on the Button Style, we don't need to worry about it here.

As a side note, if we tried to put more than just text into the Content property, our Button would probably behave strangely.  This is another area that you need to look into further if you are interested in creating your own button templates that can be used in a variety of situations.

The Canvas is in the second Grid Row/Column and contains our arrow.  Since the Row/Column definitions are set to "Auto", this will only be as big as the contents.  Since the first column is set to "*", it will take the remaining space.  The result is that our icon will be aligned to the bottom right side of our Button.

The Arrow Icon
For the Arrow Icon, we could have used a graphic, but that's generally not the best approach.  XAML is designed so that things can be easily resized, stretched, or re-flowed to fill in available space.  The best way to make sure that your controls can handle stretching/resizing is to use vector descriptions rather than a .gif or .jpg.

I shamelessly stole this arrow from Laurent Bugnion's blog: 56 Vector Arrows in XAML (isn't the Internet great?).  This blog article includes a bunch of different arrows (56) that are all described in XAML paths.  I found one that I liked, did a little cutting, and pasted it into my application (then tweaked the colors a bit to fit the style).

I won't show the entire output (since a lot of it is a list of numbers for a Path), but here's the relevant bits:

For the Path statements that make up the arrow and the circle, I made a couple of changes.  First, I set the "Fill" property to a TemplateBinding to match the Foreground of the Button.  Then, I changed the Opacity to "0.5".  This will make the arrow semi-transparent (with the effect of a lighter color).  This means that the arrow icon will look lighter than the Button text even though they are the same color.

The "Data" property contains the meat of the path, specifying all of the points in the arrow and circle.

The Visual State Manager
Now that we've see all of the default visual elements, it's time to look at the VisualStateManager.  This determines what our Button will do when the various states change.  Again, what we have here is very simple; we could make this much more interesting/complex very easily.

Our VisualStateManager has a number of VisualStateGroups.  The States that we care about are all in the "CommonStates" group, but the Button also has "FocusStates" and "ValidationStates".  The reason there are different groups is to allow for overlap.  For example, we could have a button that is both "MouseOver" (from the CommonStates) and "Focused" (from the FocusStates).

Since we only care about the CommonStates, we just have one VisualStateGroup in our Control Template.  Inside the group, we have 3 different VisualStates.  Each VisualState determines what will happen when the control enters that state.  In each of our VisualStates, we have defined a Storyboard with an Animation of Duration zero.  This means that we are animating a property (the background color), but the zero duration means we have no "transition" -- the color change happens immediately.  If we wanted to be more creative with our transitions, we could add additional animation (such as pulsing when the control is focused).

Our three VisualStates all set the same property.  Notice that the Storyboard.Target is set to the ButtonBackgroundBrush.  This is the name of the brush in our Border.Background that we saw above.  Then we have the Storyboard.TargetProperty which specifies what property we want to set.  In this case, we want to set the "Color" of the brush.  Finally, we have the "To" that specifies the new value for the property.

For the "Normal" state, we set the color to the "TemplateBinding Background" (which is the default background color we want).  For the "MouseOver" state, we set the color to LightSlateGray, and for the "Pressed" state, we set the color to "White".  (Note: we would probably want to set these to resource colors or TemplateBindings for a more robust Control Template.)

When we put all of these elements together, we get the visual layout and state-change behavior for our GoButton.  The template for the ClearButton is very similar.  The primary difference is that instead of using a set of Paths for the icon, it simply uses a large letter "X".  Again, for a production application, we would probably want to take a little more time to do a vector graphic.  But this works for our simple case.

Putting It All Together
So, now that we've looked at the updated Data Template, Value Converter, Application Brushes, Styles, and Button Control Templates, we can see how these pieces all fit together to form the fresh look of our application:

And remember, we did all of these changes without modifying our Application code -- the application behaves just like it did before (loading in data from a web service and displaying it in a ListBox).  And now we have a completely new look with about a day's worth of effort (and a lot of that was experimenting with colors and layout).

XAML is pretty awesome, huh?

Happy Coding!

Metrocizing XAML - Part 1: Data Templates

Let's face it: gradients and glassy buttons just aren't "cool" anymore.  In a way, it sucks; these applications aren't that old (just a year or two).  But now they look dated.  And this is what makes XAML awesome.  Since XAML is "lookless" (meaning that the visual representation of the controls is separated from the underlying operation), we can rip out an old look and drop in a new one without needing to change our application code.  And if we have proper separation of the thematic parts of our application, those updates can be isolated to a single location.

As I mentioned a couple weeks ago, I went through several of my sample projects and "metrocized" them.  Since these are XAML solutions (several WPF and one Silverlight), the updates were not complicated.  Let's take a look at an "old" and a "new" screen together.  These are taken from the IEnumerable, ISaveable, IDontGetIt: Understanding .NET Interfaces samples (specifically the IEnumerable.sln).

Old Layout

New Layout

These projects are available for download in a combined solution here: Jeremy Bytes - Downloads.  The "Old.UI" project contains the old layout; "New.UI" contains the new layout.

XAML is Awesome
The best part of this whole process is that XAML completely separates the visual display from the controls themselves.  This gives us the chance to change the way our application looks without having to change the underlying code.  And as we go through this example, we'll see just that.  We didn't need to change any of the application code. (Note: There is one small change to the Value Converter code; but this was done to put some different colors into the converter.)  The rest of the updates are in the XAML itself.

One thing to note: I am not a UX designer.  I put together passable user interfaces that are pleasing and functional, but I'm not one of those UI wizards (you know who I'm talking about -- the guys that come up with incredible designs, and you smack yourself on the forehead: "That's so obviously awesome!").  I put together the bulk of the design updates in about half a day (colors and layout).  It took me a little longer to iron out some of the kinks in the Control Templates.  Once the hard part was done, implementing the changes in the different application was very easy (mostly just replacing XAML in the right places).

We'll be looking at these updates in 2 parts.  The first part (this one) will cover the updates to the ListBox -- the one with the Person objects listed.  This is primarily concerned with the Data Template used by the ListBox, the Value Converter for the color, and a few other minor updates.

The second part (next time) will cover the updates to the Buttons.  Our original application used the standard button look-and-feel.  The new application uses a custom control template.  With the control template, we control the layout, the design (such as the arrows), and also the display behavior -- although you can't see it in the screenshot, the buttons have different colors when you hover over them or click them.  This template is fairly simple (compared to how far you can go with control templates), but it has the effect that I was looking for here.  We'll walk through this sample in Part 2.

ListBox Updates
The ListBox itself stays pretty much intact.  The primary differences are the placement in the application Grid (on the right instead of the left), and the inclusion of a WrapPanel -- this gives us the ability to show multiple columns in our ListBox.  Let's compare our old and new markup to see the changes.

First the old markup (from MainWindow.xaml in Old.UI):

Now the new markup (from MainWindow.xaml in New.UI):

The primary difference is the addition of a WrapPanel.  We did this by adding tags for the ListBox.ItemsPanel and the ItemsPanelTemplate.  By using the WrapPanel, we are specifying that if we run out of space, to "wrap" the list to another column.  The WrapPanel has an Orientation property to determine whether to wrap vertically or horizontally.  "Horizonal" is the default, and so that is the direction we have here.

Normally, a ListBox would just scroll in order to accommodate any items that don't fit on the screen (either horizontally or vertically).  Because we have our wrap panel going horizontally, we need to disable to built-in horizontal scrolling of the ListBox (otherwise, it won't actually "wrap" to the next row).  This is why we added the "ScrollViewer.HorizontalScrollBarVisibility="Disabled"" attribute: to disable horizontal scrolling.

The items in the screenshots are in the same order: John Koenig, Dylan Hunt, John Crichton, Dave Lister, John Sheridan, Dante Montana, Isaac Gampu.  If we look at the new sample, we see that Dylan Hunt (the 2nd item) comes horizontally after John Koenig.  Then we "wrap" to the next line for the 3rd and 4th items).

If we wanted to wrap vertically (so the items go down the first column, then down the second column), we would simply set the WrapPanel Orientation to Vertical, and then disable the Vertical scrollbar on the ListBox.

A Note About the WrapPanel
The WrapPanel is a standard control in WPF 4 (Visual Studio 2010).  If you are using Silverlight (4 or 5), the WrapPanel is available as a separate download as part of the Silverlight Toolkit.  I used this same ListBox layout in a Silverlight 5 application, and it worked just the same as the WPF version.

The ListBox Data Template
So, the updates to the ListBox itself are not very extensive, but the items are displayed completely differently.  This is because we are using a separate Data Template to control the layout.  This is denoted in our markup by the ItemSource = {StaticResource PersonListTemplate}" attribute.

If you are not familiar with Data Templates, I would highly recommend that you take a look at Introduction to Data Templates and Value Converters in Silverlight (this works the same in WPF).  This covers the creation of the Data Template that is used in the "old" application.  We'll just be looking at the differences here.

The Old Data Template
First, let's review the old Data Template.  This is located in the Resources section of MainWindow.xaml (in Old.UI):

Just a few notes here: first we have a Border that surrounds our entire template.  The BorderBrush is databound to the StartDate property of the Person object.  This goes through a Value Converter (myDecadeBrushConverter) to turn the date into a brush.  The result is the border color of each item is determined by the decade of the StartDate property (different colors for 1970s, 1980s, 1990s, and 2000s).

The rest of the Data Template is described in the article mentioned above.  Basically, we have a collection of StackPanels and TextBlocks to layout the data in the format that we want.

Here are the results for Dylan Hunt:

The New Data Template
The new Data Template is a bit more complex.  The first thing to note is that it is no longer in the MainPage.xaml file.  The Data Template (along with all of our other resources) have been moved to App.xaml.  The App.xaml Resources section gives us a place to put resources that are available to our entire application.  In this sample, we only have one screen, so we don't get much from sharing.  But we do get a big benefit from centralizing all of our "theming".  If we want to change the look in the future, we only have this one place to look (rather than in the separate XAML files).  Managing Resources is a bigger topic with lots of options (such as creating completely separate resource dictionaries and assemblies).  If you're building larger applications or a suite of applications that all share the same "look", then you'll want to check into this further.

The first part of the new Data Template contains the Border element (from App.xaml in New.UI):

The big change here is that we are no longer binding to the BorderBrush property, we are binding to the Background property.  This gives us our different color backgrounds for each item.  The Value Converter has also been updated a bit (for the new colors and a bit of optimization).  We'll take a look at this in just a bit.

Next, since our layout is a bit more complex, we have a Grid to help us layout our controls:

This gives us 3 rows and 2 columns to work with.  Then we have the main layout of our controls:

Again, nothing too unusual here: we're just using StackPanels and TextBlocks like we did before, just with a different layout.

The Styles for the items have been broken out (also in App.xaml of New.UI):

This lets us control the Font properties and alignment separately.  If we change our minds about these settings, we can just update the Styles, and our controls will pick them up automatically.  Note here that we are using "White" text since we have a contrasting background color.

Here's the result for Dylan Hunt:

Updates to the Value Converter
We also made some updates to the DecadeBrushConverter.  This converter returns a Brush object based on the decade of a DateTime property.  Our old converter controlled the Border color; the new converter controls the Background color.

Let's look at our original converter (in Converters.cs in Old.UI):

The original Value Converter used a series of "if" statements to determine whether the DateTime value was part of a particular decade.  If so, then it returned a SolidColorBrush with an appropriate color.

The new converter has been refactored just a little bit.  Here's the new code (in Converters.cs in New.UI):

The biggest functional difference is in the colors that are returned.  Rather than being the primary colors of the old border, we have selected more "Metroid" colors for the background.

The change from the series of "if" statements to a "switch" statement was made due to cyclomatic complexity.  If you have Visual Studio 2010 Ultimate, you can calculate the Code Metrics for a project (under the "Analyze" menu).  One of the items is the Cyclomatic Complexity.  This value is like golf scores: smaller is better.  The cyclomatic complexity basically tells how many different possible code paths exist in the code.

With the series of "if" statement, the cyclomatic complexity was increased because we have 2 conditions in each "if" (the year is greater than or equal to one value and less than another value).  In our refactored code, we calculate the decade before running through the decision process (by doing integer math, when we divide by 10 we lose the last digit; when we multiply by 10 we add a "0" back on -- this gives us the decade).  Since we have the decade already, we can use a "switch" statement which only has 1 condition for each item (instead of 2).  This reduces our cyclomatic complexity even though our ultimate output is exactly the same.

As a bigger benefit, I think the second version is easier to read (but that's just a personal preference).

Changing the Look with XAML
So, we went from this:

to this:

without changing any of our application code.  All we had to do was update our XAML and our Value Converter.  That's pretty cool.

Next Time
Today, we looked at how we can update XAML Data Templates to give us a completely different look to our ListBox -- without changing the application code at all.

Next time, we'll look at how I created the control templates that are used for the buttons.  The old solution just used the default button templates, but we'll be able to see the changes from a combination of border, text, and button to a single custom-templated button that matches our Metro-ish style.

Happy Coding!