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]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]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How To: Create a Windows Modern UI Application Manually

This document is dedicated to building a Windows Modern UI application manually. You may also review this tutorial, which explains how to build an application of the same type using templates provided by the DevExpress Template Gallery.

  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. Choose the "Blank Application" template and click "Create Project".

  3. Invoke the form smart tag and click "Convert To Skinnable Form". By doing so, you will transform a regular form into an XtraForm.

  4. In the same form smart tag, click "Select Skin..." to add a DefaultLookAndFeel component. Use this component's smart tag to apply a desired DevExpress skin. For Windows Modern UI choose a flat skin with light appearance and then thin or no borders, e.g., Office 2013, Office 2016, Metropolis, etc.

  5. Set the form's FormBorderStyle property to None and the WindowState property to Maximized.

  6. Click the "Instant Layout Assistant" link on the form to launch the on-form wizard. Hover over all side regions and click "Remove Area". For the remaining central area, click "Add Control" and select "App UI Manager | Windows UI". When it is done, click the apply button to add the DocumentManager component with the WindowsUIView applied.

  7. Right-click your project in the Solution Explorer window and select "Add DevExpress Item | User Control...".

  8. Add a few more user controls, then design them to carry whatever content required. These user controls will be presented as separate application screens.

  9. Back to the main application form, invoke the DocumentManager component's smart tag and click "Run Designer". Switch to the Designer's "Elements | Documents" tab and click "Populate".

    After you click "Populate", the Document Manager will generate the following:

    • Document objects that refer to your user controls by using the BaseDocument.ControlName and BaseDocument.ControlTypeName properties;
    • medium-sized tiles (the Tile objects) for generated documents;
    • a Tile Container to store and display tiles;
    • the BaseView.QueryControl event handler that initializes documents.
  10. Run and review your application. The start-up application screen is your auto-generated Tile Control with tiles. Press Esc or right-click the empty form space to invoke Navigation Bars with the embedded "Exit" button.

    Tiles utilize the Tile.Document property as a reference to a related document. Clicking a tile brings you to a dynamically created Page container that displays this related document. Page containers display a header with the embedded "Back" button. Same button is displayed within navigation bars.

  11. Close the application and modify it. First, add application title strings using the WindowsUIView.Caption, BaseContentContainer.Caption and BaseContentContainer.Subtitle properties respectively. Also, modify auto-generated document captions by using the BaseDocument.Caption property.
    Note

    Initially, you will be unable to see the WindowsUIView.Caption string since the tile container caption will overlap it. However, this title will be visible in content container headers, which you will create later in this tutorial.

  12. Go to the designer's "Elements" page and select the "Content Containers" tab. Click "Add New Container" and select Page Group from the drop-down menu.

  13. Switch to the designer's "Layout | Navigation Tree" tab and drag your documents into the page group's "Items" collection.

  14. In the same "Layout | Navigation Tree" designer tab, drag the page group to the tile container's "ActivationTarget" node. By doing so, you assign your page group to the tile container's TileContainer.ActivationTarget property. As a result, the page group will be activated on clicking any tile from this tile container.

  15. Run the app to see what has changed. Clicking tiles now leads you to the page group. Besides, the page group automatically activates a document related to a clicked tile, so there is no need to explicitly set the activation target for each individual tile. The page group header displays the View caption (the WindowsUIView.Caption property) and shows the embedded "Back" button - now end-users can navigate back to the start-up page without invoking the Navigation Bars.

    To replace the header string, specify the BaseContentContainer.Caption property for the page group container. You can also specify document BaseDocument.Header properties to modify text within page headers.

  16. All documents in your application have been generated automatically. Now add a couple of documents manually. To do that, go to the designer's "Elements | Documents" tab and click "Add New Document". Note that tiles for these documents will also be added automatically.

  17. The documents you have added carry no content and an attempt to display such a document will throw an exception. Empty documents are populated dynamically on the BaseView.QueryControl event. This feature is called Deferred Load and allows the View to load documents only on demand, which can significantly speed up your application. The QueryControl event was already handled at step 9, so you only need to add a few more code lines.

  18. You now need another content container to store your new documents. Add a Slide Group container and populate it with items, the same way you did with the page group at steps 12 and 13.

  19. In the designer's "Layout | Navigation Tree" tab, drag the slide group into the "Activation Target" node for each new tile. The navigation hierarchy should look like the following.

  20. Run the application to test the current navigation hierarchy. Tiles for auto-generated documents do not have their own Tile.ActivationTarget property specified and thus, lead to the activation target of their parent tile container (to the page group). Your new tiles will prioritize their own activation targets and navigate you to the slide group upon clicking.

    Clicking a document header (the BaseDocument.Header property) allows you to view this document separately, in a dynamically generated Page container.

  21. Customize your start-up tile container and its tiles as required. Tile container is based on a separate Tile Control and inherits its base tile customization concepts.

    The animation below illustrates a customized tile container with sample tiles, populated using templates.

  22. Complete your application by making the following minor modifications.

  23. Congratulations, you now have a Windows Modern UI application! See Application UI Manager help articles to learn more about this component and its other Views, or the WindowsUI View section for more information on this specific View.

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