How To: Create a Windows Modern UI Application Using the Template Gallery

• Oct 29, 2020
• 5 minutes to read

This document explains how to build a Windows Modern UI application with the DevExpress Template Gallery. See the How To: Create a Windows Modern UI Application Manually article for information how to create the same application manually.

1. In Visual Studio, click “File | New | Project” (or press CTRL+SHIFT+N) to create a new project. Select “DevExpress Template Gallery” and click OK.

   

2. The Template Gallery provides three templates to create Windows Modern-inspired apps, located under the “WINFORMS WINDOWS UI APPLICATIONS” section.

   

   • Blank Application

     A WindowsUI View-based application with a blank Tile Container. Choose this template to skip initial form setup and proceed directly to building the application.

   • Tile Application

     A complex WindowsUI View-based application populated from a data source. The tutorial below will use this template.

   • Wizard Application

     A WindowsUI View-based application that emulates an installation wizard. Four user controls are wrapped into corresponding documents (“Start”, “Options”, “Install” and “Finish”) and placed within a Page Group container with hidden page headers. Navigation buttons (“Next”, “Back” and “Exit”) are created dynamically on the WindowsUIView.QueryDocumentActions event. The type of the currently displayed wizard page is passed on the NavigatedTo event as a parameter.

   For this lesson, choose the “Tile Application” template and click “Create Project”.

3. Run the application.

   The start-up hub page is a Tile Container with six TileGroups, populated with static Tile objects.

   

   Click a tile to display the item detail page. Click page headers at the top right corner to view details for other items within the tile’s group.

   

   Round buttons on the hub page navigate to a group detail page, which displays group info, as well as an overview of each item within it. Click item images to navigate to an item’s detail page.

   

   To navigate to the previous page, press ESC or right-click a container, to invoke Navigation Bars with an embedded “Back” button. Since the application runs as a borderless full-screen window, the “Exit” button will also appear automatically.

   

