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

Office Inspired UI

The Microsoft Office Suite includes various applications, such as Word, Excel, PowerPoint, Visio, etc. However, all of their UIs are built according to a pattern similar to what the following figure illustrates.

The figure below shows in detail what a typical Office-inspired app consists of.

To emulate the Office-inspired UI within your apps, use the following DevExpress controls.

  • Ribbon Control + Ribbon Status Bar

    Introduced in Microsoft Office 2007, the Ribbon Control is used throughout all Office applications, serving as the replacement for traditional toolbars. The RibbonStatusBar is displayed at the very bottom of an application form and is typically used to display various info.

  • Navigation Area

    One of multiple Navigation Controls that allows your end-users to switch content in the application content area or perform other tasks.

    • Navigation Bar - the traditional side bar control that features expandable groups and regular items. The control has three built-in styles that significantly affect its behavior and appearance;
    • AccordionControl - the modern replacement for the navigation bar that allows you to create a multi-level hierarchy of groups and items;
    • NavigationPane - the side bar, similar to one seen in Adobe Reader. Features vertically aligned tab headers, clicking that causes the specific content to be displayed within the resizable pane aside.
  • Content Area

    Various Office-inspired controls that display main application content.

    • Data Grid - the industry-leading editing and data shaping component for end-users to display and manage large amounts of data. Enables a flexible UI with a wide-variety of views, including Banded Grid View, Advanced Banded Grid View, Card View, Layout View, WinExplorer View and Tile View;
    • Rich Text Editor - a powerful word processor for MS Word-like apps;
    • Scheduler - provides a full set of multi-purpose elements that deliver the MS Outlook style to your scheduling application;
    • Spreadsheet - emulates the look, feel and capabilities of MS Excel and allows you to create, view and edit spreadsheet documents.
  • Notifications

    Allow you to communicate with your end-users, notifying them of crucial events happening within the app. Presented as small windows that typically pop up at the bottom or top screen edge, and are dismissed after a certain delay.

  • OfficeNavigationBar

    Emulates the brand-new Microsoft navigation control introduced in Outlook 2013. A small bar with click-able items provides loads of powerful features and is capable of integrating with a Navigation Bar.

  • Additional Controls and Components

    • RibbonForm - the replacement for the default form, specially designed to be used along with the Ribbon. The RibbonForm shares its title bar with the Ribbon, which brings multiple useful features and saves the application space.
    • Layout Manager - allows you to effectively arrange other components across the application form.
    • Various utility and multi-use controls that allow you to polish your app and implement such features as splash screens, custom wait forms, spell checking, multifunctional application buttons within Windows taskbar, adorner elements drawn above UI items, etc.

Instead of manual Office-inspired UI implementation, you can also use the DevExpress Template Gallery that contains such templates as:

  • Word Processing Application - creates a ready-to-use MS Word-like application;

  • Scheduling Application - creates a ready-to-use scheduling application with integrated calendar, navigation bar and Ribbon;

Expanded Examples

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