Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Collapse]Build an Application
  [Collapse]Choose Application UI
   [Expand]Office Inspired UI
   [Expand]Visual Studio Inspired UI
   [Collapse]Windows Modern UI
     How To: Create a Windows Modern UI Application Manually
     How To: Create a Windows Modern UI Application Using the Template Gallery
    Touch-Enabled Tile UI
   Data Management Controls
  [Expand]Printing and Exporting
  [Expand]WinForms MVVM
  [Expand]Skins
  [Expand]Localization
  [Expand]Right-to-Left Layout
   Redistribution and Deployment
 [Expand]Controls and Libraries
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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

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.

    Group detail pages are created by calling the CreateGroupItemDetailPage method.

    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.

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

How would you rate this topic?​​​​​​​