How To: Create a Windows Modern UI Application Using the Template Gallery
- 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.
In Visual Studio, click “File | New | Project” (or press CTRL+SHIFT+N) to create a new project. Select “DevExpress Template Gallery” and click OK.
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”.
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.
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.
Group detail pages are created by calling the CreateGroupItemDetailPage method.
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; }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.
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); }Hub page navigation is performed on BaseContentContainer.ButtonClick and BaseTile.Click events.
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]); } }