Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Build an Office-inspired UI using DevExpress Project Templates

  • 3 minutes to read

This tutorial uses the DevExpress Template Kit to create a WinForms Office-inspired UI.

Note

The DevExpress Template Kit includes project templates for .NET 8+ and C# only.

Use the DevExpress Template Gallery to create DevExpress-powered applications that target .NET Framework.

Tip

Read the following help topic for information on how to download and install the DevExpress Template Kit: Install DevExpress Template Kit.

#Create Outlook UI Based on the Project Template

  1. In Visual Studio, go to “File | New | Project” to create a new project. Select DevExpress v24.2 Template Kit and click Next:

    Create a New WinForms Project - DevExpress Template Kit

  2. Specify project settings and click Create to run the DevExpress Project Wizard.
  3. Select the WinForms platform. Navigate to Navigation & Document Layout and select the “Modular Application”. Click Create Project.

    Outlook UI - DevExpress Template Kit

  4. Run the application to see the result.

#Implementation Details

#UI Elements

The DevExpress Project Wizard creates the following UI elements:

Ribbon UI

RibbonControl / RibbonForm

Read the following help topic for information on Ribbon UI customization: Get Started with Ribbon Control.

Sidebar

NavBarControl

Read the following help topic for additional information: Get Started with Navigation Bar.

Bottom-navigation UI

OfficeNavigationBar

Read the following help topic for additional information: Get Started with Office Navigation Bar.

Content Area

NavigationFrame

The project templates uses the NavigationFrame control to create a single document interface (SDI). Read the following help topic for more information: Get Started with Navigation Frame & Tab Pane.

#UI Navigation

  • The ActiveGroupChanged event is raised when a user clicks a navigation group in the sidebar. It updates the selected page of the NavigationFrame to match the index of the selected group in the NavBarControl and display the corresponding page in the content area.
  • The ItemClick event raised when a user selects an item from the “Navigation” dropdown menu. It updates the sidebar navigation accordingly. The event handler finds the index of the clicked item and activates the corresponding group in the NavBarControl.
using DevExpress.XtraBars.Ribbon;

namespace DevExpressOfficeInspiredApp {
    public partial class Form1 : RibbonForm {
        public Form1() {
            InitializeComponent();
        }
        void navBarControl_ActiveGroupChanged(object sender, DevExpress.XtraNavBar.NavBarGroupEventArgs e) {
            navigationFrame.SelectedPageIndex = navBarControl.Groups.IndexOf(e.Group);
        }
        void barButtonNavigation_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
            int barItemIndex = barSubItemNavigation.ItemLinks.IndexOf(e.Link);
            navBarControl.ActiveGroup = navBarControl.Groups[barItemIndex];
        }
    }
}

The following animation shows the result:

See Also