How to: Show Detail Views in Separate Windows

• Aug 03, 2020
• 2 minutes to read

This tutorial is based on the following sample project.

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T111354.

You may want to show detail views in separate windows instead of tabs. To accomplish this, let’s review how tabs are created.

CollectionViewModelBase uses the IDocumentManagerService interface to create abstract documents that represent detail views at runtime. The implementation of IDocumentManagerService defines the way these views are represented in the UI. By default, the Tabbed MDI View Scaffolding Wizard generates the DepartmentContextView that uses the TabbedDocumentUIService to represent child Views in separate tabs within the DocumentGroup control.

XAML

<dxdo:DocumentGroup x:Name="documentGroup">
    <dxmvvm:Interaction.Behaviors>
        <dxdo:TabbedDocumentUIService />
    </dxmvvm:Interaction.Behaviors>
</dxdo:DocumentGroup>

All generated collection views already contain the WindowedDocumentUIService that shows views in separate windows. The YieldToParent property is set to true, which means that the CollectionViewModel will search its parent view models for the instance of the IDocumentManagerService interface.

XAML

<dxmvvm:Interaction.Behaviors>
        <dx:WindowedDocumentUIService YieldToParent="True" />
    </dxmvvm:Interaction.Behaviors>

So, all we need to do is to make the collection view model use this instance instead of the instance from the parent DepartmentContextViewModel is to set this property to false.

Let’s also tweak the WindowedDocumentUIService inside the CourseCollectionView to make its windows dialog-like and use the DXRibbonWindow as we have the ribbon in our detail views:

XAML

<dx:WindowedDocumentUIService WindowStartupLocation="CenterOwner" WindowType="dxr:DXRibbonWindow" YieldToParent="False">
            <dx:WindowedDocumentUIService.WindowStyle>
                <Style TargetType="Window">
                    <Setter Property="Width" Value="600"/>
                    <Setter Property="Height" Value="400"/>
                    <Setter Property="ResizeMode" Value="NoResize"/>
                    <Setter Property="ShowInTaskbar" Value="False"/>
                    <Setter Property="WindowStyle" Value="ToolWindow"/>
                </Style>
            </dx:WindowedDocumentUIService.WindowStyle>
        </dx:WindowedDocumentUIService>

The course detail editing forms are now shown in separate windows:

To change the windows model so that only one detail form is shown at a time, set the WindowedDocumentUIService.DocumentShowMode property to Dialog.