4. Review and modify the automatically generated code.

   Items displayed in this application are objects of the SampleDataItem class. The /Data/SampleData solution file contains a definition for this class, as well as the SampleDataSource class whose instance serves as a data source for the application.

   C#

   dataSource = new SampleDataSource();
   

   VB.NET

   dataSource = New SampleDataSource()
   

   Group detail pages are created by calling the CreateGroupItemDetailPage method.

   C#

   PageGroup CreateGroupItemDetailPage(SampleDataGroup group, PageGroup child) {
       GroupDetailPage page = new GroupDetailPage(group, child);
       PageGroup pageGroup = page.PageGroup;
       BaseDocument document = windowsUIView.AddDocument(page);
       pageGroup.Parent = tileContainer;
       pageGroup.Properties.ShowPageHeaders = DevExpress.Utils.DefaultBoolean.False;
       pageGroup.Items.Add(document as Document);
       windowsUIView.ContentContainers.Add(pageGroup);
       windowsUIView.ActivateContainer(pageGroup);
       return pageGroup;
   }
   

   VB.NET

   Private Function CreateGroupItemDetailPage(ByVal group As SampleDataGroup, ByVal child As PageGroup) As PageGroup
       Dim page As New GroupDetailPage(group, child)
       Dim pageGroup As PageGroup = page.PageGroup
       Dim document As BaseDocument = windowsUIView.AddDocument(page)
       pageGroup.Parent = tileContainer
       pageGroup.Properties.ShowPageHeaders = DevExpress.Utils.DefaultBoolean.False
       pageGroup.Items.Add(TryCast(document, Document))
       windowsUIView.ContentContainers.Add(pageGroup)
       windowsUIView.ActivateContainer(pageGroup)
       Return pageGroup
   End Function
   

   These detail pages are Page Group content containers. Tab headers for these containers are hidden since each of them hosts one single document. This document wraps the GroupDetailPage user control with group information. Brief item info blocks are GroupItemDetailPage user controls, owned by the GroupDetailPage user control. The diagram below illustrates this structure.

   

   Item detail pages are also based on Page Group content containers, but with visible tab headers. Tab headers allow end-users to switch between child documents that wrap instances of the ItemDetailPage user control.

   

   Item detail pages, their child documents and tiles for the hub page are generated on the CreateLayout method call.

   C#

   void CreateLayout() {
       foreach (SampleDataGroup group in dataSource.Data.Groups) {
           tileContainer.Buttons.Add(new DevExpress.XtraBars.Docking2010.WindowsUIButton(group.Title, null, -1,
               DevExpress.XtraBars.Docking2010.ImageLocation.AboveText, DevExpress.XtraBars.Docking2010.ButtonStyle.PushButton,
               null, true, -1, true, null, false, false, true, null, group, -1, false, false));
           PageGroup pageGroup = new PageGroup();
           pageGroup.Parent = tileContainer;
           pageGroup.Caption = group.Title;
           windowsUIView.ContentContainers.Add(pageGroup);
           groupsItemDetailPage.Add(group, CreateGroupItemDetailPage(group, pageGroup));
           foreach (SampleDataItem item in group.Items) {
               ItemDetailPage itemDetailPage = new ItemDetailPage(item);
               itemDetailPage.Dock = System.Windows.Forms.DockStyle.Fill;
               BaseDocument document = windowsUIView.AddDocument(itemDetailPage);
               document.Caption = item.Title;
               pageGroup.Items.Add(document as Document);
               CreateTile(document as Document, item).ActivationTarget = pageGroup;
           }
       }
       windowsUIView.ActivateContainer(tileContainer);
       tileContainer.ButtonClick += new DevExpress.XtraBars.Docking2010.ButtonEventHandler(buttonClick);
   }
   

   VB.NET

   Private Sub CreateLayout()
       For Each group As SampleDataGroup In dataSource.Data.Groups
           tileContainer.Buttons.Add(New DevExpress.XtraBars.Docking2010.WindowsUIButton(group.Title, Nothing, -1, DevExpress.XtraBars.Docking2010.ImageLocation.AboveText, DevExpress.XtraBars.Docking2010.ButtonStyle.PushButton, Nothing, True, -1, True, Nothing, False, False, True, Nothing, group, -1, False, False))
           Dim pageGroup As New PageGroup()
           pageGroup.Parent = tileContainer
           pageGroup.Caption = group.Title
           windowsUIView.ContentContainers.Add(pageGroup)
           groupsItemDetailPage.Add(group, CreateGroupItemDetailPage(group, pageGroup))
           For Each item As SampleDataItem In group.Items
               Dim itemDetailPage As New ItemDetailPage(item)
               itemDetailPage.Dock = System.Windows.Forms.DockStyle.Fill
               Dim document As BaseDocument = windowsUIView.AddDocument(itemDetailPage)
               document.Caption = item.Title
               pageGroup.Items.Add(TryCast(document, Document))
               CreateTile(TryCast(document, Document), item).ActivationTarget = pageGroup
           Next item
       Next group
       windowsUIView.ActivateContainer(tileContainer)
       AddHandler tileContainer.ButtonClick, AddressOf buttonClick
   End Sub
   

   Hub page navigation is performed on BaseContentContainer.ButtonClick and BaseTile.Click events.

   C#

   void tile_Click(object sender, TileClickEventArgs e) {
       PageGroup page = ((e.Tile as Tile).ActivationTarget as PageGroup);
       if (page != null) {
           page.Parent = tileContainer;
           page.SetSelected((e.Tile as Tile).Document);
       }
   }
   
   void buttonClick(object sender, DevExpress.XtraBars.Docking2010.ButtonEventArgs e) {
       SampleDataGroup tileGroup = (e.Button.Properties.Tag as SampleDataGroup);
       if (tileGroup != null) {
           windowsUIView.ActivateContainer(groupsItemDetailPage[tileGroup]);
       }
   }
   

   VB.NET

   Private Sub tile_Click(ByVal sender As Object, ByVal e As TileClickEventArgs)
       Dim page As PageGroup = (TryCast((TryCast(e.Tile, Tile)).ActivationTarget, PageGroup))
       If page IsNot Nothing Then
           page.Parent = tileContainer
           page.SetSelected((TryCast(e.Tile, Tile)).Document)
       End If
   End Sub
   
   Private Sub buttonClick(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.ButtonEventArgs)
       Dim tileGroup As SampleDataGroup = (TryCast(e.Button.Properties.Tag, SampleDataGroup))
       If tileGroup IsNot Nothing Then
           windowsUIView.ActivateContainer(groupsItemDetailPage(tileGroup))
       End If
   End Sub