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

  • 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.

OfficeInspired - Sample App

  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.

    OfficeInspiredUI - New Solution Gallery

  2. In the DevExpress Template Gallery, select the "Blank Application" option and proceed to the next step.

    OfficeInspired - Project Templates

  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.

    ILA - Form Smarttag

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

    OfficeInspired - Form Templates

  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.

    OfficeInspired - Ex2 - Template Runtime

    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.

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

    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.

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

    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.

See Also