How To: Create a Page Container

• Oct 29, 2020
• 4 minutes to read

Prerequisites

1. Create a Windows Forms Application.
2. Windows UI applications are generally designed to run in full-screen mode. Modify the main form to meet these requirements. Set the FormBorderStyle property to None and the WindowState property to Maximized.
3. Drop a DocumentManager component on the form.

4. Change the DocumentManager‘s View to WindowsUI View. Click the DocumentManager‘s smart tag and select the Convert To WindowsUIView option.

   

Creating Page

5. Run the Document Manager Designer.

   

6. Switch to the designer’s ‘Documents’ section and add a Document by clicking the corresponding button.

   

   After the Document is created, a TileContainer and a Tile corresponding to this Document are automatically generated. We do not need these objects and will remove them utilizing the following steps.

7. Go to the designer’s ‘Tiles’ page. Delete the automatically created Tile via the ‘Delete Tile’ button.

   

8. Switch to the designer’s ‘Content Containers’ page and delete the automatically created TileContainer via the ‘Delete Container’ button.

   

9. Create a Page container. To do so, click the ‘Add New Container’ button and select ‘Page’ from the drop-down menu.

   

10. Go to the designer’s ‘Navigation Tree’ section. Here you can see the application’s hierarchy. The topmost container is our Page. It does not yet contain any documents (its Page.Document property is empty). Add the document to the Page by dragging them from the ‘Documents’ panel into the ‘Page 1’ node. The resulting navigation tree will look like following.

    

11. The Document created in step 6 is empty. In order to display content within this document, we will use the Deferred Load feature. With this feature, contents for Documents will be provided on an event. Switch to the designer’s ‘Views’ page and select the WindowsUIView object. In the property grid, switch to events and double-click the BaseView.QueryControl event.

    

    Type the following code in the BaseView.QueryControl event handler.

    C#

    private void windowsUIView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) {
            e.Control = new RichEditControl() { Text = "Text1" };
    }
    

    VB.NET

    Private Sub windowsUIView1_QueryControl(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs) Handles windowsUIView1.QueryControl
        e.Control = New RichEditControl() With {
                    .Text = "Text1"}
    End Sub
    

    As you noticed, RichEditControl is used as the Document‘s content. To compile and run the solution, ensure that all required assemblies are included in the solution.

12. Run the application. The result is demonstrated in the figure below.

    

Additional Settings

You can customize the Page‘s advanced settings in the designer’s ‘Content Containers’ page. For instance you can change the Page‘s caption and orientation according to which its child Document is arranged. Also, to modify container’s appearance settings you can switch to the designer’s ‘Appearance’ page.

Code

This section demonstrates how to create the example in code. Because of automatic Tiles and TileContainer generation (see step 6), we have to use the WindowsUIView.QueryStartupContentContainer to set an application start-up container.

C#

private void windowsUIView1_QueryStartupContentContainer(object sender, DevExpress.XtraBars.Docking2010.Views.WindowsUI.QueryContentContainerEventArgs e) {
    WindowsUIView view = sender as WindowsUIView;
    //Creating a document
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document doc1 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document() { Caption = "Document 1" };
    view.Documents.Add(doc1);
    //Creating and populating content container
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Page page1 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Page();
    page1.Document = doc1;
    view.ContentContainers.Add(page1);
    //Additional settings
    page1.Caption = "Page";
    page1.Properties.Orientation = Orientation.Vertical;
    view.AppearanceCaption.ForeColor = System.Drawing.Color.OrangeRed;
    //Setting a start-up container
    e.ContentContainer = page1;
}

private void windowsUIView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) {
        e.Control = new RichEditControl() { Text = "Text 1" };
}

VB.NET

Private Sub windowsUIView1_QueryStartupContentContainer(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.WindowsUI.QueryContentContainerEventArgs)
    Dim view As WindowsUIView = TryCast(sender, WindowsUIView)
    'Creating a document
    Dim doc1 As New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document() With {.Caption = "Document 1"}
    view.Documents.Add(doc1)
    'Creating and populating content container
    Dim page1 As New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Page()
    page1.Document = doc1
    view.ContentContainers.Add(page1)
    'Additional settings
    page1.Caption = "Page"
    page1.Properties.Orientation = Orientation.Vertical
    view.AppearanceCaption.ForeColor = System.Drawing.Color.OrangeRed
    'Setting a start-up container
    e.ContentContainer = page1
End Sub

Private Sub windowsUIView1_QueryControl(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs)
    Dim TempRichEditControl As RichEditControl = New RichEditControl() { Text = "Text 1" }
    e.Control = New RichEditControl() { Text
End Sub