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]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: Build an Office-inspired UI manually

This tutorial demonstrates how to build a typical Office Inspired UI shown below. Note that you can also use the Template Gallery to build the same UI type.

  1. In Visual Studio, go to "File | New | Project" or press CTRL+SHIFT+N to create a new project. Select the default VS "Windows Forms Application" template and click OK.

  2. Use the Visual Studio Toolbox to locate and add to your form Navigation Frame, Navigation Bar and Office Navigation Bar controls.

  3. Arrange the controls as shown below.

  4. Use the Navigation Bar's smart tag to switch the bar to the Navigation Pane View.

  5. Change captions for automatically created NavBarGroups and NavigationPages to "Employees" and "Customers". Also, assign the same text strings to the Tag property of both pages.

  6. Click Navigation Frame's chevron buttons to select different pages and drop a LabelControl on each page, then customize label captions. These labels will help you to identify Navigation Frame pages at runtime.

  7. Use the Office Navigation Bar smart tag to remove automatically generated "Item1" and "Item2" elements.

  8. Assign your Navigation Bar to the OfficeNavigationBar.NavigationClient property to bind both controls together. You will notice that your Office Navigation Bar now has "Employees" and "Customers" elements based on existing Navigation Bar groups. Launch the app and click these elements to see the Navigation Bar changing its active group in accordance.

  9. Handle the NavBarControl.ActiveGroupChanged event to switch selected Frame pages. The code below uses page tags to find the required page.
  10. Test your application at runtime. Note Navigation Frame animation effects, enabled by default.

  11. Back at design time, invoke the form smart tag (you may need to rebuild the project and reopen the form to see this smart tag) and click the "Convert to Ribbon Form" option. This will convert your main form to Ribbon Form and add Ribbon and Ribbon Status Bar controls.

  12. Add a BarSubItem with two child BarButtonItems to your Ribbon Page Group. End-users will be able to switch "Employees" and "Customers" Navigation Frame pages by clicking these buttons.

  13. Select the first button at design time and double-click it. This will create the BarItem.ItemClick event handler and bring you to form code. The code sample below illustrates how to switch active Navigation Bar groups. Coupled with the previously handled NavBarControl.ActiveGroupChanged event, clicking this button will also switch Navigation Frame pages.
  14. Select the second BarButtonItem at design time and locate the ItemClick event in the VS Properties window. Use the combo box to choose the same event handler as for the first button. Now both sub-menu items are functional. Launch the application and make sure the Navigation Frame changes its pages correctly.

You now have a sample application with an Office-inspired UI and implemented navigation. To populate your controls with real data, review documentation sections related to these individual controls. Also, check out the Responding to User Clicks at Runtime article to learn about other means to use the Navigation Bar control in app navigation.

Expanded See Also

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