How to: Build an Office-inspired UI manually

• Oct 29, 2020
• 3 minutes to read

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 Visual Studio “Windows Forms Application” template and click OK.

   

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

   

3. Arrange the controls as illustrated below.

   

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

   

5. Change captions for automatically created NavBarGroup and NavigationPage controls to “Employees” and “Customers”. Assign the same text strings to the Tag property of both pages, as demonstrated in the code below.

   C#

   navigationPage1.Tag = navBarGroup1.Caption = navigationPage1.Caption = "Employees";
   navigationPage2.Tag = navBarGroup2.Caption = navigationPage2.Caption = "Customers";
   

   VB.NET

   navigationPage1.Caption = "Employees"
   navBarGroup1.Caption = "Employees"
   navigationPage1.Tag = "Employees"
   navigationPage2.Caption = "Customers"
   navBarGroup2.Caption = "Customers"
   navigationPage2.Tag = "Customers"
   

6. Click the Navigation Frame’s chevron buttons to select different pages and drop a LabelControl on each page, then customize label captions. At runtime, these labels will allow you to identify Navigation Frame pages.

   

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

   

8. Assign the Navigation Bar to the OfficeNavigationBar.NavigationClient property to bind both controls together. You will notice that the bar now has “Employees” and “Customers” elements based on existing Navigation Bar groups. Launch the app and click an element to see that the corresponding group is activated.

   

9. Handle the NavBarControl.ActiveGroupChanged event to switch the selected Frame page. The code below uses page tags to find the required page.

   C#

   private void navBarControl1_ActiveGroupChanged(object sender, DevExpress.XtraNavBar.NavBarGroupEventArgs e) {
       navigationFrame1.SelectedPage = (NavigationPage)navigationFrame1.Pages.FindFirst(x => (string)x.Tag == e.Group.Caption);
   }
   

   VB.NET

   Private Sub navBarControl1_ActiveGroupChanged(ByVal sender As Object, ByVal e As DevExpress.XtraNavBar.NavBarGroupEventArgs)
       navigationFrame1.SelectedPage = CType(navigationFrame1.Pages.FindFirst(Function(x) CStr(x.Tag) = e.Group.Caption), NavigationPage)
   End Sub
   

   Tip

   Review the Responding to User Clicks at Runtime article to learn about other ways to implement navigation using Navigation Bar.

10. Test your application at runtime. Note that, by default, animation effects are enabled.

    

11. Return to design time, invoke the form smart tag (you may need to rebuild the project and reload the form to see it) and click “Convert to Ribbon Form”. This will convert your main form to a Ribbon Form, which will add Ribbon and Ribbon Status Bar controls.

    

12. Add a BarSubItem with two child BarButtonItems to the Ribbon Page Group. End-users will be able to toggle between “Employees” and “Customers” Navigation Frame pages by clicking these buttons.

    

13. At design time, double-click the first button to create a BarItem.ItemClick event handler. The code sample below illustrates how to switch active Navigation Bar groups. Coupled with the previously handled NavBarControl.ActiveGroupChanged event, this button also changes Navigation Frame pages.

    C#

    private void barButtonItem1_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
        navBarControl1.ActiveGroup = navBarControl1.Groups.First(x => x.Caption == e.Link.Caption);
    }
    

    VB.NET

    Private Sub barButtonItem1_ItemClick(ByVal sender As Object, ByVal e As DevExpress.XtraBars.ItemClickEventArgs)
        navBarControl1.ActiveGroup = navBarControl1.Groups.First(Function(x) x.Caption = e.Link.Caption)
    End Sub
    

14. Select the second BarButtonItem and locate the ItemClick event in the Visual Studio Properties window. Use the combo box to choose the same event handler as for the first button, so that both sub-menu items are functional. Launch the application and make sure the Navigation Frame changes its pages correctly.