Skip to content

Documentation(1028373): Update the Overview and Getting started in UWP SfSpreadsheet UG #2982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RajClinton26 wants to merge 2 commits into
base: hotfix/hotfix-v33.2.3
Choose a base branch
from
Open

Documentation(1028373): Update the Overview and Getting started in UWP SfSpreadsheet UG #2982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d7f6d7
UWP-1028373-HF - updated the over view and getting started of UWP spr…
RajClinton26 May 21, 2026
5b43e66
UWP-1028373-HF - updated the UG
RajClinton26 May 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions Document-Processing-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5767,9 +5767,12 @@
<li>
<a href="/document-processing/excel/spreadsheet/uwp/overview">UWP</a>
<ul>
<li><a href="/document-processing/excel/spreadsheet/uwp/overview">Overview</a></li>
<li><a href="/document-processing/excel/spreadsheet/uwp/getting-started">Getting Started</a></li>
<li><a href="/document-processing/excel/spreadsheet/uwp/working-with-sfspreadsheet">Working With Spreadsheet</a></li>
<li><a href="/document-processing/excel/spreadsheet/uwp/working-with-sfspreadsheet">Working With Spreadsheet</a>
<ul>
<li><a href="/document-processing/excel/spreadsheet/uwp/Workbook-Operations">Workbook Operations</a></li>
</ul>
</li>
<li><a href="/document-processing/excel/spreadsheet/uwp/selection">Selection</a></li>
<li><a href="/document-processing/excel/spreadsheet/uwp/Editing">Editing</a></li>
<li><a href="/document-processing/excel/spreadsheet/uwp/formatting">Formatting</a></li>
Expand Down
227 changes: 82 additions & 145 deletions Document-Processing/Excel/Spreadsheet/UWP/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,33 @@ documentation: ug

# Getting Started with UWP Spreadsheet (SfSpreadsheet)

This section helps you to get started with the SfSpreadsheet
This section briefly explains how to include the Syncfusion<sup>®</sup> UWP SfSpreadsheet component in UWP App using Visual Studio

