Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (48)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (90)DocIO  (20)Essential JS 2  (68)Essential Studio  (162)File Formats  (18)Flutter  (102)JavaScript  (147)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (471)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (23)Windows Forms  (55)WinUI  (16)WPF  (119)Xamarin  (127)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (45)Development  (252)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (214)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (22)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (17)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (10)Tips and Tricks  (57)UI  (117)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (10)Web  (203)What's new  (124)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Add, Edit, and Delete Cloud Shapes in PDF Files with Ease in WPF

Add, Edit, and Delete Cloud Shapes in PDF Files with Ease in WPF

From the 2021 Essential Studio Volume 2 release, the WPF PDF Viewer comes with exciting support for drawing cloud shapes in PDF files. As per the PDF specification, cloud shapes are nothing but a polygon or rectangle annotation with a cloud border style. You can view, add, remove, and modify cloud shapes in PDF files interactively using the WPF PDF Viewer.

In this blog, we will look at the procedure to handle cloud shapes in PDF files using the WPF PDF Viewer.

A polygon with cloud border style in PDF file
A polygon with cloud border style

Getting started

First things first:

  1. Create a new WPF project and install the WPF PDF Viewer NuGet package.
  2. Then, include the following code in your XAML page to add the PDF Viewer as a child to the window.
    <Window x:Class="PdfViewer.MainWindow"
            xmlns:pdfviewer="clr-namespace:Syncfusion.Windows.PdfViewer;assembly=Syncfusion.PdfViewer.WPF">
        <pdfviewer:PdfViewerControl x:Name="pdfViewer"/>
    </Window>

Add cloud shapes from the UI

Using the PdfViewerControl, you can directly add cloud shapes by selecting the cloud from the shapes in the built-in toolbar.

Selecting cloud from the PDF Vewer WPF toolbar
Selecting cloud from the toolbar

Once the cloud is chosen from the toolbar, click on the page to start creating a cloud. Move the pointer where you want them and click to create each segment. To finish drawing the cloud, double-click to end the cloud shape. Later, you can select and move them to adjust their location, or resize the cloud using its segment connection points to adjust its size.

The following image illustrates the appearance of a selected cloud and its segment connected points.

Cloud in the selected state
Cloud in the selected state

Note: For complex cloud polygons, the cloud border-style appearance might differ from other PDF readers like Adobe.

Enable cloud-shape drawing mode programmatically

If you are using the PdfDocumentView control and need to switch to the cloud-shape drawing mode, you need to set the AnnotationMode to Polygon or Rectangle, and the BorderEffect settings to Cloudy.

Refer to the following code example to enable cloud-shape drawing mode.

public void EnableCloudDrawingMode()
{
   pdfViewer.AnnotationMode = PdfViewerAnnotationMode.Polygon;
   pdfViewer.PolygonAnnotationSettings.BorderEffect = BorderEffect.Cloudy;
}

Remove cloud shapes

You can remove a cloud annotation by selecting and right-clicking the cloud shape. Choose Delete from the context menu. You can also delete the selected annotation using the DELETE keyboard key.

Delete cloud annotation in PDF Viewer WPF
Delete cloud annotation

Customize the properties of cloud shapes

You can customize the shape appearance, such as its color, thickness, opacity, and border style, using the properties window of the annotation. You can also modify the subject and author information of the annotation. To do so, open the properties window by selecting and right-clicking on the cloud shape, then choose the Properties from the context menu.

Properties window
Properties window

Customize the default appearance

If you need to create cloud shapes with a customized appearance, you can customize the default appearance using the PolygonSettings of PDF Viewer.

Refer to the following code example to customize the default appearance of a cloud shape.

public void EnableDefaultCloudSettings()
{
    pdfViewer.AnnotationMode = PdfViewerAnnotationMode.Polygon;
    pdfViewer.PolygonAnnotationSettings.BorderEffect = BorderEffect.Cloudy;

    // Set the default appearance of the cloud.
    pdfViewer.PolygonAnnotationSettings.StrokeColor = Colors.Red;
    pdfViewer.PolygonAnnotationSettings.FillColor = Colors.White;
    pdfViewer.PolygonAnnotationSettings.Thickness = 2;
    pdfViewer.PolygonAnnotationSettings.Opacity = 0.5f;

}

The following image illustrates the customized appearance of a cloud shape.

The customized appearance of cloud
The customized appearance of cloud

Pop-up note

Also, you can write custom notes for the annotation by using the pop-up note associated with the annotation. The pop-up note of the cloud annotation can be opened by selecting and right-clicking on the cloud shape and then choosing Open Pop-up Note from the context menu.

Pop-up note
Pop-up note

Keyboard shortcuts summary

The following shortcut keys can be used with the cloud shape annotations:

  • CTRL + Z: Undo the changes.
  • CTRL + Y: Redo the changes.
  • ESCAPE: Cancel the current cloud-shape drawing, which is in progress; (or) deselect the annotation if it is selected; (or) reset the cloud annotation mode; (or) close the properties window or pop-up note if it is open. One of these operations will be performed based on the priority order.
  • Up, down, right, left (direction keys): Move the cloud up, down, right, and left, respectively.
  • Delete: Delete the selected annotation.

Resource

For more information, refer to cloud shape annotations in WPF PDF Viewer.

Conclusion

Thank you for reading this blog. I hope that you enjoyed learning about how to add, remove, and modify cloud shapes in your PDF files using the Syncfusion WPF PDF Viewer. Try using our PDF Viewer in your application and let us know what you think in the comment section below. This feature is available in our 2021 Volume 2 release. To see all the updates in this release, please check out our Release Notes and What’s New pages.

If you are not a customer yet, you can start a 30-day free trial to check out these features.

If you wish to send us feedback or would like to submit any questions, you can contact us through our support forumfeedback portal, or Direct-Trac support system. We are always happy to assist you!

Reference links

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top