How to build dock UI according to MVVM pattern using IMVVMDockingProperties interface

• Jun 07, 2019
• 4 minutes to read

This example demonstrates how to build a dock UI according to the MVVM design pattern by implementing the IMVVMDockingProperties interface. This interface provides you a way to specify target groups for each of your view models.

More information on this approach can be found at: MVVM Support - Building Dock UI

Another approach to building a dock UI according to the MVVM design pattern is shown in the example: How to: Build Dock UI According to MVVM Pattern Using LayoutAdapter

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-build-dock-ui-according-to-mvvm-pattern-using-imvvmdockingproperties-interface-e20026.

DocumentViewModel.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports DevExpress.Xpf.Docking

Namespace WpfApplication
    Public Class DocumentViewModel
        Implements IMVVMDockingProperties


        Public Sub New(ByVal caption As String, ByVal imagePath As String)
            Caption = caption
            Glyph = GlyphHelper.GetGlyph(imagePath)
            Text = String.Format("Document text ({0})", caption)
        End Sub

        Private Property TargetName() As String Implements IMVVMDockingProperties.TargetName
            Get
                Return "DocumentsGroup"
            End Get
            Set(ByVal value As String)
                Throw New NotImplementedException()
            End Set

        End Property




        Private privateCaption As String
        Public Property Caption() As String
            Get
                Return privateCaption
            End Get
            Set(ByVal value As String)
                privateCaption = value
            End Set
        End Property


        Private privateGlyph As Object
        Public Property Glyph() As Object
            Get
                Return privateGlyph
            End Get
            Set(ByVal value As Object)
                privateGlyph = value
            End Set
        End Property

        Private privateText As String
        Public Property Text() As String
            Get
                Return privateText
            End Get
            Set(ByVal value As String)
                privateText = value
            End Set
        End Property


    End Class
End Namespace

DocumentView.xaml

<UserControl x:Class="WpfApplication.View.DocumentView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Image Source="{Binding Glyph}"/>
                <TextBlock Text="{Binding Caption}" FontSize="20"/>
            </StackPanel>
            <TextBox Grid.Row="1" Text="{Binding Text}"/>
        </Grid>
        </Grid>
</UserControl>

GlyphHelper.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Windows.Media.Imaging

Namespace WpfApplication
    Friend NotInheritable Class GlyphHelper
        Private Sub New()
        End Sub
        Public Shared Function GetGlyph(ByVal path As String) As BitmapImage
            Return New BitmapImage(DevExpress.Utils.AssemblyHelper.GetResourceUri(GetType(GlyphHelper).Assembly, path))
        End Function
    End Class
End Namespace

MainWindow.xaml

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication"
        Title="MainWindow" Height="359" Width="794" xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking">
    <Grid>
        <Grid.Resources>
            <local:MainViewModel x:Key="viewModel"></local:MainViewModel>
        </Grid.Resources>
        <dxdo:DockLayoutManager Name="dockLayoutManager1" DataContext="{StaticResource viewModel}" ItemsSource="{Binding ChildViews}">
            <dxdo:DockLayoutManager.LayoutRoot>
                <dxdo:LayoutGroup Caption="LayoutRoot" >
                    <dxdo:DocumentGroup x:Name="DocumentsGroup"/>
                    <dxdo:LayoutGroup x:Name="DockPanels" Orientation="Vertical"/>
                </dxdo:LayoutGroup>
            </dxdo:DockLayoutManager.LayoutRoot>
        </dxdo:DockLayoutManager>
    </Grid>
</Window>

PanelView.xaml

<UserControl x:Class="WpfApplication.View.PanelView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Button Content="{Binding ColorBrush.Color}" Foreground="{Binding ColorBrush}"/>
    </Grid>
</UserControl>

PanelViewModel.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports DevExpress.Xpf.Docking
Imports System.Windows.Media

