Lesson 1 - Create a Simple Spreadsheet

• Aug 03, 2020
• 4 minutes to read

This document provides step-by-step instructions on how to create a simple WPF Spreadsheet application and adjust its appearance.

This tutorial includes the following sections:

• Create a New Spreadsheet Application
• Remove the Integrated Ribbon and Formula Bar
• Change the Application’s Appearance

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 by dragging the SpreadsheetControl item from the DX.19.1: Spreadsheet Toolbox tab to the canvas.

   

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

4. After this, your XAML should appear 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"/>
       </Grid>
   </Window>
   

   You can add the SpreadsheetControl by overwriting your MainWindow.xaml file with this code without dragging the SpreadsheetControl control to the window. Note, however, that you will need to add references to the following libraries manually:

   • DevExpress.Data.v19.1.dll
   • DevExpress.Office.v19.1.Core.dll
   • DevExpress.Charts.v19.1.Core.dll
   • DevExpress.Spreadsheet.v19.1.Core.dll
   • DevExpress.Printing.v19.1.Core.dll
   • DevExpress.Mvvm.v19.1.dll
   • DevExpress.Xpf.Core.v19.1.dll
   • DevExpress.Images.v19.1.dll
   • DevExpress.Xpf.Charts.v19.1.dll
   • DevExpress.Xpf.NavBar.v19.1.dll
   • DevExpress.Xpf.Printing.v19.1.dll
   • DevExpress.Xpf.Ribbon.v19.1.dll
   • DevExpress.Xpf.Spreadsheet.v19.1.dll

   To add references, right-click References in the Solution Explorer and select Add Reference… in the invoked context menu. Refer to the Redistribution and Deployment article for a full list or required assemblies.

   

   Note

   Normally, when adding references to these assemblies, you can choose them from the Global Assembly Cache (GAC), but if you prefer to copy them locally - or need to include them later in your product installation - you can find copies in the following directory:

   C:\Program Files (x86)\DevExpress 19.1\Components\Bin\Framework\

5. Click the Window’s smart tag and select the Convert to ThemedWindow task to convert the Window to a ThemedWindow.

   

6. Load a document into the SpreadsheetControl. You can do this in XAML via the SpreadsheetControl.DocumentSource property. You can load documents from a stream, byte array or any other location specified by the full file path or URI. An empty document is created if the SpreadsheetControl.DocumentSource property is null.

   The following code snippet uses a pack URI as a document source to load a sample workbook that was added to the root of the current project as a resource file:

   XAML

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

   In this example, WpfSpreadsheet is the name of the WPF project and Document.xlsx is the loaded document.

7. Run the project. The image below shows the result.

   

Remove the Integrated Ribbon and Formula Bar

The newly created WPF Spreadsheet application has an integrated ribbon UI and a formula bar, which helps end-users view, enter, and edit formulas and cell data more efficiently. If you do not require these additional elements, you can remove the ribbon and/or formula bar by doing one of the following:

• Click the SpreadsheetControl’s smart tag. In the invoked menu, under Integrated Ribbon and Formula Bar, select Empty from the CommandBarStyle drop-down list and clear the ShowFormulaBar check box.

  

• In XAML, set the SpreadsheetControl.CommandBarStyle property to CommandBarStyle.Empty and the SpreadsheetControl.ShowFormulaBar property to false, or delete these properties from the markup.

Change the Application’s Appearance

Change the application’s theme

The WPF Spreadsheet control uses the Office2016White theme by default, so the DevExpress.Xpf.Themes.Office2016White.v19.1.dll library should be deployed to the client machine. Refer to the List of DevExpress WPF Themes topic for a list of available themes and corresponding assemblies.

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

• Click the ThemedWindow‘s smart tag, and select a desired theme from the ApplicationTheme drop-down menu.

• Set the required theme in code via the ApplicationThemeHelper.ApplicationThemeName property:

C#

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

VB.NET

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

• Apply a theme to the SpreadsheetControl’s container (e.g., window) using the ThemeManager.ThemeName property:

XAML

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

Use bitmap or vector icons

The WPF Spreadsheet application with an integrated ribbon uses vector icons by default, which ensures that the application is rendered correctly on high-DPI devices.

Set the static ApplicationThemeHelper.UseDefaultSvgImages property to false at application startup to use bitmap icons everywhere in your WPF application’s GUI:

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

If you need to disable SVG icons in the SpreadsheetControl’s UI only, use the SpreadsheetControl.UseDefaultSvgImages property. 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