Skip to main content

WindowedDocumentUIService

  • 6 minutes to read

The WindowedDocumentUIService is an IDocumentManagerService implementation that allows you to show documents in separate windows.

WindowedDocumentUIService

Getting started with WindowedDocumentUIService

Assume that you need to implement a multi-windowed document UI. When an end-user double-clicks a grid’s row, a new document should be created and shown. This newly created document should display information from the clicked row.

Suppose the GridControl is defined in the following MainView.

<UserControl x:Class="DXDocumentUIServiceSample.View.MainView"  
    ...
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"            
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:v="clr-namespace:DXDocumentUIServiceSample.View"
    xmlns:vm="clr-namespace:DXDocumentUIServiceSample.ViewModel" 
    DataContext="{dxmvvm:ViewModelSource Type={x:Type vm:MainViewModel}}">
    <Grid>
        <GroupBox Header="Users">
            <dxg:GridControl Name="grid" ItemsSource="{Binding Users}">
                ...
            </dxg:GridControl>
        </GroupBox>
        ...
    </Grid>
</UserControl>

To handle and process the TableView.RowDoubleClick event at the ViewModel level, subscribe to this event via EventToCommand class as shown in the code snippet below.

<dxg:GridControl Name="grid" ItemsSource="{Binding Users}">
    ...
    <dxg:GridControl.View>
        <dxg:TableView ... >
            <dxmvvm:Interaction.Behaviors>
                <dxmvvm:EventToCommand 
                    EventName="RowDoubleClick" 
                    Command="{Binding CreateDocumentCommand}" 
                    CommandParameter="{Binding ElementName=grid, Path=CurrentItem}"/>
            </dxmvvm:Interaction.Behaviors>
        </dxg:TableView>
    </dxg:GridControl.View>
</dxg:GridControl>

Then, add the WindowedDocumentUIService to the View’s Interaction.Behaviors collection.

<v:MainView>
    <dxmvvm:Interaction.Behaviors>
        <dx:WindowedDocumentUIService/>
    </dxmvvm:Interaction.Behaviors>
</v:MainView>

Use the CreateDocument extension method provided by the DocumentManagerServiceExtensions class to create a corresponding document. When the document is created, invoke its IDocument.Show method to show it.

[POCOViewModel]
public class MainViewModel {
    protected IDocumentManagerService DocumentManagerService { get { return this.GetService<IDocumentManagerService>(); } }
    ...
    public void CreateDocument(object arg) {
        IDocument doc = DocumentManagerService.FindDocument(arg);
        if (doc == null) {
            doc = DocumentManagerService.CreateDocument("DetailedView", arg);
            doc.Id = DocumentManagerService.Documents.Count<IDocument>();
        }
        doc.Show();
    }
}

Note that in the code snippet above, we use the FindDocument method to find an already existing document with the specified ViewModel passed via a parameter arg. To get more information about how to create new documents and control existing ones, see the Document Management System topic.

Customization Options

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

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.

The following code snippet illustrates how to define a custom style for a windowed document’s container (window).

<dxmvvm:Interaction.Behaviors>
    <dx:WindowedDocumentUIService>
        <dx:WindowedDocumentUIService.WindowStyle>
            <Style TargetType="dx:DXWindow">
                <Setter Property="Width" Value="500"/>
                <Setter Property="Height" Value="300"/>
            </Style>
        </dx:WindowedDocumentUIService.WindowStyle>
    </dx:WindowedDocumentUIService>
</dxmvvm:Interaction.Behaviors>

Example

View Example

<UserControl x:Class="DXDocumentUIServiceSample.View.DetailedView"
    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:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
    xmlns:common="clr-namespace:DXDocumentUIServiceSample.Common"
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <GroupBox Header="User Info" Grid.Row="0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0">
                    <TextBlock Text="{Binding Path=ID, Converter={common:StringAggregationConverter}, ConverterParameter=ID}"/>
                    <TextBlock Text="{Binding NickName, Converter={common:StringAggregationConverter}, ConverterParameter=Nick}"/>
                </StackPanel>
                <StackPanel Grid.Column="1">
                    <TextBlock Text="{Binding Registration, Converter={common:StringAggregationConverter}, ConverterParameter=Registration}"/>
                    <TextBlock Text="{Binding Rating, Converter={common:StringAggregationConverter}, ConverterParameter=Rating}"/>
                </StackPanel>
            </Grid>
        </GroupBox>
        <GroupBox Header="Activity By User" Grid.Row="1">
            <dxc:ChartControl>
                <dxc:XYDiagram2D>
                    <dxc:SplineAreaSeries2D DisplayName="Global Activity" LabelsVisibility="True" Transparency="0.5" DataSource="{Binding GlobalUserActivity}" ValueDataMember="Count" ArgumentDataMember="Month"/>
                    <dxc:SplineAreaSeries2D DisplayName="Local Activity" LabelsVisibility="True" Transparency="0.5" DataSource="{Binding LocalUserActivity}" ValueDataMember="Count" ArgumentDataMember="Month"/>
                </dxc:XYDiagram2D>
            </dxc:ChartControl>
        </GroupBox>
    </Grid>
</UserControl>