Shapes in WPF Spreadsheet (SfSpreadsheet)

23 Jul 20265 minutes to read

This section explains how to import charts, sparklines, pictures, and text boxes in SfSpreadsheet.

Charts

SfSpreadsheet provides support to import charts from Excel, which represent numeric data graphically to make it easier to understand large quantities of data.

For importing charts in SfSpreadsheet, add the following assembly as a reference in the application.

Assembly: Syncfusion.SfSpreadsheetHelper.WPF.dll

Create an instance of Syncfusion.UI.Xaml.SpreadsheetHelper.GraphicChartCellRenderer and add that renderer to the GraphicCellRenderers collection by using the helper method AddGraphicChartCellRenderer, which is available under the namespace Syncfusion.UI.Xaml.Spreadsheet.GraphicCells.

public MainWindow()
{
    InitializeComponent();

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

Adding the Charts at Runtime

For adding charts in SfSpreadsheet at runtime, use the AddChart method. You can also resize and reposition the chart.

var chart = spreadsheet.AddChart(spreadsheet.ActiveSheet);
object[] Y_values = new object[] { 200, 100, 100 };
object[] X_values = new object[] { "Total Income", "Expenses", "Profit" };
IChartSerie series = chart.Series.Add(ExcelChartType.Pie);

// Enter the X and Y values directly
series.EnteredDirectlyValues = Y_values;
series.EnteredDirectlyCategoryLabels = X_values;
var shape = chart as ShapeImpl;

// Reposition the chart
shape.Top = 200;
shape.Left = 200;

// Resize the chart
shape.Height = 300;
shape.Width = 300;

Sparklines

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

Assembly: Syncfusion.SfSpreadsheetHelper.WPF.dll

Create an instance of Syncfusion.UI.Xaml.SpreadsheetHelper.SparklineCellRenderer and add that renderer to the spreadsheet by using the helper method AddSparklineCellRenderer, which is available under the namespace Syncfusion.UI.Xaml.Spreadsheet.GraphicCells.

public MainWindow()
{
    InitializeComponent();

    // For importing sparklines
    this.spreadsheet.AddSparklineCellRenderer(new SparklineCellRenderer());
}

Pictures

SfSpreadsheet provides support to import images in SpreadsheetGrid. To add an image at runtime, use the AddImage method. You can also resize and reposition the image.

var worksheet = spreadsheet.ActiveSheet;
var stream = typeof(MainWindow).Assembly.GetManifestResourceStream("GraphicCellDemo.Data.Sample.jpg");
var shape = spreadsheet.AddImage(worksheet, new RowColumnIndex(5, 5), stream);

// Reposition the picture
shape.Top = 200;
shape.Left = 200;

 // Resize the picture
shape.Height = 200;
shape.Width = 200;

TextBoxes

SfSpreadsheet provides support to import RichTextBox content in SpreadsheetGrid. To add a rich text box at runtime, use the AddTextBox method. You can also resize and reposition the text box.

var rtfText = "{\\rtf1\\ansi\\ansicpg1252\\deff0\\deflang1033{\\fonttbl{\\f0\\fnil\\fcharset1 Calibri;}{\\f1\\fnil\\fcharset1 Calibri;}}{\\colortbl;\\red0\\green0\\blue0;\\red255\\green0\\blue0;}{\\f0\\fs22\\b\\cf1\\u83*\\u121*\\u110*\\u99*\\u102*\\u117*\\u115*\\u105*\\u111*\\u110*\\u32*\\b0}                           {\\f1\\fs22\\cf2\\u83*\\u111*\\u102*\\u116*\\u119*\\u97*\\u114*\\u101*\\u32*}{\\f1\\fs22\\cf1\\u80*\\u118*\\u116*\\u46*\\u32*\\u76*\\u116*\\u100*}}";
var textBox = spreadsheet.AddTextBox(spreadsheet.ActiveSheet, new RowColumnIndex(5, 5), new Size(200, 200), rtfText) as TextBoxShapeImpl;

// Reposition the RichTextBox
textBox.Left = 200;
textBox.Top = 200;

Accessing the selected Shapes

SfSpreadsheet allows the user to access the selected shapes and modify their properties within SpreadsheetGrid.

var selectedShape = spreadsheet.ActiveGrid.GraphicModel.SelectedShapes;

for(int i = 0; i < selectedShape.Count ; i++)
{

    if(ExcelShapeType.Chart == selectedShape[i].ShapeType)
    {
        var chart = selectedShape[i] as IChart;
        chart.ChartArea.Fill.FillType = ExcelFillType.Gradient;
        chart.ChartArea.Fill.ForeColor = Color.Blue;
    }

    else if(ExcelShapeType.Picture == selectedShape[i].ShapeType)
    {
        var picture = selectedShape[i] as ShapeImpl;
        picture.Height = 100;
        picture.Width = 100;
    }
}
spreadsheet.ActiveGrid.GraphicModel.InvalidateGraphicObjects();
spreadsheet.ActiveGrid.GraphicModel.InvalidateGraphicVisual();

Select a Shape Programmatically

Users can select a shape programmatically by using the AddSelectedShapes method of the GraphicModel class.

var shape = spreadsheet.ActiveSheet.Shapes[2] as ShapeImpl;
spreadsheet.ActiveGrid.GraphicModel.AddSelectedShapes(shape);

Clear a Selection

Users can clear the selection from the shapes and move the selection to the grid using ClearSelection method of GraphicModel class.

spreadsheet.ActiveGrid.GraphicModel.ClearSelection();

See Also