Syncfusion AI Assistant

How can I help you?

Getting Started with UWP Spreadsheet (SfSpreadsheet)

29 May 20268 minutes to read

This section briefly explains how to include the Syncfusion® UWP Spreadsheet component in UWP App using Visual Studio

Prerequisites

Create a new UWP App in Visual Studio

You can create a UWP Application using Visual Studio via Microsoft Templates or the Syncfusion® UWP.

Assemblies Deployment

You can add a UWP spreadsheet component to your application by installing it via NuGet packages (recommended) or by manually adding the required assemblies to the project.

Install Syncfusion® UWP Spreadsheet NuGet Package

To add UWP Spreadsheet component in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install:

• Syncfusion.SfSpreadsheet.UWP

Add Syncfusion® UWP Spreadsheet Assemblies

Below table describes, list of assemblies required to be added in project when the UWP Spreadsheet control is used in your application.

Assembly Description
Syncfusion.SfCellGrid.UWP.dll Contains the base and fundamental classes which hold the underlying architecture for displaying cells with virtualized behavior and selection/interaction of cells.
Syncfusion.SfGridCommon.UWP.dll Covers the classes which hold the properties of scroll viewer and disposable elements
Syncfusion.SfSpreadsheet.UWP.dll Contains the classes that handle all the UI Operations of SfSpreadsheet such as importing of sheets, applying formulas/styles etc.
Syncfusion.SfShared.UWP.dll Contains the classes which hold the properties and operations of the controls like SfUpDown, SfNavigator, Looping control etc
Syncfusion.SfInput.UWP.dll Contains the classes which hold the controls like SfDropDownButton, SfTextBoxExt,SfMaskedEdit etc.
Syncfusion.SfRibbon.UWP.dll Covers the classes which hold the Ribbon controls such as SfRibbon, SfRibbonMenu, SfRibbonGalleryItem etc.
Syncfusion.SfTabControl.UWP.dll Covers the classes which hold the controls like SfTabControl, SfTabItem etc
Syncfusion.XlsIO.UWP.dll Contains the base classes which are responsible for reading and writing in Excel files, Worksheet Manipulations, Formula calculations etc.

Below are the assemblies list that can be added when you want to enable certain features in SfSpreadsheet control.

Optional Assemblies Description
Syncfusion.SfSpreadsheetHelper.UWP.dll Contains the classes which are responsible for importing charts and sparklines into SfSpreadsheet
Syncfusion.ExcelChartToImageConverter.UWP.dll Contains the classes which are responsible for converting charts as image
Syncfusion.SfChart.UWP.dll Contains the classes which are responsible for importing charts like Line charts, Pie charts, Sparklines etc.

Add UWP Spreadsheet component

UWP Spreadsheet control can be added to an application either through the designer (XAML) or programmatically using code.

1.Click and open the MainPage.xaml file.

2.Open the Visual Studio Tool box. Navigate to “Syncfusion® Controls for UWP” tab and find the SfSpreadsheet/SfSpreadsheetRibbon toolbox items.

Getting-Started_img1

3.Drag SfSpreadsheet and drop in to the Designer area from the Toolbox.

For Spreadsheet:

<Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:YourNamespace"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Spreadsheet="using:Syncfusion.UI.Xaml.Spreadsheet"
        x:Class="YourNamespace.MainPage"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid>
            <Spreadsheet:SfSpreadsheet  x:Name="spreadsheet" />
        </Grid>
    </Page>

NOTE

Declare a name for the Spreadsheet component as shown above for reference.

4.Ribbon can be added to the application by dragging and dropping SfSpreadsheetRibbon to the Designer area.

For Ribbon:

<Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:YourNamespace"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Spreadsheet="using:Syncfusion.UI.Xaml.Spreadsheet"
        x:Class="YourNamespace.MainPage"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid>
            <Spreadsheet:SfSpreadsheetRibbon />
        </Grid>
    </Page>

5.To make an interaction between Ribbon items and SfSpreadsheet, need to bind the SfSpreadsheet as DataContext to the SfSpreadsheetRibbon.

<Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:YourNamespace"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Spreadsheet="using:Syncfusion.UI.Xaml.Spreadsheet"
        x:Class="YourNamespace.MainPage"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid>
            <Spreadsheet:SfSpreadsheet  x:Name="spreadsheet" />
            <Spreadsheet:SfSpreadsheetRibbon DataContext="{Binding ElementName=spreadsheet}" />
        </Grid>
    </Page>

Spreadsheet is available in the following namespace Syncfusion.UI.Xaml.Spreadsheet and it can be created programmatically either by using XAML or C# code.

<Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Spreadsheet="using:Syncfusion.UI.Xaml.Spreadsheet"
        x:Class="App1.MainPage"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Spreadsheet:SfSpreadsheet Name="spreadsheet" Grid.Row="1" />
            <Spreadsheet:SfSpreadsheetRibbon DataContext="{Binding ElementName=spreadsheet}" Grid.Row="0" />
        </Grid>
    </Page>
....
using Syncfusion.UI.Xaml.Spreadsheet;
....

public MainPage()
{
    this.InitializeComponent();

    Grid grid = new Grid();

    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

    SfSpreadsheet spreadsheet = new SfSpreadsheet();
    SfSpreadsheetRibbon ribbon = new SfSpreadsheetRibbon() { SfSpreadsheet = spreadsheet };

    Grid.SetRow(ribbon, 0);
    Grid.SetRow(spreadsheet, 1);

    grid.Children.Add(ribbon);
    grid.Children.Add(spreadsheet);

    this.Content = grid;
}

NOTE

To load the SfSpreadsheet in Windows Mobile, add the above code in MainPage.xaml file in DeviceFamily-Mobile folder.

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The output will appear as follows:

Getting-Started_img2

To learn how to create, open, and save files in the UWP Spreadsheet Component, see Workbook Operations.

NOTE

View Sample in GitHub.

See Also