How to build dock UI according to MVVM pattern using LayoutAdapter

• Jun 07, 2019
• 3 minutes to read

This example shows how to use the LayoutAdapter to build a dock UI according to the MVVM design pattern. See the MVVM Support - Building Dock UI document to learn more.

Note

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

MyViewModel.vb

Imports System.Collections.ObjectModel

Namespace dxSampleGrid
    Public Class MyViewModel
        Public Sub New()
            CreateList()
        End Sub

        Public Property PersonList() As ObservableCollection(Of Person)

        Private Sub CreateList()
            PersonList = New ObservableCollection(Of Person)()
            For i As Integer = 0 To 4
                Dim p As New Person(i)
                p.ParentName = "LayoutGroup1"
                PersonList.Add(p)
            Next i
            PersonList(0).IsTabbed = True
            PersonList(1).IsTabbed = True
            PersonList(2).IsFloat = True
        End Sub
    End Class


End Namespace

MainWindow.xaml.vb

Imports System.Windows

Namespace dxSampleGrid
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
            vm = New MyViewModel()
            DataContext = vm

        End Sub
        Private vm As MyViewModel
    End Class
End Namespace

MyLayoutAdapter.vb

Imports DevExpress.Xpf.Docking

Namespace dxSampleGrid

    Friend Class MyLayoutAdapter
        Implements ILayoutAdapter

        Public Function Resolve(ByVal owner As DockLayoutManager, ByVal item As Object) As String Implements ILayoutAdapter.Resolve
            Dim p As Person = TryCast(item, Person)
            If p.IsTabbed Then
                Return "TabbedGroup1"
            End If
            If p.IsFloat Then
                Dim floatGroups = owner.FloatGroups
                Dim fg As FloatGroup
                If floatGroups.Count = 0 Then
                    fg = New FloatGroup()
                    fg.Name = "NewFloatGroup1"
                    owner.FloatGroups.Add(fg)
                Else
                    fg = floatGroups(0)
                End If
                Return fg.Name
            End If
            Return p.ParentName
        End Function
    End Class
End Namespace

MainWindow.xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:dxSampleGrid"
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    x:Class="dxSampleGrid.MainWindow"
    Title="DXApplication" Height="700" Width="1100"
    SnapsToDevicePixels="True" UseLayoutRounding="True"
    >
    <Grid>
        <Grid.Resources>
            <Style TargetType="dxdo:LayoutPanel">
                <Setter Property="Caption" Value="{Binding LastName}"/>
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Label Content="{Binding Age}"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <dxdo:DockLayoutManager ItemsSource="{Binding PersonList}">
            <dxdo:MVVMHelper.LayoutAdapter>
                <local:MyLayoutAdapter/>
            </dxdo:MVVMHelper.LayoutAdapter>
            <dxdo:DockLayoutManager.LayoutRoot>
                <dxdo:LayoutGroup x:Name="LayoutGroup1">
                    <dxdo:TabbedGroup x:Name="TabbedGroup1"/>
                </dxdo:LayoutGroup>
            </dxdo:DockLayoutManager.LayoutRoot>
        </dxdo:DockLayoutManager>
    </Grid>

</Window>

Person.vb

Namespace dxSampleGrid

    Public Class Person

        Public Sub New(ByVal i As Integer)
            FirstName = "FirstName" & i
            LastName = "LastName" & i
            Age = i * 10
        End Sub

        Public Property FirstName() As String
        Public Property LastName() As String
        Public Property Age() As Integer
        Public Property ParentName() As String
        Public Property IsTabbed() As Boolean
        Public Property IsFloat() As Boolean
    End Class
End Namespace

Person.cs

namespace dxSampleGrid {

    public class Person  {

        public Person(int i) {
            FirstName = "FirstName" + i;
            LastName = "LastName" + i;
            Age = i * 10;
        }

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
        public string ParentName { get; set; }
        public bool IsTabbed { get; set; }
        public bool IsFloat { get; set; }
    }
}

MyLayoutAdapter.cs

using DevExpress.Xpf.Docking;

namespace dxSampleGrid {

    class MyLayoutAdapter : ILayoutAdapter {
        public string Resolve(DockLayoutManager owner, object item) {
            Person p = item as Person;
            if (p.IsTabbed) {
                return "TabbedGroup1";
            }
            if (p.IsFloat) {
                var floatGroups = owner.FloatGroups;
                FloatGroup fg;
                if (floatGroups.Count == 0) {
                    fg = new FloatGroup();
                    fg.Name = "NewFloatGroup1";
                    owner.FloatGroups.Add(fg);
                }
                else {
                    fg = floatGroups[0];
                }
                return fg.Name;
            }
            return p.ParentName;
        }
    }
}

MainWindow.xaml.cs

using System.Windows;

namespace dxSampleGrid {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            vm = new MyViewModel();
            DataContext = vm;

        }
        MyViewModel vm;
    }
}

MyViewModel.cs

using System.Collections.ObjectModel;

namespace dxSampleGrid {
    public class MyViewModel  {
        public MyViewModel() {
            CreateList();
        }

        public ObservableCollection<Person> PersonList { get; set; }

        void CreateList() {
            PersonList = new ObservableCollection<Person>();
            for (int i = 0; i < 5; i++) {
                Person p = new Person(i);
                p.ParentName = "LayoutGroup1";
                PersonList.Add(p);
            }
            PersonList[0].IsTabbed = true;
            PersonList[1].IsTabbed = true;
            PersonList[2].IsFloat = true;
        }
    }


}