Step 1 - Document Manager

  • 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.

    DockingUI - Create Project

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

    DockingUI - DocumentManager Toolbox

  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.

    DockingUI - DocumentManager SmartTag

  4. Switch to the 'Documents' section in the Designer.

    DockingUI - Documents 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.

    DockingUI - Add UserControls

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

    DockingUI - Add UserControls Dialog

    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.

    DockingUI - Document ControlName

    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:

    
    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();
    }
    
  8. The image below illustrates the result with the Office 2013 Skin applied.

    DockingUI - Step1 Result

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

See Also