Log In
[Expand]General Information
[Collapse]WinForms Controls
 [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]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]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[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 is dedicated to building a Windows Modern UI application using templates provided by the DevExpress Template Gallery. You may also review this tutorial that explains how to build an application of the same type manually.

  1. In Visual Studio, go to "File | New | Project" or press CTRL+SHIFT+N to create a new project. Select the "DevExpress Template Gallery" option and click OK.

  2. The Template Gallery provides three templates for creating Windows Modern-inspired apps. These templates can be found under the "WINFORMS WINDOWS UI APPLICATIONS" heading.

    • 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 description for this template is given below.

    • Wizard Application
      A WindowsUI View-based application that emulates an installation wizard. Four user controls are wrapped into corresponding "Start", "Options", "Install" and "Finish" documents 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 (see the Navigating Through Containers article to learn more about parameterized navigation).

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

  3. Run the application to explore what has been generated.

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

    Clicking a tile brings you to an item detail page. Using page headers at the page's top right corner, you can browse details of other items whose tiles belong to the same group as the clicked tile.

    Round buttons of the hub page navigate you to a group detail page. This page displays group info, as well as brief information on every item within this group. You can click item images to navigate to the item’s detail page.

    To navigate back to the previously displayed page, press ESC or right-click a container. This will invoke Navigation Bars with the embedded "Back" button. Since your application runs as a borderless full-screen window, the "Exit" button will also appear automatically.

  4. Review the auto-generated code to learn how the application works and be able to modify it.

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

    Item detail pages are also based on Page Group content containers. However, these are regular Page Groups with tab headers visible. Tab headers allow your 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?​​​​​​​