TabbedWindowDocumentUIService

Apr 01, 2021
4 minutes to read

The TabbedWindowDocumentUIService is an IDocumentManagerService implementation that allows you to show documents as DXTabControl‘s DXTabItems.

Getting Started
Customization Options
Example

Getting Started

Assume that you need to implement a tabbed document UI using the DXTabControl component. End-users can click a button (suppose it is a BarButtonItem object) to create a new document and show it as a full-fledged DXTabItem.

To accomplish this task, attach the TabbedWindowDocumentUIService service to MainView ‘s DXTabControl.

XAML

xaml

<dx:DXTabControl>
    <dxmvvm:Interaction.Behaviors>
        <dx:TabbedWindowDocumentUIService />
    </dxmvvm:Interaction.Behaviors>
    ...
</dx:DXTabControl>

Note

Since the TabbedWindowDocumentUIService is intended for tight integration with the DXTabbedWindow and its root DXTabControl , it cannot be used with nested (nonroot) DXTabControls.

Then, access the attached service from your ViewModel using one of ways described in the Services in ViewModelBase descendants and Services in POCO objects topics, and manage tabbed documents.

Below is a code snippet illustrating how to bind the BarButtonItem of a RibbonControl placed in the DXTabControl.ContentHeaderTemplate area to a command that uses one of the extension CreateDocument methods of the DocumentManagerServiceExtensions class; and show the newly created document using its IDocument.Show method.

XAML

xaml

<dx:DXTabControl.ContentHeaderTemplate>
    <DataTemplate>
        <dxr:RibbonControl ... >
            <dxr:RibbonDefaultPageCategory Caption="Default Category">
                <dxr:RibbonPage Caption="Home">
                    <dxr:RibbonPageGroup Caption="Management">
                        <dxb:BarButtonItem 
                            Content="Add New Document" 
                            Command="{Binding CreateDocumentCommand}" 
                            LargeGlyph="{dx:DXImage Image=AddGroupFooter_32x32.png}" 
                            RibbonStyle="Large"/>
                        ...
                    </dxr:RibbonPageGroup>
                </dxr:RibbonPage>
            </dxr:RibbonDefaultPageCategory>
        </dxr:RibbonControl>
    </DataTemplate>
</dx:DXTabControl.ContentHeaderTemplate>

csharp

public class MainViewModel {
    protected IDocumentManagerService DocumentManagerService { get { return this.GetService<IDocumentManagerService>(); } }

    public void CreateDocument() {
        IDocument doc = DocumentManagerService.CreateDocument("TabView", ViewModelSource.Create(()=> new TabViewModel()));
        doc.Id = String.Format("DocId_{0}", DocumentManagerService.Documents.Count<IDocument>());
        doc.Title = String.Format("Item {0}", DocumentManagerService.Documents.Count<IDocument>());
        doc.Show();
    }

    public void CloseDocument() {
        DocumentManagerService.ActiveDocument.Close();
    }
}

To get the detailed information about the document processing mechanism, refer to the Document Management System topic.

Customization Options

TabbedWindowDocumentUIService provides a set of properties that allow you to customize the document’s view.

ViewServiceBase.ViewTemplate is used for setting a View that is shown within the DXTabItem.
ViewServiceBase.ViewTemplateSelector sets a DataTemplateSelector that chooses the view’s template based on custom logic.
ViewServiceBase.ViewLocator sets a ViewLocator that creates a child View based on the passed view type.

These properties are used by the view creation mechanism. You can learn more about them in the following topic: View creation mechanisms

There are also properties that are used to customize the document’s container.

NewItemTemplate gets or sets a DXTabItem object that will be used as a new item.
ItemTemplate gets or sets a DXTabItem object that will be used as a common item.

Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.POCO
Imports DevExpress.Mvvm.DataAnnotations
Imports System
Imports System.Linq

Namespace DXSample.ViewModel
    <POCOViewModel> _
    Public Class MainViewModel
        Protected ReadOnly Property DocumentManagerService() As IDocumentManagerService
            Get
                Return Me.GetService(Of IDocumentManagerService)()
            End Get
        End Property

        Public Sub CreateDocument()
            Dim doc As IDocument = DocumentManagerService.CreateDocument("TabView", ViewModelSource.Create(Function() New TabViewModel()))
            doc.Id = String.Format("DocId_{0}", DocumentManagerService.Documents.Count())
            doc.Title = String.Format("Item {0}", DocumentManagerService.Documents.Count())
            doc.Show()
        End Sub

        Public Sub CloseDocument()
            DocumentManagerService.ActiveDocument.Close()
        End Sub
    End Class
End Namespace

Imports DevExpress.Mvvm.DataAnnotations
Imports System

Namespace DXSample.ViewModel
    <POCOViewModel> _
    Public Class TabViewModel
        Public Overridable Property Updated() As Date
        Public Overridable Property Content() As Object

        Public Sub New()
            Updated = Date.Now
            Content = Guid.NewGuid()

        End Sub
        Public Sub UpdateDocument()
            Updated = Date.Now
            Content = Guid.NewGuid()
        End Sub
    End Class
