This section provides tutorials on simulating popular application UIs using DevExpress controls.

Windows 11 UI

A user interface inspired by Windows 11 and the latest Microsoft Office versions.

Office Inspired UI

User interfaces modeled after Microsoft Office applications like Word, Excel, PowerPoint, and Visio.

Building an Office-Style UI Manually

This tutorial demonstrates the manual construction of a typical Office-inspired UI. Alternatively, the DevExpress Template Gallery can be used for similar results.

1. Create a New Project: In Visual Studio, navigate to File | New | Project (or press CTRL+SHIFT+N). Choose the default Windows Forms Application template and confirm.
2. Add Navigation Controls: From the Visual Studio Toolbox, add NavigationFrame, NavigationBar, and OfficeNavigationBar controls to your form.
3. Arrange Controls: Position the controls on the form as desired.
4. Configure Navigation Bar: Use the smart tag of the NavigationBar control to switch its view to Navigation Pane View.
5. Set Group and Page Captions: Rename the automatically generated NavBarGroup and NavigationPage controls. Set their captions to "Employees" and "Customers". Assign these same strings to the Tag property of each corresponding page for later reference.

   // Assign captions and tags for navigation elements
   navigationPage1.Tag = navBarGroup1.Caption = navigationPage1.Caption = "Employees";
   navigationPage2.Tag = navBarGroup2.Caption = navigationPage2.Caption = "Customers";
   

6. Add Content to Pages: Select different pages within the NavigationFrame using its chevron buttons. Place a LabelControl on each page and customize its caption. These labels help identify the pages at runtime.
7. Clean Up Office Navigation Bar: Access the smart tag of the OfficeNavigationBar and remove the default "Item1" and "Item2" elements.
8. Bind Navigation Controls: Set the OfficeNavigationBar.NavigationClient property to your NavigationBar control. This links them, and the OfficeNavigationBar will now display elements corresponding to the NavigationBar groups. Clicking an element in the OfficeNavigationBar will activate the associated NavigationBar group.
9. Handle Group Change Event: Implement the NavBarControl.ActiveGroupChanged event handler. This code switches the NavigationFrame's selected page based on the Tag property of the page that matches the active group's caption.

   // Event handler to synchronize NavigationFrame page with NavBarGroup
   private void navBarControl1_ActiveGroupChanged(object sender, DevExpress.XtraNavBar.NavBarGroupEventArgs e) {
       navigationFrame1.SelectedPage = (NavigationPage)navigationFrame1.Pages.FindFirst(x => (string)x.Tag == e.Group.Caption);
   }
   

10. Runtime Testing: Run the application. Observe the default animation effects when swicthing pages.
11. Convert to Ribbon Form: At design time, invoke the form's smart tag (rebuilding the project might be necessary) and select "Convert to Ribbon Form". This transforms the main form in to a RibbonForm, adding RibbonControl and RibbonStatusBarControl components.
12. Add Ribbon Items: On the RibbonPageGroup, add a BarSubItem containing two BarButtonItem elements. These buttons will allow end-users to switch between the "Employees" and "Customers" NavigationFrame pages.
13. Implement Button Click Event: Handle the ItemClick event for the first BarButtonItem. This event handler will change the active NavigationBar group. Combined with the ActiveGroupChanged event, this also switches the NavigationFrame page.

    // Event handler to activate a specific NavBarGroup
    private void barButtonItem1_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
        navBarControl1.ActiveGroup = navBarControl1.Groups.First(x => x.Caption == e.Link.Caption);
    }
    

14. Configure Second Button: Select the second BarButtonItem. In the Visual Studio Properties window, locate the ItemClick event. Use the dropdown to assign the same event handler as the first button. Run the application and verify that both buttons correctly change the NavigationFrame pages.

Building an Office-Style UI with the DevExpress Template Gallery

1. Launch Template Gallery: In Visual Studio, go to File | New | Project (or CTRL+SHIFT+N) and select the DevExpress Template Gallery option.
2. Select Template: Choose the Blank Application template within the gallery and proceed.
3. Apply Predefined Form Template: The created project features a skinnable XtraForm and the Layout Assistant Extension. Open the form's smart tag menu and click Predefined Form Templates.
4. Choose Navigation Container: Select the Navigation Container template from the Office Inspired UI group and apply it.
5. Run and Explore: Launch the application. Test the UI, switch themes using the in-ribbon gallery, navigate between modules via the ribbon menu or bottom navigation control, and observe the frame switching animations.

Visual Studio Inspired UI

A layout mimicking Visual Studio, featuring a tabbed or MDI workspace, side panels, and a top menu bar.

Windows Modern UI

A flat, clean, and minimalist interface inspired by Windows Store applications.

Touch-Enabled Tile UI

Applications designed for touch input, often referred to as hybrid applications, should be optimized for touch interaction. This section outlines a common application pattern and highlights suitable DevExpress controls for creating such interfaces.

Fluent Design UI

User interfaces embracing Microsoft's Fluent Design System principles.