Create a Simple Spreadsheet Application

• Jan 11, 2022
• 5 minutes to read

This document describes how to use the WPF Spreadsheet control to create a simple spreadsheet application.

Install the WPF Spreadsheet Component

You can use one of the following approaches to add the WPF Spreadsheet control to the toolbox:

Use the Unified Component Installer

The Unifier Component Installer allows you to install a trial or registered version of DevExpress .NET Framework, .NET Core 3, and .NET 5 components and libraries. Refer to the following topic for information on how to use the installer: Download the Unified Component Installer.

Use a NuGet Feed

If you use a NuGet feed instead of the Unified Component Installer to add the DevExpress products, the toolbox does not contain DevExpress controls until you add the required NuGet package.

Refer to the following section for instructions on how to obtain and install NuGet packages that contain DevExpress products for .NET Framework, .NET Core, and .NET 5: Install DevExpress Controls Using NuGet Packages.

After you access DevExpress NuGet packages and register the DevExpress NuGet feed, install the DevExpress.Wpf.Spreadsheet NuGet package as follows: go to Tools | NuGet Package Manager | Manage NuGet Packages for Solution, select the DevExpress NuGet feed as a package source, and install the DevExpress.Wpf.Spreadsheet NuGet package to add the Spreadsheet control to the toolbox.

Create a New Spreadsheet Application

Create a new WPF Application and open the MainWindow.xaml file in the Visual Studio Designer.

Drag the SpreadsheetControl item from the DX.21.2: Spreadsheet toolbox tab onto the canvas.

Reset the Spreadsheet control’s layout to fill the entire window. Right-click the control and select Layout | Reset All in the context menu.

After this, your XAML appears as follows:

XAML

<Window x:Class="WpfSpreadsheet.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxsps="http://schemas.devexpress.com/winfx/2008/xaml/spreadsheet" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxsps:SpreadsheetControl CommandBarStyle="Ribbon" 
                                  ShowFormulaBar="True" 
                                  ShowStatusBar="True"/>
    </Grid>
</Window>

If you create a .NET Framework application and do not install NuGet packages that contain DevExpress products, you can overwrite the MainWindow.xaml file with the code above to add the Spreadsheet control to your application. In this case, add references to the following libraries:

• DevExpress.Charts.v21.2.Core.dll
• DevExpress.Data.v21.2.dll
• DevExpress.DataVisualization.v21.2.Core.dll
• DevExpress.Images.v21.2.dll
• DevExpress.Data.Desktop.v21.2.dll
• DevExpress.Mvvm.v21.2.dll
• DevExpress.Office.v21.2.Core.dll
• DevExpress.Printing.v21.2.Core.dll
• DevExpress.Spreadsheet.v21.2.Core.dll
• DevExpress.TreeMap.v21.2.Core.dll
• DevExpress.Xpf.Charts.v21.2.dll
• DevExpress.Xpf.Core.v21.2.dll
• DevExpress.Xpf.Docking.v21.2.dll
• DevExpress.Xpf.NavBar.v21.2.dll
• DevExpress.Xpf.Office.v21.2.dll
• DevExpress.Xpf.Printing.v21.2.dll
• DevExpress.Xpf.Ribbon.v21.2.dll
• DevExpress.Xpf.Spreadsheet.v21.2.dll
• DevExpress.Xpf.TreeMap.21.2.dll
• DevExpress.Xpf.Themes.Office2019Colorful.v21.2.dll

To add references, right-click the Dependencies node in the Solution Explorer and select Add Project Reference… in the invoked context menu. Refer to the following article for a full list of required assemblies: Redistribution and Deployment.

Manage the Integrated Ribbon, Formula Bar, and Status Bar

The newly created WPF Spreadsheet application includes the integrated Ribbon UI, Formula Bar, and Status Bar. You can remove them in the following ways:

At Design Time

If you do not need the integrated Ribbon UI, Formula Bar, and Status Bar, select Empty from the CommandBarStyle drop-down list, and clear the ShowFormulaBar and ShowStatusBar checkboxes in the Quick Actions menu.

In XAML