End Namespace

xaml

<UserControl x:Class="DXSample.View.MainView"
    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" 
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
    xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
    xmlns:ViewModel="clr-namespace:DXSample.ViewModel" 
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" 
    DataContext="{dxmvvm:ViewModelSource Type={x:Type ViewModel:MainViewModel}}">
    <Grid>
        <dx:DXTabControl AllowMerging="{x:Null}" Padding="0">
            <dxmvvm:Interaction.Behaviors>
                <dx:TabbedWindowDocumentUIService />
            </dxmvvm:Interaction.Behaviors>
            <dx:DXTabControl.ContentHeaderTemplate>
                <DataTemplate>
                    <dxr:RibbonControl 
                        ShowApplicationButton="False" 
                        ToolbarShowMode="Hide" 
                        RibbonHeaderVisibility="Collapsed"
                        Margin="0 -1 0 0">
                        <dxr:RibbonDefaultPageCategory Caption="Default Category">
                            <dxr:RibbonPage Caption="Home">
                                <dxr:RibbonPageGroup Caption="Management">
                                    <dxb:BarButtonItem 
                                        Content="Add New Document" 
                                        Command="{Binding CreateDocumentCommand}" 
                                        LargeGlyph="{dx:DXImage Image=AddGroupFooter_32x32.png}" 
                                        RibbonStyle="Large"/>
                                    <dxb:BarButtonItem 
                                        Content="Remove Current Document" 
                                        Command="{Binding CloseDocumentCommand}"
                                        LargeGlyph="{dx:DXImage Image=DeleteGroupFooter_32x32.png}" 
                                        RibbonStyle="Large"/>
                                </dxr:RibbonPageGroup>
                            </dxr:RibbonPage>
                        </dxr:RibbonDefaultPageCategory>
                    </dxr:RibbonControl>
                </DataTemplate>
            </dx:DXTabControl.ContentHeaderTemplate>
            <dx:DXTabControl.View>
                <dx:TabControlStretchView 
                    DragDropMode="Full" 
                    HideButtonShowMode="InAllTabs" 
                    SingleTabItemHideMode="HideAndShowNewItem"/>
            </dx:DXTabControl.View>
        </dx:DXTabControl>
    </Grid>
</UserControl>

xaml

<UserControl x:Class="DXSample.View.TabView"
    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"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
    xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
    <DockPanel>
        <dxr:RibbonControl DockPanel.Dock="Top">
            <dxr:RibbonDefaultPageCategory Caption="Document Category">
                <dxr:RibbonPage Caption="Home">
                    <dxr:RibbonPageGroup Caption="Document">
                        <dxb:BarButtonItem Content="Update Document" Command="{Binding UpdateDocumentCommand}" LargeGlyph="{dx:DXImage Image=Refresh_32x32.png}" RibbonStyle="Large"/>
                    </dxr:RibbonPageGroup>
                </dxr:RibbonPage>
            </dxr:RibbonDefaultPageCategory>
        </dxr:RibbonControl>
        <GroupBox Header="Document Information" Margin="10" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Information was updated: " Margin="5"/>
                    <TextBlock Text="{Binding Updated}" Margin="5"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Content: " Margin="5"/>
                    <TextBlock Text="{Binding Content}" Margin="5"/>
                </StackPanel>
            </StackPanel>
        </GroupBox>
    </DockPanel>
</UserControl>

csharp

using DevExpress.Mvvm.DataAnnotations;
using System;

namespace DXSample.ViewModel {
    [POCOViewModel]
    public class TabViewModel {
        public virtual DateTime Updated { get; set; }
        public virtual object Content { get; set; }

        public TabViewModel() {
            Updated = DateTime.Now;
            Content = Guid.NewGuid();

        }
        public void UpdateDocument() {
            Updated = DateTime.Now;
            Content = Guid.NewGuid();
        }
    }
}

csharp

using DevExpress.Mvvm;
using DevExpress.Mvvm.POCO;
using DevExpress.Mvvm.DataAnnotations;
using System;
using System.Linq;

namespace DXSample.ViewModel {
    [POCOViewModel]
    public class MainViewModel {
        protected IDocumentManagerService DocumentManagerService { get { return this.GetService<IDocumentManagerService>(); } }

        public void CreateDocument() {
            IDocument doc = DocumentManagerService.CreateDocument("TabView", ViewModelSource.Create(()=> new TabViewModel()));
            doc.Id = String.Format("DocId_{0}", DocumentManagerService.Documents.Count<IDocument>());
            doc.Title = String.Format("Item {0}", DocumentManagerService.Documents.Count<IDocument>());
            doc.Show();
        }

        public void CloseDocument() {
            DocumentManagerService.ActiveDocument.Close();
        }
    }
}