How to: Build an Office-inspired UI using DevExpress Template Gallery

• Oct 29, 2020
• 3 minutes to read

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 RibbonStatusBar on 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.

   C#

   void barButtonNavigation_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
       navBarControl.ActiveGroup = e.Item.Caption == "Employees" ? employeesNavBarGroup : customersNavBarGroup;
   }
   

   VB.NET

   Private Sub barButtonNavigation_ItemClick(ByVal sender As Object, ByVal e As DevExpress.XtraBars.ItemClickEventArgs)
       navBarControl.ActiveGroup = If(e.Item.Caption = "Employees", employeesNavBarGroup, customersNavBarGroup)
   End Sub
   

   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.

   C#

   void navBarControl_ActiveGroupChanged(object sender, DevExpress.XtraNavBar.NavBarGroupEventArgs e) {
       navigationFrame.SelectedPageIndex = navBarControl.Groups.IndexOf(e.Group);
   }
   

   VB.NET

   Private Sub navBarControl_ActiveGroupChanged(ByVal sender As Object, ByVal e As DevExpress.XtraNavBar.NavBarGroupEventArgs)
       navigationFrame.SelectedPageIndex = navBarControl.Groups.IndexOf(e.Group)
   End Sub
   

   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.