[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Collapse]Spreadsheet
    Product Structure
   [Collapse]Getting Started
     Lesson 1 - Create a Simple Spreadsheet
     Lesson 2 - Create Separate Ribbon Pages for the Spreadsheet
     Lesson 3 - Create an Application using the Instant Layout Assistant (for VS 2015 and earlier)
     Lesson 4 - Customize the Integrated Ribbon UI for the Spreadsheet
     Lesson 5 - Customize the Spreadsheet Status Bar
   [Expand]Spreadsheet Document
    Supported Formats
   [Expand]Cell Basics
   [Expand]Formulas
    Defined Names
    Data Binding
    Data Validation
   [Expand]Data Presentation
   [Expand]Pivot Table Overview
   [Expand]Charts and Graphics
    Printing
    Events
    Protection
    Operation Restrictions
    Find and Replace
   [Expand]Mail Merge
   [Expand]Visual Elements
    Services
    Themes and Templates
   [Expand]Shortcuts
   [Expand]Examples
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 4 - Customize the Integrated Ribbon UI for the Spreadsheet

This example demonstrates how to use bar customization actions to add, modify or remove elements from the WPF Spreadsheet's integrated ribbon UI.

Note

A complete sample project is available in the DevExpress-Examples/how-to-customize-the-integrated-ribbon-for-the-wpf-spreadsheet-t511399 repository on GitHub.

This tutorial consists of the following sections:

Expanded Create a New Spreadsheet Application

  1. Create a new WPF Application project and open the MainWindow.xaml file in the Visual Studio Designer.
  2. Add the SpreadsheetControl object to your project. To do this, drag the SpreadsheetControl item from the DX.19.2: Spreadsheet Toolbox tab onto the canvas.

  3. Right-click the SpreadsheetControl object and select Layout | Reset All in the context menu to stretch the SpreadsheetControl to fit the window.

As a result, you have a ready-to-use spreadsheet application with an integrated ribbon that contains all the available spreadsheet ribbon pages.

Expanded Customize the Integrated Ribbon

Add the following namespace declarations to the MainWindow.xaml file:

To modify the SpreadsheetControl's integrated ribbon UI, add the necessary customization actions to the SpreadsheetControl.RibbonActions collection. The action's ElementName property specifies the name of the existing ribbon element you wish to change or remove. Element names are fields of the DevExpress.Xpf.Spreadsheet.DefaultBarItemNames class. You can easily deduce the required element name by following naming rules listed in the table below:

Ribbon Element

Element Type

Page Name

Group Name

Item Name

DefaultBarItemNames Field

Ribbon

Ribbon Control

RibbonControl

Page/Tab

RibbonPage

Home

RibbonPage_Home

Contextual Tab

RibbonCategory

ChartTools

RibbonCategory_ChartTools

Group

RibbonGroup

Home

Clipboard

RibbonGroup_Home_Clipboard

Item

RibbonItem

Home

Clipboard

Paste

RibbonItem_Home_Clipboard_Paste

Select the action you wish to perform:

Remove a Ribbon Element

To remove an element from the ribbon, add a RemoveAction with the required element's name to the SpreadsheetControl.RibbonActions collection.

The following code demonstrates how to remove a specific ribbon tab, group, and item:

Modify a Ribbon Element

To change an existing ribbon element, use an UpdateAction. Specify the element's name, its property you wish to modify and a new value that should be assigned to this property.

The example below demonstrates how to activate the Home tab on the ribbon and hide different ribbon elements.

Add a New Ribbon Element

To add a new element to the ribbon, add an InsertAction to the SpreadsheetControl.RibbonActions collection.

The following code snippet shows how to create a new Example ribbon tab with the Info group and add the About button to this group. The About button uses the BarItem.ItemClick event to display a custom message containing information about the current example. The code also adds the Comment button to the Insert tab and new Comments group and binds the button to the existing spreadsheet command which inserts a new comment.

Handle the About button's BarItem.ItemClick event as shown below.

Expanded Result

Run the project. The following image illustrates the result:

Expanded See Also

Is this topic helpful?​​​​​​​