Namespace WpfApplication
    Public Class PanelViewModel
        Implements IMVVMDockingProperties

        Public Sub New(ByVal c As Color)
            _Color = New SolidColorBrush(c)
        End Sub

        Private Property TargetName() As String Implements IMVVMDockingProperties.TargetName
            Get
                Return "DockPanels"
            End Get
            Set(ByVal value As String)
                Throw New NotImplementedException()
            End Set
        End Property

        ' Fields...
        Private _Color As SolidColorBrush


        Public Property ColorBrush() As SolidColorBrush
            Get
                Return _Color
            End Get
            Set(ByVal value As SolidColorBrush)
                _Color = value
            End Set
        End Property
    End Class
End Namespace

MainViewModel.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Collections.ObjectModel
Imports DevExpress.Xpf.Docking
Imports System.Windows.Media

Namespace WpfApplication
    Public Class MainViewModel

        Public Sub New()
            ChildViews.Add(New DocumentViewModel("Document1", "/Images/change.png"))
            ChildViews.Add(New DocumentViewModel("Document2", "/Images/create.png"))
            ChildViews.Add(New DocumentViewModel("Document2", "/Images/new-16x16.png"))
            ChildViews.Add(New PanelViewModel(Colors.Red))
            ChildViews.Add(New PanelViewModel(Colors.Blue))
            ChildViews.Add(New PanelViewModel(Colors.Green))
        End Sub

        Private _Children As New ObservableCollection(Of Object)()


        Public Property ChildViews() As ObservableCollection(Of Object)
            Get
                Return _Children
            End Get
            Set(ByVal value As ObservableCollection(Of Object))
                _Children = value

            End Set
        End Property





    End Class
End Namespace

DocumentViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using DevExpress.Xpf.Docking;

namespace WpfApplication
{
    public class DocumentViewModel : IMVVMDockingProperties
    {


        public DocumentViewModel(string caption, string imagePath)
        {
            Caption = caption;
            Glyph = GlyphHelper.GetGlyph(imagePath);
            Text = String.Format("Document text ({0})", caption);
        }

        string IMVVMDockingProperties.TargetName
        {
            get
            {
                return "DocumentsGroup";
            }
            set
            {
                throw new NotImplementedException();
            }

        }



        public string Caption { get; set; }


        public object Glyph { get; set; }

        public string Text { get; set; }


    }
}

MainViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Collections.ObjectModel;
using DevExpress.Xpf.Docking;
using System.Windows.Media;

namespace WpfApplication
{
    public class MainViewModel 
    {

        public MainViewModel()
        {
            ChildViews.Add(new DocumentViewModel("Document1", "/Images/change.png"));
            ChildViews.Add(new DocumentViewModel("Document2", "/Images/create.png"));
            ChildViews.Add(new DocumentViewModel("Document2", "/Images/new-16x16.png"));
            ChildViews.Add(new PanelViewModel(Colors.Red));
            ChildViews.Add(new PanelViewModel(Colors.Blue));
            ChildViews.Add(new PanelViewModel(Colors.Green));
        }

        private ObservableCollection<object> _Children = new ObservableCollection<object>();


        public ObservableCollection<object> ChildViews
        {
            get { return _Children; }
            set
            {
                _Children = value;

            }
        }





    }
}

PanelViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using DevExpress.Xpf.Docking;
using System.Windows.Media;

namespace WpfApplication
{
    public class PanelViewModel : IMVVMDockingProperties
    {

        public PanelViewModel(Color c)
        {
            _Color = new SolidColorBrush(c);
        }

        string IMVVMDockingProperties.TargetName
        {
            get
            {
                return "DockPanels";
            }
            set
            {
                throw new NotImplementedException();
            }
        }

        // Fields...
        private SolidColorBrush _Color;


        public SolidColorBrush ColorBrush
        {
            get { return _Color; }
            set
            {
                _Color = value;
            }
        }
    }
}