ContextQMD
Back to Devexpress

How To: Create a TileContainer

windowsforms-11797-controls-and-libraries-application-ui-manager-views-windowsui-view-getting-started-how-to-create-a-tilecontainer.md

latest8.4 KB
Original Source

How To: Create a TileContainer

  • Aug 29, 2023
  • 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 Tile Container

  1. Run the Document Manager Designer.

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

  3. Go to the designer’s ‘Tiles’ page. As you can see, 4 tiles are automatically generated. If you skipped the previous step, create 4 Tiles manually by clicking the ‘Add New Tile’ button.

  4. Switch to the designer’s ‘Content Containers’ page. If you have created Documents before, a TileContainer for generated Tiles is already added automatically. If not, create a TileContainer by clicking the ‘Add New Container’ button and selecting the ‘TileContainer’ option from the drop-down list.

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

  6. Now, after the application’s hierarchy has been built, go back to the designer’s ‘Tiles’ section and customize your tiles. Set the ItemSize properties for first three tiles to Medium. Also, set their BaseTile.Group properties to Group 1. For the last tile, set its Group property to a different value, for example Group 2. Refer to the Tile Groups and Items article to learn more about tile groups.

  7. You can also set appearance options in the designer’s ‘Appearances’ page.

  8. Run the application. The result with customized Tiles and appearance settings is demonstrated in the figure below.

Code

This section demonstrates how to create the example in code. Here, the WindowsUIView.QueryStartupContentContainer event is handled to set an application start-up container.

csharp
private void windowsUIView1_QueryStartupContentContainer(object sender, DevExpress.XtraBars.Docking2010.Views.WindowsUI.QueryContentContainerEventArgs e) {
    //Creating the Container
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.TileContainer tileContainer1 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.TileContainer();
    tileContainer1.Properties.ItemSize = 200;
    tileContainer1.Caption = "Tile Container";
    //Creating Documents
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document doc1 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document();
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document doc2 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document();
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document doc3 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document();
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document doc4 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document();
    //Creating and Customizing Tiles
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile tile1 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile();
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile tile2 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile();
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile tile3 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile();
    DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile tile4 = new DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile();
    tile1.Group = "Group 1";
    tile1.Properties.ItemSize = DevExpress.XtraEditors.TileItemSize.Medium;
    tile1.Document = doc1;
    tile2.Group = "Group 1";
    tile2.Properties.ItemSize = DevExpress.XtraEditors.TileItemSize.Medium;
    tile2.Document = doc2;
    tile3.Group = "Group 1";
    tile3.Properties.ItemSize = DevExpress.XtraEditors.TileItemSize.Medium;
    tile3.Document = doc3;
    tile4.Group = "Group 2";
    tile4.Document = doc4;
    tileContainer1.Items.AddRange(new DevExpress.XtraBars.Docking2010.Views.WindowsUI.BaseTile[] { tile1, tile2, tile3, tile4 });
    (sender as WindowsUIView).ContentContainers.Add(tileContainer1);
    //Setting a Start-Up Container
    e.ContentContainer = tileContainer1;
}
vb
Private Sub windowsUIView1_QueryStartupContentContainer(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.WindowsUI.QueryContentContainerEventArgs)
    'Creating the Container
    Dim tileContainer1 As DevExpress.XtraBars.Docking2010.Views.WindowsUI.TileContainer = New DevExpress.XtraBars.Docking2010.Views.WindowsUI.TileContainer()
    tileContainer1.Properties.ItemSize = 200
    tileContainer1.Caption = "Tile Container"
    'Creating Documents
    Dim doc1 As DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document = New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document()
    Dim doc2 As DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document = New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document()
    Dim doc3 As DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document = New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document()
    Dim doc4 As DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document = New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Document()
    'Creating and Customizing Tiles
    Dim tile1 As DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile = New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile()
    Dim tile2 As DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile = New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile()
    Dim tile3 As DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile = New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile()
    Dim tile4 As DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile = New DevExpress.XtraBars.Docking2010.Views.WindowsUI.Tile()
    tile1.Group = "Group 1"
    tile1.Properties.ItemSize = DevExpress.XtraEditors.TileItemSize.Medium
    tile1.Document = doc1
    tile2.Group = "Group 1"
    tile2.Properties.ItemSize = DevExpress.XtraEditors.TileItemSize.Medium;
    tile2.Document = doc2
    tile3.Group = "Group 1"
    tile3.Properties.ItemSize = DevExpress.XtraEditors.TileItemSize.Medium;
    tile3.Document = doc3
    tile4.Group = "Group 2"
    tile4.Document = doc4
    tileContainer1.Items.AddRange(New DevExpress.XtraBars.Docking2010.Views.WindowsUI.BaseTile() { tile1, tile2, tile3, tile4 })
    TryCast(sender, WindowsUIView).ContentContainers.Add(tileContainer1)
    'Setting a Start-Up Container
    e.ContentContainer = tileContainer1
End Sub