## Prerequisites
* [System requirements for UWP components](https://help.syncfusion.com/uwp/system-requirements)

## Create a new UWP App in Visual Studio

You can create a **Spreadsheet UWP Application** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-uwp?view=visualstudio&tabs=vs-2022-17-10) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> UWP](https://help.syncfusion.com/uwp/visual-studio-integration/create-project).

## Assemblies Deployment

{% tabcontents %}

{% tabcontent Via NuGet Package %}

### Install Syncfusion<sup style="font-size:70%">&reg;</sup> UWP SfSpreadsheet NuGet in the App (Recommended)

To add **UWP SfSpreadsheet** 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](https://www.nuget.org/packages/Syncfusion.SfSpreadsheet.UWP)

{% endtabcontent %}

{% tabcontent Via Dependencies %}

### Add Dependencies

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

<table>
Expand Down Expand Up @@ -74,21 +97,27 @@ Syncfusion.SfChart.UWP.dll</td><td>
Contains the classes which is responsible for importing charts like Line charts, Pie charts, Sparklines etc.</td></tr>
</table>

{% endtabcontent %}

{% endtabcontents %}

## Create a Simple Application with SfSpreadsheet
## Add UWP SfSpreadsheet component

SfSpreadsheet control can be added into the application either via designer or via coding.

{% tabcontents %}

{% tabcontent Via Designer %}

### Adding a Control via Designer

1.Create new UWP application in Visual Studio.
1.Click and open the MainPage.Xaml file.

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

![Getting-Started_img1](Getting-Started_images/Getting-Started_img1.jpg)

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

_For_ _Spreadsheet:_

Expand All @@ -100,6 +129,8 @@ _For_ _Spreadsheet:_
{% endhighlight %}
{% endtabs %}

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.

5.To make an interaction between Ribbon items and SfSpreadsheet, need to bind the `SfSpreadsheet` as DataContext to the `SfSpreadsheetRibbon`.
Expand All @@ -114,187 +145,93 @@ _For_ _Ribbon:_
{% endhighlight %}
{% endtabs %}


### Adding Control Via Coding

Spreadsheet is available in the following namespace “_Syncfusion_._UI_._Xaml_._Spreadsheet_” and it can be created programmatically either by using XAML or C# code.
6.Align the SfSpreadsheet and SfSpreadsheetRibbon components using Row Definition.

{% tabs %}

{% highlight xaml %}

<Page
x:Class="SfSpreadsheetDemo.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SfSpreadsheetDemo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:tools="using:Syncfusion.UI.Xaml.Controls.Navigation"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Spreadsheet"
mc:Ignorable="d">

<syncfusion:SfSpreadsheet x:Name="spreadsheet" FormulaBarVisibility="Visible" />
</Page>
<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" />

{% endhighlight %}
{% endtabs %}

{% highlight c# %}

SfSpreadsheet spreadsheet = new SfSpreadsheet();
this.grid.Children.Add(spreadsheet);

{% endhighlight %}
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application.

{% endtabs %}
{% endtabcontent %}

_You_ _can_ _get_ _the_ _following_ _output_ _when_ _execute_ _the_ _application._
{% tabcontent Via Coding %}

![Getting-Started_img2](Getting-Started_images/Getting-Started_img2.jpg)
### Adding Control Via Coding

N> To load the SfSpreadsheet in Windows Mobile, add the below code in MainPage.xaml file in DeviceFamily-Mobile folder.
Spreadsheet is available in the following namespace “_Syncfusion_._UI_._Xaml_._Spreadsheet_” and it can be created programmatically either by using XAML or C# code.

{% tabs %}

{% highlight xaml %}

<Page
x:Class="SfSpreadsheetDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SfSpreadsheetDemo"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:tools="using:Syncfusion.UI.Xaml.Controls.Navigation"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Spreadsheet"

mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Syncfusion:SfSpreadsheetRibbon DataContext="{Binding ElementName=spreadsheet}">
<Syncfusion:SfSpreadsheetRibbon.Content>
<Syncfusion:SfSpreadsheet x:Name="spreadsheet"/>
</Syncfusion:SfSpreadsheetRibbon.Content>
</Syncfusion:SfSpreadsheetRibbon>
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>

{% endhighlight %}
{% endtabs %}


## Creating a new Excel Workbook

A new workbook can be created by using a `Create` method with specified number of worksheets. By default, a workbook will be created with single worksheet.

{% tabs %}
{% highlight c# %}

spreadsheet.Create(2);
Grid grid = new Grid();

{% endhighlight %}
{% endtabs %}

## Opening an existing Excel Workbook

The Excel Workbook can be opened in SfSpreadsheet using the `Open` method in various ways,

{% tabs %}
{% highlight c# %}

//Using Stream,
spreadsheet.Open (Stream file)

//Using StorageFile,
spreadsheet.Open (StorageFile file)

//Using Workbook,
spreadsheet.Open(IWorkbook workbook)

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

{% tabs %}
{% highlight c# %}

Stream fileStream = typeof(MainPage).GetTypeInfo().Assembly.GetManifestResourceStream("SfSpreadsheetDemo.Assets.BidDetails.xlsx");
this.spreadsheet.Open(fileStream);

{% endhighlight %}
{% endtabs %}

![Getting-Started_img4](Getting-Started_images/Getting-Started_img4.jpg)


## Saving the Excel Workbook
SfSpreadsheet spreadsheet = new SfSpreadsheet();
SfSpreadsheetRibbon ribbon = new SfSpreadsheetRibbon() { SfSpreadsheet = spreadsheet };

The Excel workbook can be saved in SfSpreadsheet using `Save` method. If the workbook already exists in the system drive, it will be saved in the same location, otherwise Save Dialog box opens to save the workbook in user specified location.
Grid.SetRow(ribbon, 0);
Grid.SetRow(spreadsheet, 1);

{% tabs %}
{% highlight c# %}
grid.Children.Add(ribbon);
grid.Children.Add(spreadsheet);

spreadsheet.Save();
this.Content = grid;

{% endhighlight %}
{% endtabs %}

You can also use `SaveAs` method directly to save the existing excel file with modifications.

The `SaveAs` method in SfSpreadsheet can be used in various ways,

{% tabs %}
{% highlight c# %}

//Using Storage File,
spreadsheet.SaveAs (StorageFile file);

//Using String,
spreadsheet.SaveAs (string file);

//For Dialog box,
spreadsheet.SaveAs();

{% endhighlight %}
{% endtabs %}

## Displaying Charts and Sparklines
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application.

For importing charts and sparklines in SfSpreadsheet, add the following assembly as reference into the application.

Assembly: **Syncfusion.SfSpreadsheetHelper.UWP.dll**
N> To load the SfSpreadsheet in Windows Mobile, add the above code in MainPage.xaml file in DeviceFamily-Mobile folder.

### Charts

Create an instance of `Syncfusion.UI.Xaml.SpreadsheetHelper.GraphicChartCellRenderer` and add that renderer into `GraphicCellRenderers` collection by using the helper method `AddGraphicChartCellRenderer` which is available under the namespace `Syncfusion.UI.Xaml.Spreadsheet.GraphicCells`.
{% endtabcontent %}

{% tabs %}
{% highlight c# %}
{% endtabcontents %}

public MainWindow()
{
InitializeComponent();

//For importing charts,
this.spreadsheet.AddGraphicChartCellRenderer(new GraphicChartCellRenderer());
}

{% endhighlight %}
{% endtabs %}

### Sparklines

Create an instance of `Syncfusion.UI.Xaml.SpreadsheetHelper.SparklineCellRenderer` and add that renderer into the Spreadsheet by using the helper method `AddSparklineCellRenderer` which is available under the namespace `Syncfusion.UI.Xaml.Spreadsheet.GraphicCells`.
_You_ _can_ _get_ _the_ _following_ _output_ _when_ _execute_ _the_ _application._

{% tabs %}
{% highlight c# %}
![Getting-Started_img2](Getting-Started_images/Getting-Started_img2.jpg)

public MainWindow()
{
InitializeComponent();

//For importing sparklines,
this.spreadsheet.AddSparklineCellRenderer(new SparklineCellRenderer());
}
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/uwp-spreadsheet-examples).

{% endhighlight %}
{% endtabs %}
## See Also
- [Workbook operations such as creating, opening, and saving a workbook](Workbook-Operations)
Binary file removed ...rocessing/Excel/Spreadsheet/UWP/Getting-Started_images/Getting-Started_img2.jpg
View file
Open in desktop
Binary file not shown.
Binary file added ...rocessing/Excel/Spreadsheet/UWP/Getting-Started_images/Getting-Started_img2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading