A newer version of this page is available. Switch to the current version.

Getting Started

  • 3 minutes to read

This tutorial describes how to create a simple spreadsheet application with a ribbon interface and adjust its appearance.

Create a Spreadsheet Application

  1. Start Visual Studio and create a new Windows Forms Application project.
  2. Drop the SpreadsheetControl item from the DX.18.2: Spreadsheet toolbox tab onto the form.

    SpreadsheetControl_DropFromToolbox

  3. Click the SpreadsheetControl’s smart tag and select Dock in Parent Container in the invoked SpreadsheetControl Tasks menu. This allows the SpreadsheetControl to expand to the form’s size.

    SpreadsheetControl_Dock

  4. Select Create FormulaBar in the SpreadsheetControl Tasks menu. This automatically adds the SpreadsheetFormulaBar control to the form and binds it to the SpreadsheetControl.

    SpreadsheetControl_CreateFormulaBar

Create Ribbon Pages

At Design Time

  1. Select Create Ribbon in the SpreadsheetControl Tasks menu to add a RibbonControl to the spreadsheet.

    SpreadsheetControl_CreateRibbon

  2. Add necessary ribbon pages from the SpreadsheetControl Tasks menu or click Create All Bars to add all available spreadsheet ribbon pages at once. You can customize the created ribbon afterward by changing the ribbon style, adding new ribbon elements, modifying or removing the existing items.

    SpreadsheetControl_CreateAllBars

  3. Click the RibbonControl’s smart tag and select Convert To Ribbon Form in the invoked RibbonControl Tasks menu to convert the application form to a Ribbon Form.

    SpreadsheetControl_ConvertToRibbonForm

In Code

Use the CreateRibbon method overloads to add a ribbon to the SpreadsheetControl at runtime.


using DevExpress.XtraBars.Ribbon;
using DevExpress.XtraSpreadsheet;
// ...

public Form1()
{
    InitializeComponent();

    // Create all spreadsheet ribbon tabs.
    RibbonControl ribbon = spreadsheetControl1.CreateRibbon(SpreadsheetToolbarType.All);
    this.Controls.Add(ribbon);
}

Run the spreadsheet application to view the result. For example, load a workbook, enter cell values, create formulas, apply cell formatting, and explore various ribbon items.

SpreadsheetControl_GettingStarted_Result

NOTE

Commands executed via the ribbon user interface can throw unhandled exceptions if a problem occurs. For instance, when a document is being saved to a locked or read-only file. To prevent an application from failing, subscribe to the SpreadsheetControl.UnhandledException event and set the SpreadsheetUnhandledExceptionEventArgs.Handled property to true.

Change the Application’s Appearance

  • Change the application’s skin

    At design time

    In code

    Invoke the DevExpress Project Settings page and select a desired skin in the Skin Options group.

    Spreadsheet_GettingStarted_DevExpressProjectSettings

    Call the UserLookAndFeel.Default static object’s UserLookAndFeel.SetSkinStyle method:

    
    using DevExpress.LookAndFeel;
    // ...
    UserLookAndFeel.Default.SetSkinStyle("Office 2019 Colorful", "Forest");
    
  • Change the SpreadsheetControl’s skin

    Use the SpreadsheetControl.LookAndFeel property to access an object specifying the control’s look and feel settings.

    
    spreadsheetControl1.LookAndFeel.UseDefaultLookAndFeel = false;
    spreadsheetControl1.LookAndFeel.SkinName = "Office 2016 Colorful";
    
  • Use bitmap or vector icons

    The spreadsheet application uses vector icons by default, which ensures that the application is rendered correctly on high-DPI devices.

    Set the static WindowsFormsSettings.AllowDefaultSvgImages property to DefaultBoolean.False at the application’s startup to make your application use bitmap icons in the GUI.

    
    static void Main() {
        DevExpress.XtraEditors.WindowsFormsSettings.AllowDefaultSvgImages = DevExpress.Utils.DefaultBoolean.False;
        // ... 
    }
    

    The following images illustrate the standard Spreadsheet’s ribbon UI with default vector and bitmap icons:

    • SVG Icons

    Spreadsheet_GettingStarted_SVGRibbonIcons

    • Bitmap Icons

    Spreadsheet_GettingStarted_BitmapRibbonIcons

See Also