Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Collapse]Build an Application
  [Collapse]Choose Application UI
   [Expand]Office Inspired UI
   [Collapse]Visual Studio Inspired UI
     Step 1 - Document Manager
     Step 2 - Dock Manager
     Step 3 - Bar Manager
   [Expand]Windows Modern UI
    Touch-Enabled Tile UI
   Data Management Controls
  [Expand]Printing and Exporting
  [Expand]WinForms MVVM
  [Expand]Skins
  [Expand]Localization
  [Expand]Right-to-Left Layout
   Redistribution and Deployment
 [Expand]Controls and Libraries
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Step 1 - Document Manager

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

Expanded See Also

How would you rate this topic?​​​​​​​