A composite view user interface

In the world of WPF, the Model-View-ViewModel pattern is a great way to separate your UI from your business logic. This decoupling allows you to easily unit test your code. When implemented correctly, the MVVM pattern promotes a view agnostic structure which makes switching between different views extremely easy. A composite view UI is basically a user interface that is made up of multiple independent views. By independent, I mean that the views should be decoupled and unaware of each other. In this tutorial, I will show you how to create the following UI.

Existing frameworks

There are several existing frameworks that facilitate the implementation of the MVVM pattern and composite view applications. MVVM Toolkit, MvvMLight, SoPrism, and Prism are a few examples of some of the existing libraries out there. Prism is probably the most complete and extensive but it also has a large learning curve. I decided that before I dive into learning the details of Prism, I would benefit by trying to code a composite application by hand.

The User Interface design

The previous screen shot shows an application made up of a Window that contains a grid, a listview, and a ContentControl. The ContentControl and ListView are separated by a GridSplitter control. This allows the two views to be re-sized. The ContentControl will have a UserControl injected into the content property as the ListView's selected item is changed.

As you can see, we have a Grid with two columns. The column on the left holds a ListView that that is data bound in the code behind. The ContentControl's content property is also data bound to the Presenter.CurrentView property of our ViewModel. I chose to implement a presenter object to handle the injection of the UserControl into the ContentControl. We will start with the codebehind of our view to show how we are setting the DataContext.

Note that we have bound our ViewModel to the view's DataContext as well as the ListView's ItemsSource property. The ViewModel is an ObservableCollection of ViewMenuItem objects. I created the ViewMenuItem class to contain the region's name and the display text. The ListView serves as a menu.

Add comment

About the author

My name is Buddy James. I'm a Microsoft Certified Solutions Developer from the Nashville, TN area. I'm a Software Engineer, an author, a blogger (http://www.refactorthis.net), a mentor, a thought leader, a technologist, a data scientist, and a husband. I enjoy working with design patterns, data mining, c#, WPF, Silverlight, WinRT, XAML, ASP.NET, python, CouchDB, RavenDB, Hadoop, Android(MonoDroid), iOS (MonoTouch), and Machine Learning. I love technology and I love to develop software, collect data, analyze the data, and learn from the data. When I'm not coding, I'm determined to make a difference in the world by using data and machine learning techniques. (follow me at @budbjames).