To remove the integrated Ribbon UI, Formula Bar, and Status Bar in XAML, assign the SpreadsheetControl.CommandBarStyle property to CommandBarStyle.Empty, and set the SpreadsheetControl.ShowFormulaBar and SpreadsheetControl.ShowStatusBar properties to False or remove these properties from the markup.

XAML

    <Grid>
        <dxsps:SpreadsheetControl CommandBarStyle="Empty" 
                                  ShowFormulaBar="False" 
                                  ShowStatusBar="False" />
    </Grid>

Load a Document

Use the SpreadsheetControl.DocumentSource property to load a document into the Spreadsheet control. You can load documents from a stream, byte array, full file path, or URI. An empty document is created if the SpreadsheetControl.DocumentSource property is null.

The example below uses a pack URI as the document source. A workbook is added to the root of the project as a resource file.

XAML

<Grid>
    <dxsps:SpreadsheetControl CommandBarStyle="Ribbon"
                              ShowStatusBar="True"
                              ShowFormulaBar="True"
                              DocumentSource="pack://application:,,,/WpfSpreadsheet;component/Document.xlsx"/>
</Grid>

Change the Application’s Appearance

Click the Window’s Quick Actions and select the Convert to ThemedWindow task to convert the Window to a ThemedWindow.

Change the Application’s Theme

To apply the default Office2019Colorful theme to the WPF Spreadsheet application, deploy the DevExpress.Xpf.Themes.Office2019Colorful.v21.2.dll library to the client machine.

Alternatively, you can install a NuGet package that contains the required application theme (for example, DevExpress.Wpf.Themes.Office2019White). To access all available themes, install the DevExpress.Wpf.Themes.All NuGet package.

Refer to this topic for a list of available DevExpress WPF Themes: Theme List

Do one of the following to apply a different theme to your application:

• Invoke the main window’s Quick Actions, and select a theme from the Application Theme drop-down menu.

  

• In code, set the ApplicationThemeHelper.ApplicationThemeName property to a theme name at the application’s startup:

  C#

  public partial class App : Application {
      protected override void OnStartup(StartupEventArgs e) {
          DevExpress.Xpf.Core.ApplicationThemeHelper.ApplicationThemeName = "Office2019White";
          base.OnStartup(e);
      }
  }
  

  VB.NET

  Class Application
      Protected Overrides Sub OnStartup(e As StartupEventArgs)
          DevExpress.Xpf.Core.ApplicationThemeHelper.ApplicationThemeName = "Office2019White"
          MyBase.OnStartup(e)
      End Sub
  End Class
  

• Use the ThemeManager.ThemeName property to apply a theme to the SpreadsheetControl’s container (for example, window):

  XAML

  <dx:ThemedWindow ...
      xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
      dx:ThemeManager.ThemeName="Office2019White">
      ...
  </dx:ThemedWindow>
  

Use Bitmap or Vector Icons

The WPF Spreadsheet application with an integrated ribbon uses vector icons to ensure the application is rendered correctly on high-DPI devices.

Set the static ApplicationThemeHelper.UseDefaultSvgImages property to false at application startup to use bitmap icons instead:

C#

using System.Windows;
using DevExpress.Xpf.Core;

public partial class App : Application {
    protected override void OnStartup(StartupEventArgs e) {
        ApplicationThemeHelper.UseDefaultSvgImages = false;
        base.OnStartup(e);
    }
}

VB.NET

Imports System.Windows
Imports DevExpress.Xpf.Core

Public Partial Class App
    Inherits Application
    Protected Overrides Sub OnStartup(e As StartupEventArgs)
        ApplicationThemeHelper.UseDefaultSvgImages = False
        MyBase.OnStartup(e)
    End Sub
End Class

Use the SpreadsheetControl.UseDefaultSvgImages property to disable SVG icons in the Spreadsheet control’s UI only. This option has priority over the ApplicationThemeHelper.UseDefaultSvgImages property.

XAML

<dxsps:SpreadsheetControl CommandBarStyle="Ribbon" UseDefaultSvgImages ="False" ShowFormulaBar="True"/>

The following images illustrate the standard WPF Spreadsheet‘s ribbon UI with default vector and bitmap icons.

• SVG Icons

• Bitmap Icons