Skip to main content

How To: Create a SplitGroup Container

  • 4 minutes to read


  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.

    Metro Getting Started - Convert To Metro View

Creating Split Group

  1. Run the Document Manager Designer.

    DocumentManager - Designer Metro

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

    Metro Getting Started - Add Documents

    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.

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

    Metro Getting Started - Automatic Tiles

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

    Metro Getting Started - Automatic Container

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

    Metro Getting Started - Add a SplitGroup

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

    Metro Getting Started - SplitGroup Hierarchy

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

    Metro Getting Started - QueryControl Event

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

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

    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.

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

    Metro Getting Started - SplitGroup Result

Additional Settings

You can customize the SplitGroup‘s advanced settings in the designer’s ‘Content Containers’ page. For instance you can change the SplitGroup‘s caption and orientation according to which child Documents are arranged.

To modify appearance settings for the current container, switch to the designer’s ‘Appearances’ page.

Metro Getting Started - Appearances

SlideGroup and SplitGroup containers have the Overview Screen that displays all child Documents as tiles. The Overview Screen is invoked via the related button on Navigation Bars.

Metro Getting Started - SlideGroup Overview

You can customize this screen by using properties, accessed through the WindowsUIView.OverviewContainerProperties group.

Metro Getting Started - SlideGroup Overview Properties


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.

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.SplitGroup splitGroup1 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.SplitGroup();
    splitGroup1.Items.AddRange(new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document[] { doc1, doc2 });
    //Additional settings
    splitGroup1.Caption = "Slide Group";
    splitGroup1.Properties.Orientation = Orientation.Vertical;
    view.AppearanceCaption.ForeColor = System.Drawing.Color.OrangeRed;
    //Setting a start-up container
    e.ContentContainer = splitGroup1;

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