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
View Example
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
<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>
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
<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>
<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>
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
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
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; }
}
}
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;
}
}
}
}
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;
}
}
}
}