WPF Tutorials — Application Architecture
A well-conceived and documented architecture is at the heart of most successful software. As such, that’s where we’re going to start with what I’m going to call our Gradient Previewer. This post will concentrate on the goals of our architecture, the inspiration I’m drawing from, and the basic tact we’ll be taking. At the end, I’ll include a packaged Visual Studio 2008 Solution that you can download and look at what we’re starting with.
Architecture Goals
For this application, I have two main architectural goals. The first involves the separation of application logic from the user interface. Fortunately, WPF and the .NET 3.5 framework make this easy to do once you know a few tricks. This separation helps keep each separate piece of the application focused on a single task or set of tasks, making maintenance easier and the application more apt to be understood.
The second goal is to make the application skinnable. Quite frankly, I am not a very practiced visual designer, and I know that the first UI for this application will definitely not be the greatest thing since sliced bread. Taking an architectural approach that allows for the application to be skinned provides for the opportunity for the UI to be reworked down the line into something more beautiful. That’s the plan at least.
Architectural Inspiration
I’m definitely not going into this project blind. I’ve taken inspiration from many places. First and foremost, I’d like to thank Josh Smith for allowing the download of the source for his Podder application. You can find Podder here.
Another resource that I’ve relied upon as I’ve learned about WPF is the idea of the Model-View-ViewModel pattern that I first learned about on Pete W’s Idea Book. While I’ve taken it in a somewhat different direction (moving control out of the viewmodel and into a controller) it was a great resource to get me thinking.
Architectural Design
Getting down to the nitty gritty, let’s go ahead and examine the solution explorer window at this point. It will help illustrate how I’ve laid out the application.

The first thing you’ll notice is that the solution is split into two projects. The first project is GradientPreviewer, where our application lives and where all the stuff that makes the application work will happen. The second project is GradientPreviewerLib, which holds the models and viewmodels for this project. These are the back end data objects that will eventually be bound to our UI in various forms.
Looking through the first project, you’ll notice a number of different folders. The first is the Controllers folder. In the Controllers folder (and namespace), we’ll be placing a controller for each major UI element in our application. These controllers will be responsible for managing the actions that occur in the UI element that they encapsulate. Next, you’ll see the DefaultSkin folder and it’s subfolders. Here we’ll be creating the UI for use in the default skin. The default skin contains Converters.cs and Resources.xaml files. The former will hold any converter classes necessary for the default UI while the latter will define the view parts and any other resources to use for the default skin.
Speaking of the UI, we come to the UI folder and namespace. Each part of the user interface that is absolutely needed for the application to function will reside here. For now, we just have the MainWindow.xaml file representing the main window for the Gradient Previewer application. The content of each UI part will be dynamically filled using a dynamic resource that is returned from the current skin’s Resources.xaml file.
Finally, we come to the App.xaml and Commands.cs files that reside in the default namespace. App.xaml and it’s codebehind class App.xaml.cs provide for startup of the application and are pretty much necessary in every WPF application. Commands.cs will encapsulate a number of RoutedCommands that will be used to trigger actions within the application. Every action that can be taken will first be defined in this class as a public static RoutedCommand.
Download
If you’ve enjoyed this tutorial and want to see where we’re currently at as far as code goes, download the following zip file: Gradient Previewer Solution Part 1