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
   [Collapse]Office Inspired UI
     How to: Build an Office-inspired UI manually
     How to: Build an Office-inspired UI using DevExpress Template Gallery
   [Expand]Visual Studio Inspired UI
   [Expand]Windows Modern UI
    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: Build an Office-inspired UI using DevExpress Template Gallery

In this tutorial, you will use the DevExpress Template Gallery to build a typical Office Inspired UI as shown below. Note that you can also Build an Office-inspired UI 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. In the DevExpress Template Gallery, select the "Blank Application" option and proceed to the next step.

  3. The selected template creates a project with an empty skinnable XtraForm and enables the Layout Assistant Extension. Open the form's Smart Tag menu and click "Predefined Form Templates" under Layout Assistant Actions.

  4. Select the "Navigation Container" template (the "Office Inspired UI" group) and click Apply.

  5. Run the application and try the newly created UI. Try switching the themes using the In-Ribbon Gallery, navigate between the modules using the Ribbon menu or the bottom navigation control, and notice the animation effect when switching frames.

    Return to design time and review the changes that the template automatically applied to enable this UI. The form is now a Ribbon Form and has both a RibbonControl and RibbonStatusBaron it. On the Ribbon Control, the SkinRibbonGalleryBarItem automatically creates the Theme gallery at runtime, and the items in the Navigation menu use the following code to change the NavBar's active group.

    OfficeNavigationBar and NavBar controls are bound together so that clicking an item in one changes the active group in the other. Should the active group change – either this way or via the Ribbon event handler as described above – the following code executes to change the currently selected frame.

    Finally, there's a Navigation Frame control in the middle that allows you to customize, add or remove individual frames. Refer to the Navigation Frame and Tab Pane article to learn how to populate this control with pages and supply them with required content.

Expanded See Also

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