How To: Create a PageGroup 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 Group

5. Run the Document Manager Designer:

   

6. Select the designer’s ‘Elements’ page, switch to its ‘Documents’ section and add 2 Documents by clicking a corresponding button.

   

   After the Documents are created, a TileContainer and two Tiles corresponding to these Documents are automatically generated. We do not need these objects and will remove them utilizing the following steps.

7. Switch to the ‘Tiles’ page. Delete the automatically created Tiles by clicking the ‘Delete Tile’ button.

   

8. Finally, remove the automatically created TileContainer as well.

   

9. Create a PageGroup container. To do so, click the ‘Add New Container’ button and select ‘PageGroup’ 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 PageGroup. It does not yet contain any documents (its inherited DocumentGroup.Items collection is empty). Add documents to the PageGroup by dragging them from the ‘Documents’ panel into the ‘Items’ node.

    

    The resulting navigation tree will look like following.

    

11. The Documents created in step 6 are empty. In order to display content within these documents, we will use the Deferred Load feature. With this feature, contents for Documents will be provided via 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) {
        WindowsUIView view = sender as WindowsUIView;
        if (e.Document == view.Documents[0]) {
            e.Control = new RichEditControl() { Text = "Text1" };
        }
        else e.Control = new RichEditControl() { Text = "Text2" };
    }
    

    VB.NET

    Private Sub windowsUIView1_QueryControl(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs) Handles windowsUIView1.QueryControl
        Dim view As WindowsUIView = TryCast(sender, WindowsUIView)
        If e.Document = view.Documents(0) Then
            e.Control = New RichEditControl() With {.Text = "Text1"}
        Else
            e.Control = New RichEditControl() With {.Text = "Text2"}
        End If
    End Sub
    

    As you noticed, RichEditControls are used as Documents’ 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 PageGroup‘s advanced settings in the designer’s ‘Content Containers’ page. For instance you can change the PageGroup‘s caption and animation effects that occur when switching between Documents. To do so, go to the mentioned designer’s section and set the IDocumentSelectorDefaultProperties.SwitchDocumentAnimationMode property to the desired value. Additionally, you can specify the IDocumentSelectorDefaultProperties.SwitchDocumentAnimationFrameInterval and IDocumentSelectorDefaultProperties.SwitchDocumentAnimationFramesCount properties to set the desired animation quality and duration.

You can also set appearance options in 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 documents
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document doc1 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document() { Caption = "Document 1" };
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document doc2 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document() { Caption = "Document 2" };
    view.Documents.AddRange(new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document[] { doc1, doc2 });
    //Creating and populating content container
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.PageGroup pageGroup1 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.PageGroup();
    pageGroup1.Items.AddRange(new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document[] { doc1, doc2 });
    view.ContentContainers.Add(pageGroup1);
    //Additional settings
    pageGroup1.Caption = "Page Group";
    pageGroup1.Properties.SwitchDocumentAnimationMode = TransitionAnimation.VerticalSlide;
    view.AppearanceCaption.ForeColor = System.Drawing.Color.OrangeRed;
    //Setting a start-up container
    e.ContentContainer = pageGroup1;
}

private void windowsUIView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) {
    WindowsUIView view = sender as WindowsUIView;
    if (e.Document == view.Documents[0]) {
        e.Control = new RichEditControl() { Text = "Text 1" };
    }
    else e.Control = new RichEditControl() { Text = "Text 2" };
}

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 documents
    Dim doc1 As New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document() With {.Caption = "Document 1"}
    Dim doc2 As New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document() With {.Caption = "Document 2"}
    view.Documents.AddRange(New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document() { doc1, doc2 })
    'Creating and populating content container
    Dim pageGroup1 As New DevExpress.XtraBars.Docking2010.Views.WindowsUI.PageGroup()
    pageGroup1.Items.AddRange(New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document() { doc1, doc2 })
    view.ContentContainers.Add(pageGroup1)
    'Additional settings
    pageGroup1.Caption = "Page Group"
    pageGroup1.Properties.SwitchDocumentAnimationMode = TransitionAnimation.VerticalSlide
    view.AppearanceCaption.ForeColor = System.Drawing.Color.OrangeRed
    'Setting a start-up container
    e.ContentContainer = pageGroup1
End Sub

Private Sub windowsUIView1_QueryControl(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs)
    Dim view As WindowsUIView = TryCast(sender, WindowsUIView)
    If e.Document = view.Documents(0) Then
        e.Control = New RichEditControl() With {.Text = "Text 1"}
    Else
        e.Control = New RichEditControl() With {.Text = "Text 2"}
    End If
End Sub