Create a Windows UI Application Manually

• Jan 28, 2025
• 8 minutes to read

This document explains how to build a Windows Modern UI application manually. To create an application with the DevExpress Template Gallery, see the How To: Create a Windows Modern UI Application Using the Template Gallery document.

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

3. Invoke the smart tag and click “Convert To Skinnable Form” to change a regular form into an XtraForm.

4. In the same smart tag pane, click “Select Skin…” to add a DefaultLookAndFeel component and choose the required DevExpress skin. For a Windows Modern UI, choose a flat skin with a light appearance and thin or no borders (for example, 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”. In the remaining empty area, click “Add Control” and select “App UI Manager | Windows UI”. Next, click the apply button to add the DocumentManager component with the WindowsUIView applied.

7. Right-click the project in the Solution Explorer window and select “Add DevExpress Item | User Control…”.

8. Add a few more user controls and populate them. These user controls will be presented as separate application screens.

9. Return 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”.

10. Run and review your application. On application start-up, an auto generated Tile Control populated with tiles is displayed. Press Esc or right-click the empty form space to invoke Navigation Bars with an embedded “Exit” button.

11. Close the application to modify it. First, use the WindowsUIView.Caption, BaseContentContainer.Caption and BaseContentContainer.Subtitle propertiesto add application title strings. Also, use the BaseDocument.Caption property to modify auto generated document captions.

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, which assigns the page group to the tile container’s TileContainer.ActivationTarget property. Note that the page group is activated when a tile within the container is clicked.

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. Run the app to see the changes. When you click a tile, you navigate to the page group, which automatically activates the tile’s corresponding document – so there is no need to explicitly set the activation target for each tile. The page group header displays the View caption (the WindowsUIView.Caption property) and an embedded ”Back” button - for end-users to navigate back to the start-up page without a Navigation Bars.

16. All application documents are auto generated. Next, in the designer’s ”Elements | Documents” tab, click ”Add New Document” to add a document manually. A tile corresponding to the document is added automatically.

17. Since the additional documents have no content, an attempt to display one of these documents will throw an exception. The BaseView.QueryControl event uses the Deferred Load feature to dynamically populate empty documents, which can improve application performance significantly. The QueryControl event was already handled at step 9, so you only need to add a few more code lines.

18. Another another content container is required to store the new documents. Add a Slide Group container and populate it with items, as explained in steps 12 and 13. (In the “Content Containers” tab, select “SlideGroup” instead of “PageGroup”.)

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 appear as follows.

20. Run the application to test the current navigation hierarchy. Note that the Tile.ActivationTarget property is not specified for tiles with auto generated documents, so the parent tile container (the page group) is activated instead. The additional tiles will apply their own activation targets as well, which navigate to the slide group.

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

22. Complete the application with the following minor modifications.

23. Congratulations, your Windows Modern UI application is complete. See Application UI Manager for more information about this component and its Views, or the WindowsUI View section for more information on this specific View.