WPF Devexpress Documentgroup with different documents - wpf

Question

I am trying to accomplish this scenario with MVVM.
I want to have a DockLayoutManager with some dynamic documents and each document will show different view.
So let's say that I have the the DockLayoutManager with its ViewModel and I have 3 other views (usercontrols) with their own viewmodels
My code for the MainWIndow.xaml:
<UserControl x:Class="BrowserTabManager"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
xmlns:local="clr-namespace:WPFiRecsTest1"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="600"
d:DesignWidth="300"
mc:Ignorable="d">
<UserControl.DataContext>
<local:BrowserTabManagerViewModel />
</UserControl.DataContext>
<UserControl.Resources>
<DataTemplate DataType="{x:Type local:ResultsViewModel}">
<local:ResultsView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:WorksheetViewModel}">
<local:WorksheetView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:CrystalReportViewModel}">
<local:CrystalReportView />
</DataTemplate>
</UserControl.Resources>
<dxd:DockLayoutManager FloatingMode="Desktop">
<dxd:LayoutGroup>
<dxd:LayoutGroup x:Name="panelHost" />
<dxd:DocumentGroup x:Name="documentHost" ItemsSource="{Binding TabPages}" />
</dxd:LayoutGroup>
</dxd:DockLayoutManager>
</UserControl>
The good thing is that is working. Each document has its own view. But I cannot figure how and where I should bind the header caption:
The code for BrowserTabManagerViewModel:
Imports System.Collections.ObjectModel
Imports DevExpress.Mvvm
Public Class BrowserTabManagerViewModel
Inherits ViewModelBase
Private mTabPages As New ObservableCollection(Of ViewModelBase)()
Public Property TabPages() As ObservableCollection(Of ViewModelBase)
Get
Return mTabPages
End Get
Set(value As ObservableCollection(Of ViewModelBase))
RaisePropertyChanged("TabPages")
End Set
End Property
Private miSelectedTabIndex As Integer
Public Property SelectedTabIndex() As Integer
Get
Return miSelectedTabIndex
End Get
Set(value As Integer)
If value <> miSelectedTabIndex Then
miSelectedTabIndex = value
RaisePropertyChanged("SelectedTabIndex")
End If
End Set
End Property
Public Sub New()
mTabPages.Add(New ResultsViewModel())
mTabPages.Add(New WorksheetViewModel())
mTabPages.Add(New CrystalReportViewModel())
End Sub

Answer 1

So I found a way to do it, (maybe not the best one)
So the xaml is:
<UserControl x:Class="BrowserTabManager"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
xmlns:local="clr-namespace:WPFiRecsTest1"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="600"
d:DesignWidth="300"
mc:Ignorable="d">
<UserControl.DataContext>
<local:BrowserTabManagerViewModel />
</UserControl.DataContext>
<UserControl.Resources>
<Style TargetType="{x:Type dxd:DocumentPanel}">
<Setter Property="Caption" Value="{Binding DisplayName}" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<ContentControl Content="{Binding Content}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
<dxd:DockLayoutManager x:Name="dockLayoutManager"
ClosedPanelsBarVisibility="Never"
ClosingBehavior="ImmediatelyRemove"
FloatingMode="Desktop"
ItemsSource="{Binding TabPages}">
<dxd:LayoutGroup x:Name="panelHost">
<dxd:DocumentGroup x:Name="documentHost" />
</dxd:LayoutGroup>
</dxd:DockLayoutManager>
</UserControl>
I have a viewmodel for the documents (BrowserTabViewModel) which has a property for the Caption (displayName) and one for the Content of the Document(TabPage is the Model):
Public Property Content() As UserControl
Get
Return TabPage.Content
End Get
Set(ByVal value As UserControl)
TabPage.Content = value
RaisePropertyChanged("Content")
End Set
End Property
Now the main ViewModel (BrowserTabManagerViewModel) is like this:
Imports System.Collections.ObjectModel
Imports DevExpress.Mvvm
Public Class BrowserTabManagerViewModel
Inherits ViewModelBase
Private mTabPages As New ObservableCollection(Of BrowserTabViewModel)()
Public Property TabPages() As ObservableCollection(Of BrowserTabViewModel)
Get
Return mTabPages
End Get
Set(value As ObservableCollection(Of BrowserTabViewModel))
RaisePropertyChanged("TabPages")
End Set
End Property
Public Sub New()
mTabPages.Add(New BrowserTabViewModel() With {.Type = "RES", .DisplayName = "Result1", .Content = New ResultsView})
mTabPages.Add(New BrowserTabViewModel() With {.Type = "WOR", .DisplayName = "worksheet", .Content = New WorksheetView})
mTabPages.Add(New BrowserTabViewModel() With {.Type = "CRR", .DisplayName = "Crystal", .Content = New CrystalReportView})
mTabPages.Add(New BrowserTabViewModel() With {.Type = "DXR", .DisplayName = "DX REport", .Content = New DXReportView})
mTabPages.Add(New BrowserTabViewModel() With {.Type = "DAR", .DisplayName = "Data Report", .Content = New DataReportView})
mTabPages.Add(New BrowserTabViewModel() With {.Type = "ADD", .DisplayName = "+", .Content = New BrowserAddMenuView})
End Sub
End Class
If anyone has any suggestions for improvement please let me know.

Answer 2

But I cannot figure how and where I should bind the header caption
You should declare that binding via the DocumentPanel's default style:
<UserControl.Resources>
<Style TargetType="dxd:DocumentPanel">
<Setter Property="Caption" Value="{Binding ViewModelPropertyForCaption}" />
</Style>
...
<DataTemplate DataType="{x:Type local:ResultsViewModel}">
...
</UserControl.Resources>
The best solution for the situation, described in the original question, is creating the base type for all of these ViewModels and separating the Header property into this class:
public class BaseDocumentViewModel {
public virtual string ViewModelPropertyForCaption { get; set; }
}
...
public class ResultsViewModel : BaseDocumentViewModel {
//...
}
Related help-article: MVVM Support - Building Dock UI.
A complete example is available online at: How to Build a dock UI using the MVVM pattern.