Spread.Services Documentation
Work with Shape And Picture
Spread.Services Documentation > Developer's Guide > Customize User Interaction > Manage Worksheet > Work with Shape And Picture

Spread.Services allows users to insert and customize shapes and pictures on cells of a worksheet. You can work with shape and picture by accessing the properties and methods of the IShape interface and the IShapes interface.

This topic includes the following tasks:

  1. Create different shape types
  2. Customize shape format and shape text

Connector

A connector is used when you need to connect or disconnect two general shapes. In Spread.Services, you can use the BeginConnect methodEndConnect methodBeginDisconnect method and EndDisconnect method of the IConnectorFormat interface to attach and detach the ends of the connector to other shapes.

Refer to the following example code to connect general shapes using the connector format.

C#
Copy Code
// To config the connector shape.
IShape shapeBegin = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, 1, 1, 100, 100);
IShape endBegin = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, 200, 200, 100, 100);
IShape connectorShape = worksheet.Shapes.AddConnector(ConnectorType.Straight, 1, 1, 101, 101);
connectorShape.Width = 10;
// To detach the ends of the connector to other shapes.
connectorShape.ConnectorFormat.BeginConnect(shapeBegin, 3);
connectorShape.ConnectorFormat.EndConnect(endBegin, 0);

Note: One of the limitations of using connector format is that you can add a connector to connect two general shapes and export it but the connector will be shown only after you drag the shape to your spreadsheet.

Shape

A shape is a drawing object and a member of the Shapes collection. In Spread.Services, the Shapes collection represents the collection of shapes in a specified worksheet. All the drawing objects including chart, comment, picture, slicer, general shape and shape group are defined as Shape.

Picture

You can insert pictures on cells of a spreadsheet by using the AddPicture method of the IShapes interface. The IPictureFormat interface in Spread.Services allows users to customize and format pictures while working in a spreadsheet.

Refer to the following example code when working with picture in Spread.Services:

C#
Copy Code
// Add a picture
IShape picture = worksheet.Shapes.AddPicture(@"Images\flower.jpg", 480, 10, 100, 100);
// Fill the inserted picture
picture.Fill.Solid();
picture.Fill.Color.RGB = Color.AliceBlue;
//Customize the inserted picture
picture.PictureFormat.Crop.PictureWidth = 80;

Shape Format

In Spread.Services, you can customize the shape format in three different ways. This includes setting the fill format for the inserted shape using the properties and methods of the IFillFormat interface, configuring the shape's line using the properties and methods of the ILineFormat interface and applying 3D formatting to the shape using the properties and methods of the IThreeDFormat interface.

Solid Fill

To format the shape with Solid fill, first you need to use the Solid method of the IFillFormat interface to specify the fill format and then set the Color Property property and Transparency property to set the shape's fill color and transparency degree respectively.

Refer to the following example code to fill the shape with solid fill.

C#
Copy Code
//Solid Fill
IShape shape = worksheet.Shapes.AddShape(AutoShapeType.Balloon, 10, 10, 100, 100);
IColorFormat color = shape.Fill.Color;
color.RGB = Color.Red;
shape.Fill.Solid();

Gradient Fill

In gradient fill, you first need to set the shape fill to the gradient fill using the OneColorGradient methodTwoColorGradient method or PresetGradient method of the IFillFormat interface. When you're done, you can then insert, delete or modify gradient stops; set the fill style rotation along with the shape and the angle of the gradient fill using the GradientStops propertyRotateWithObject property and GradientAngle property of the IFillFormat interface.

Refer to the following example code to fill the shape with gradient fill.

C#
Copy Code
//Gradient Fill
IShape shape1 = worksheet.Shapes.AddShape(AutoShapeType.Heart, 120, 10, 100, 100);
shape1.Fill.PresetGradient(GradientStyle.Vertical, 3, PresetGradientType.Silver);
shape1.Fill.RotateWithObject = false;

Pattern Fill

In pattern fill, you first need to set the shape fill to pattern fill using the Patterned method of the IFillFormat interface. Afterwards, you can set the background color and the pattern color using Color property and PatternColor property of the IFillFormat interface.

Refer to the following example code to fill the shape with pattern fill.

C#
Copy Code
//Pattern Fill
IShape shape2 = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, 240, 10, 100, 100);
shape2.Fill.Patterned(GrapeCity.Documents.Spread.Drawing.PatternType.Percent10);
shape2.Fill.Color.ObjectThemeColor = ThemeColor.Accent2;
shape2.Fill.PatternColor.ObjectThemeColor = ThemeColor.Accent6;

