Update: source code and documentation are now available on CodePlex at this address: http://prismtutorial.codeplex.com/

Design of a Rich Interface using WPF.

WPF is a very powerful language and allows you to do everything you want. The only problem is that Microsoft didn’t release yet a rich toolkit with all the controls we need and the XAML is not easy to learn.

Before starting to build a UI, usually, I follow these 3 fundamental steps.

  1. Main layout of my application (MDI, Tab, Ribbon …)

  2. Style of my application (Custom, Office style, Vista style)

  3. Resources available for free (Icons, themes, controls)

After I have everything in my hands I can start to design the UI and match all the pieces of the puzzle. For example I can build the main environment (shell) and then create the single components (search control, navigation bar and so on).

Sketch the UI with Microsoft Blend.

At this address, you can find an evaluation version of Microsoft Blend, a nice product for WPF designer that fully integrates with Visual Studio 2008/2010. Inside this amazing product, there a tool called Sketchflow designer. You saw this tool in action in my previous post or at the MIX09.

Why we should use a sketchflow designer instead of designing directly the UI? Because when you build an enterprise application that will be used by  hundreds of users, it’s fundamental to reflect the UI to what the users want. If they already know the Office 2007 UI and the ribbon concept, it won’t be difficult for them to move inside your new WPF application. If they work with a MDI application, you will need to think about it and redesign your idea of RIA. Remember that the user is the person that will use, buy, advertise you product. It’s the most important part of your software development process. So try to satisfy it before your ego … Wink

Anyway, I will leave you the pleasure of discovering the Sketchflow world. Here I just want to show you how our application will be designed and why.
First of all the application will be divided in 3 main regions: the ribbon, the navigation and the content region. Like outlook 2007.

The layout will be something like this one:

 New Picture (15)

As you can see, we will have 3 principal regions, plus a couple of additional components, like a status bar and a search context bar.

 New Picture (15)

Get the controls you need for free.

Before buying thousands of dollars of UI controls, I usually step into Codeplex or Codeproject and I search what I am looking for. If I don’t find anything, well I start to consider to use a different approach … Smile
You will wondering why I don’t use something cool like Telerick, for example. What I don’t like about the third party controls, especially when you pay them, is the fact that you don’t give you access to the source code, and you have to pay thousands of dollars for a datagrid. Also XAML is so powerful that after you will handle it, you won’t need any third party control. Trust me!

Anyway, this is the list of controls that we will need for our application:

  1. A Ribbon

  2. An Outlook style navigation bar

  3. A tabbed “MDI” container.

About the ribbon, finally Microsoft has released a full license to use and work with the Microsoft Office 2007 Ribbon using XAML. In order to use it you must sign and agree to the license at this address: Codeplex Office 2007 WPF Ribbon project.

About the Outlook navigation bar there are 2 good choices for free. The first one is the article on CodeProject that explains you, in a step by step tutorial, how to build an outlook 2007 navigation bar starting with a tabbed control. Very cool.

If you are lazy, there is also this set of free controls, that I use, available on CodePlex. Composite Application Contribution. Very well done and useful if you plan to work with Prism.

Then we need a Tabbed MDI container. We have already one in WPF that we can try to customize, and this is what we will do in the next articles. Otherwise you can use the one provided in the Composite WPF Contribution or there is this good article that explains how to fully customize a tabbed control.

Then we can also have the need of using a grid, right? Well if you really think you need one, you can use the XCeed data grid, for free, otherwise you can move to the WPF control toolkit or the WPF contribution, two nice open source projects that deliver some nice and useful controls.

Ready to go?

Now, from the next article we will start to build our application’s skeleton, so let’s try to be ready with everything you’ll need.

Download all these controls and add a reference into your Visual Studio Toolbox. Then agree and download the Office 2007 Ribbon project for WPF. Download the latest version of Prism and install also the Enterprise Library 4.1, required to use Prism.

Also, if you have time, try to have a look at this series of articles and web cast about WPF fundamentals. In this way you will better understand my steps.

Enjoy this tutorial and stay tuned for the next one!

Tags: WCF Prism WPF Composite application