MVVM and the Infragistics DockManager Control

Josh Smith wrote a quintessential article on MVVM entitled, WPF Apps With The Model-View-ViewModel Design Pattern, for MSDN Magazine that was published in February 2009. In the article he shows a sample application that some some tabs and displays some content. Sounds pretty simple until you consider that the content of the tabs is dynamic and could be anything. The sample app demonstrates a little trick I thought was brilliant and made the entire article so eye-openning; using DataTemplates to bind the possible dynamic sources of Views and ViewModels together, allowing the page controller (host view model?) to simply maintain a bound collection of viewmodels and have the XAML do the figuring of what view to display. This is a fantastic example of Separation of Concerns.
 
Though I really loved the article, I wanted to leverage the UX functionality of the Infragistics DockManager control to give the user more flexibility in how they want to view the data being presented (especially in a multi-monitor scenario). Using the source code from Josh‘s article as a base and swapping out the TabControl he was using with InfragisticsDockManager control failed as there isn’t a way to natively bind the DockManager to the collection of ViewModels hosted in the page controller (host view model?). The support from Francis and Sam from Infragistics lead to soliciting help from Andrew Smith who graciously wrote a blog post entitled "ItemsSource for XamDockManager Elements" demonstrating how to accomplish the required binding. (Source code available here)
 
All of this culminates in the successful marryiage of the dynamic nature demonstrated in the MVVM pattern demonstrated in Josh‘s article with the flexibility of the Infragistics DockManager control. I have posted the sample source code here.
 
Many thanks need to be extended by myself and on behalf of the users of the application I am working on for the efforts of Francis, Sam, and Andrew from Infragistics as well as the ground-breaking of Josh for bringing this all together.
 
 
 
 
Advertisements

3 thoughts on “MVVM and the Infragistics DockManager Control

  1. I added an addendum to the code from Andrew to announce when a workspace (ContentPane) was being closed so that the VM could be notified:in ContentPaneFactory.cs:public static readonly DependencyProperty ClosingWorkSpaceProperty = DependencyProperty.Register("ClosingWorkSpace", typeof(ICommand), typeof(ContentPaneFactory), new FrameworkPropertyMetadata(null));[Category("Command")][Bindable(true)]public ICommand ClosingWorkSpace { get { return (ICommand)this.GetValue(ContentPaneFactory.ClosingWorkSpaceProperty); } set { this.SetValue(ContentPaneFactory.ClosingWorkSpaceProperty, value); }}and then modified the following:private void OnPaneClosed(object sender, PaneClosedEventArgs e) { ContentPane pane = sender as ContentPane; IEditableCollectionView cv = CollectionViewSource.GetDefaultView(this.ItemsSource) as IEditableCollectionView; if (null != cv) { object dataItem = GetItemForContainer(pane); cv.Remove(dataItem); //Added stuff if (ClosingWorkSpace != null && ClosingWorkSpace.CanExecute(pane.DataContext)) { ClosingWorkSpace.Execute(pane.DataContext); } }}Then I can bind the closing event of the pane in the datacontext and keep the bound workspace collection in sync:<igExtensions:ContentPaneFactory.PaneFactory> <igExtensions:ContentPaneFactory ItemsSource="{Binding WorkSpaces}" HeaderPath="DisplayName" ClosingWorkSpace="{Binding WorkSpaceClosing}" ContentPath="." /></igExtensions:ContentPaneFactory.PaneFactory>C’est tout!

  2. Looks good, any chance there’s a Silverlight compatible version?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s