具有不同文档的 WPF Devexpress Documentgroup

Question

我正在尝试使用 MVVM 来完成这个场景。
我想要一个带有一些动态文档的 DockLayoutManager，每个文档都会显示不同的 View 。

所以假设我有 DockLayoutManager 和它的 ViewModel，我有 3 个其他 View (用户控件)和他们自己的 View 模型
我的 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>  

好消息是它正在工作。每个文档都有自己的 View 。但我不知道应该如何以及在哪里绑定(bind)标题标题:

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

所以我找到了一种方法，(也许不是最好的)

所以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>
   <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>

我有一个文档 View 模型(BrowserTabViewModel)，它有一个标题属性(displayName)和一个文档内容属性(TabPage 是模型):

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

现在主视图模型(BrowserTabManagerViewModel)是这样的:

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

如果有人有任何改进建议，请告诉我。