Step 1 - Document Manager

• Oct 29, 2020
• 3 minutes to read

In this step, you will learn how to use the Document Manager component.

Note

You can start your application from any lesson. The component order in this tutorial is not strict, and can easily be rearranged.

The Document Manager allows you to create a Tabbed or MDI application UI, based on corresponding Views (Views). The main Document Manager elements are Documents - objects capable of wrapping desired content and displayed based on the parent View.

1. Start Visual Studio, create a new Windows Forms Application project, and specify its name and location.

   

2. Locate the DocumentManager component in the Visual Studio Toolbox and drop it onto your form.

   

3. Invoke the DocumentManager’s smart tag by clicking the smart tag button in the control’s top right corner. By default, the newly added DocumentManager has a Tabbed View applied. You can change it to another available View via the corresponding ‘Convert to…’ links. The default Tabbed View is suitable for the current example, so leave it unchanged and call the DocumentManager Designer.

   

4. Switch to the ‘Documents’ section in the Designer.

   

   In the designer you can add or remove Documents and modify their properties. Note that currently only the ‘Add Document’ button is enabled. Documents can receive their content on Document creation, Document activation or form load (refer to the Documents topic for details). In this example, you will use the third approach. To do so, add a few User Controls to your application.

   Note

   If you do not need multiple Documents for your application, use the Document Manager in Non-Document Mode.

5. Right-click your project in Solution Explorer and choose Add New Item, as shown below.

   

   In the dialog displayed, select User Control and enter its name.

   

   Repeat this step multiple times depending on your requirements. Then add controls to each User Control and customize their properties as required. Make sure that your project compiles without errors and proceed to the next step.

6. You now have multiple User Controls that represent a workspace for your end-users. Now add a Document for each existing User Control. Open the Designer and go to the Documents section again. As you can see, the Populate button is now available. Click this button to add a Document for each User Control in your project.

   

   Note that each Document is associated with a corresponding User Control via the BaseDocument.ControlName and BaseDocument.ControlTypeName properties.

7. Finally, handle the View’s BaseView.QueryControl event and pass the required control to each Document:

   C#

   private void tabbedView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) {
       if (e.Document.ControlName == "UserControl1") e.Control = new UserControl1();
       else e.Control = new UserControl2();
   }
   

   VB.NET

   Private Sub tabbedView1_QueryControl(sender As Object, e As DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs)
       If e.Document.ControlName = "UserControl1" Then
           e.Control = New UserControl1()
       Else
           e.Control = New UserControl2()
       End If
   End Sub
   

8. The image below illustrates the result with the Office 2013 Skin applied.

   

   In the next step, you will learn how to combine Document Manager with Dock Manager in your applications.