MVVM Support - Building Dock UI

• May 22, 2020
• 2 minutes to read

 

This topic covers steps that need to be performed to implement support for the MVVM pattern when building a dock UI using the DXDocking library. A complete example is available online at: How to: Build a dock UI using the MVVM pattern.

To support the MVVM pattern, you need to create a collection of objects that are intended to be displayed as dock panel contents, and create a base layout of groups into which dock panels will be added.

1. Specify the base layout - the layout of groups into which dock panels will be added:

   XAML

   
   <dxd:DockLayoutManager>
       <dxd:LayoutGroup>
           <dxd:LayoutGroup x:Name="PanelHost" DestroyOnClosingChildren="False"/>
           ...
       </dxd:LayoutGroup>
   </dxd:DockLayoutManager>
   

   Panels will be added to the PanelHost group, as shown below.

2. Define a View Model for the DockLayoutManager:

   C#

   
   public class DockLayoutManagerViewModel : DependencyObject {
       ObservableCollection<PanelViewModel> _workspaces;
       public ObservableCollection<PanelViewModel> Workspaces {
           get {
               if(_workspaces == null) {
                   _workspaces = new ObservableCollection<PanelViewModel>();
               }
               return _workspaces;
           }
       }
   }
   

   This class specifies a collection of PanelViewModel objects, which are View Models for dock panels. The PanelViewModel class is defined below.

3. Define the PanelViewModel class, which is a View Model for dock panels:

   C#

   
   public class PanelViewModel : DependencyObject {
       public static readonly DependencyProperty DisplayNameProperty =
           DependencyProperty.Register("DisplayName", typeof(string), typeof(PanelViewModel), null);
       public static readonly DependencyProperty ContentProperty =
           DependencyProperty.Register("Content", typeof(object), typeof(PanelViewModel), null);
       public PanelViewModel() {
           MVVMHelper.SetTargetName(this, "PanelHost");
       }
       public string DisplayName {
           get { return (string)GetValue(DisplayNameProperty); }
           set { SetValue(DisplayNameProperty, value); }
       }
       public object Content {
           get { return (object)GetValue(ContentProperty); }
           set { SetValue(ContentProperty, value); }
       }
   }
   

   Note the call to the SetTargetName method on the helper MVVMHelper class. This code specifies the name of the Layout Group ("PanelHost") into which a dock panel will be added.

4. Specify a DataContext for the Page:

   C#

   
   DockLayoutManagerViewModel dockLayoutManagerViewModel;
   public MainPage() {
       //...
       dockLayoutManagerViewModel = new DockLayoutManagerViewModel();
       DataContext = dockLayoutManagerViewModel;
   }
   

5. Bind the DockLayoutManager.ItemsSource property to the Workspaces collection on the DataContext:

   XAML

   
   <dxd:DockLayoutManager ItemsSource="{Binding Workspaces}">
   

6. Specify the default style for dock panels and a DataTemplate for panel content:

   XAML

   
   <Style TargetType="dxd:LayoutPanel">
       <Setter Property="Caption" Value="{Binding DisplayName}" />
   </Style>
   <DataTemplate DataType="local:PanelViewModel">
       <Border Background="#FFDADFE4">
           <ContentPresenter Content="{Binding Content}" />
       </Border>
   </DataTemplate>