Picture Fill

In picture fill, you can use the AddShape method of the IShapes interface to first add the shape that you want to fill with a picture. Further, you can also set the picture format including characteristics like picture height, picture width, brightness, contrast ratio, re-coloring, x-axis and y-axis offset etc using the properties of the IPictureFormat interface.

Refer to the following example code to fill the shape with picture.

C#
Copy Code
// Add shape of picture type
IShape shape = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, 20, 20, 100, 100);
string path = @"Images\flower.jpg";
FileStream stream = System.IO.File.Open(path, FileMode.Open);
shape.Fill.UserPicture(stream, ImageType.JPG);
stream.Dispose();
// Recolor the picture
shape.PictureFormat.ColorType = PictureColorType.Grayscale;
// Set picture's brightness and contrast ratio.
shape.PictureFormat.Brightness = 0.6;
shape.PictureFormat.Contrast = 0.3;
// Set height, width, x-axis offset and y-axis offset of the specified picture.
shape.PictureFormat.Crop.PictureOffsetX = 10;
shape.PictureFormat.Crop.PictureOffsetY = -5;
shape.PictureFormat.Crop.PictureWidth = 120;
shape.PictureFormat.Crop.PictureHeight = 80;

Texture Fill

In texture fill, you can fill the shape with texture using the PresetTextured method, or UserTextured method of the IFillFormat interface. Further, you can also use the TextureAlignment propertyTextureHorizontalScale propertyTextureOffsetX propertyTextureOffsetY property and TextureVerticalScale property to configure the layout of the texture.

Refer to the following example code to fill the shape with texture fill.

C#
Copy Code
//Texture Fill
IShape shape3 = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, 360, 10, 100, 100);
shape3.Fill.PresetTextured(PresetTexture.Canvas);
shape3.Fill.TextureAlignment = TextureAlignment.Center;
shape3.Fill.TextureOffsetX = 2.5;
shape3.Fill.TextureOffsetY = 3.2;
shape3.Fill.TextureHorizontalScale = 0.9;
shape3.Fill.TextureVerticalScale = 0.2;
shape3.Fill.Transparency = 0.5;

Line

Line is a kind of border around the shape. You can create lines around shapes inserted on cells of a spreadsheet using the properties and methods of ILineFormat interface.

Refer to the following example code to configure the line and line style for the shape.

C#
Copy Code
// To set shape's line style.
IShape shape = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, 10, 10, 100, 100);
shape.Line.DashStyle = LineDashStyle.Dash;
shape.Line.Style = LineStyle.Single;
shape.Line.Weight = 2;
shape.Line.Color.ObjectThemeColor = ThemeColor.Accent6;
shape.Line.Transparency = 0.3;

Shape's Line also supports solid fill, gradient fill and pattern fill and its usage is similar to the Shape Fill.

3D Formatting

Spread.Services allows you to format the three-dimensional layout for the inserted shape by setting its rotation degree around x,y and z axis.

Refer to the following example code to apply 3D formatting to the embedded shape.

C#
Copy Code
// To set shape's rotation degree arround x, y, z axis.
IShape shape = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, 50, 10, 100, 100);
shape.ThreeD.RotationX = 50;
shape.ThreeD.RotationY = 20;
shape.ThreeD.RotationZ = 30;
shape.ThreeD.Depth = 7;
shape.ThreeD.Z = 20;

Shape Text

In Spread.Services, you can configure the text and text style for the shape as per your own preferences by using the TextFrame property of the IShape interface.

Refer to the following example code to configure the text and text style for the inserted shape.

C#
Copy Code
// To config shape's text and text style.
IShape shape = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, 40, 40, 100, 100);
shape.TextFrame.TextRange.Font.Color.RGB = GrapeCity.Documents.Spread.Color.FromRGB(0, 255, 0);
shape.TextFrame.TextRange.Font.Bold = true;
shape.TextFrame.TextRange.Font.Italic = true;
shape.TextFrame.TextRange.Font.Size = 20;
shape.TextFrame.TextRange.Font.Strikethrough = true;

shape.TextFrame.TextRange.Paragraphs.Add("This is a rectangle shape.");
shape.TextFrame.TextRange.Paragraphs.Add("My name is Spread.");
shape.TextFrame.TextRange.Paragraphs[1].Runs.Add("Hello World!");

shape.TextFrame.TextRange.Paragraphs[1].Runs[0].Font.Strikethrough = false;
shape.TextFrame.TextRange.Paragraphs[1].Runs[0].Font.Size = 35;

See Also