Create, Edit, and Delete Arrows Shapes in PDF Files with Ease in WPF
Tags: wpf, csharp, dotnet, pdf
Published: 2021-10-19 10:22:49

---
title: Create, Edit, and Delete Arrows Shapes in PDF Files with Ease in WPF
published: true
date: 2021-10-19 10:00:11 UTC
tags: wpf, csharp, dotnet, pdf
canonical_url: https://www.syncfusion.com/blogs/post/create-edit-and-delete-arrows-shapes-in-pdf-files-with-ease-in-wpf.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1e9h5xmhiczwz4oo3uk.png
---

Arrows are significant design elements. They serve as visual cues that guide and direct your users’ attention to related information and action areas. We can use them to connect, direct, or point out information in files. The arrow shapes can be particularly useful when reviewing contents in PDF files.

The Syncfusion [WPF PDF Viewer](https://www.syncfusion.com/wpf-ui-controls/pdf-viewer "Link to WPF PDF Viewer") provides easy ways to view, add, remove, and modify arrow shapes in PDF files quickly. It also allows you to draw arrows vertically, horizontally, and diagonally.

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

![Arrow shape annotation in reviewing PDF file](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Arrow-Shape-in-Reviewing-PDF-File.png)<figcaption>Arrow Shape Annotation in Reviewing a PDF File</figcaption>

## Getting started

First things first:

1. [Create a new WPF project ](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/getting-started/walkthrough-my-first-wpf-desktop-application "Link to Tutorial: Create a new WPF app (WPF .NET)")and install the [WPF PDF Viewer NuGet package](https://www.nuget.org/packages/Syncfusion.PdfViewer.WPF/ "Link to Syncfusion.PdfViewer.WPF NuGet package").
2. Then, include the following code in your XAML page to add the PDF Viewer as a child to the window:
```html
<Window x:Class="PdfViewer.MainWindow"
        xmlns:pdfviewer="clr-namespace:Syncfusion.Windows.PdfViewer;assembly=Syncfusion.PdfViewer.WPF">
    <pdfviewer:PdfViewerControl x:Name="pdfViewer"/>
</Window>
```

## Add arrow shapes from the UI

Using the [PdfViewerControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.PdfViewer.PdfViewerControl.html "Link to the Class PdfViewerControl"), you can directly add arrow shapes by selecting the **Arrow** from the shapes in the built-in toolbar.

![Selecting arrow from the toolbar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Selecting-arrow-from-the-toolbar.png)<figcaption>Selecting Arrow from the Toolbar</figcaption>

After choosing the Arrow from the toolbar, click and drag on the page to start creating an arrow. Move the pointer where you want and release it to finish drawing the arrow. Later, you can select and move or resize the arrow to change its location or size.

## Enable arrow-shape drawing mode programmatically

If you are using the [PdfDocumentView](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.PdfViewer.PdfDocumentView.html "Link to the Class PdfDocumentView") control and need to switch to the arrow-shape drawing mode, then execute the [AnnotationCommand](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.PdfViewer.PdfViewerControl.html#Syncfusion_Windows_PdfViewer_PdfViewerControl_AnnotationCommand "Link to the AnnotationCommand property of WPF PDF Viewer") with the [CommandParameter](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.buttonbase.commandparameter?view=net-5.0 "Link to ButtonBase.CommandParameter Property of WPF PDF Viewer") set to **Arrow**.

Refer to the following code example to enable arrow-shape drawing mode:

**XAML**

```html
<Button Command="{Binding ElementName= pdfViewer, Path=AnnotationCommand, Mode= OneWay }" CommandParameter="Arrow"/>
```

**C#**

```csharp
private void EnableArrowDrawingMode()
   {
       if (pdfViewer.AnnotationCommand.CanExecute("Arrow"))
          pdfViewer.AnnotationCommand.Execute("Arrow");
   }
```

**Note:** To reset the annotation mode, you need to pass the [CommandParameter](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.buttonbase.commandparameter?view=net-5.0 "Link to ButtonBase.CommandParameter Property of WPF PDF Viewer") as **None**.

## Remove the arrows

We can easily remove an arrow by selecting and right-clicking the arrow shape. Then, choose the **Delete** option from the context menu. You can also remove the selected annotation using the **DELETE** keyboard key.

![Delete arrow annotation](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Delete-arrow-annotation.png)<figcaption>Delete Arrow Annotation</figcaption>

## Customize the properties of arrow shapes

The properties window of the annotation allows us to customize the arrow’s appearance, such as style, color, thickness, and opacity. With this, you can also change the subject and author’s information. To do so, right-click on the arrow shape and choose **Properties** from the context menu.

![Properties window](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Properties-window.png)<figcaption>Properties Window</figcaption>

## Customize the default appearance

Also, you can customize the default appearance of an arrow using the WPF PDF Viewer’s [ArrowAnnotationSettings](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.PdfViewer.PdfViewerControl.html#Syncfusion_Windows_PdfViewer_PdfViewerControl_ArrowAnnotationSettings "Link to the ArrowAnnotationSettings proprty of WPF PDF Viewer") property.

Refer to the following code example:

```csharp
private void SetDefaultArrowSettings()
   {
      pdfViewer.ArrowAnnotationSettings.BeginLineStyle = PdfLineEndingStyle.Circle;
      pdfViewer.ArrowAnnotationSettings.EndLineStyle = PdfLineEndingStyle.ClosedArrow;
      pdfViewer.ArrowAnnotationSettings.Opacity = 0.5f;
      pdfViewer.ArrowAnnotationSettings.StrokeColor = Colors.Blue;
      pdfViewer.ArrowAnnotationSettings.Thickness = 4;
   }
```

![Customized Arrow Appearance](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/The-customized-appearance-of-an-arrow.png)<figcaption>Customized Arrow Appearance</figcaption>

## Customize the end styles of arrow shapes

You can also customize the end styles of an arrow. The following end styles are currently supported in the WPF PDF Viewer:

<table>
<tbody>
<tr>
<td width="185"><strong>Style </strong></td>
<td width="306"><strong>Appearance (End Style)</strong></td>
</tr>
<tr>
<td width="185">Open</td>
<td width="306"><img class="size-full wp-image-94634 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Open-end-style.png" alt="Open end style arrow" width="454" height="73" /></td>
</tr>
<tr>
<td width="185">Closed</td>
<td width="306"><img class="size-full wp-image-94635 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Arrow-closed-end-style.png" alt="Arrow with closed end style" width="465" height="64" /></td>
</tr>
<tr>
<td width="185">Open (Reverse)</td>
<td width="306"><img class="size-full wp-image-94636 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Arrow-open-Reverse-end-style.png" alt="Arrow open (Reverse) end style" width="461" height="66" /></td>
</tr>
<tr>
<td width="185">Closed (Reverse)</td>
<td width="306"><img class="size-full wp-image-94637 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Arrow-closed-Reverse-end-style.png" alt="Arrow closed (Reverse) end style" width="461" height="48" /></td>
</tr>
<tr>
<td width="185">Butt</td>
<td width="306"><img class="size-full wp-image-94638 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Butt-end-style-in-Arrow.png" alt="Butt end style in arrow" width="459" height="61" /></td>
</tr>
<tr>
<td width="185">Diamond</td>
<td width="306"><img class="size-full wp-image-94639 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Diamond-end-style-in-arrow.png" alt="Diamond end style in arrow" width="456" height="62" /></td>
</tr>
<tr>
<td width="185">Round</td>
<td width="306"><img class="size-full wp-image-94640 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Round-end-style-in-arrow-shape.png" alt="Round end style in arrow shape" width="479" height="62" /></td>
</tr>
<tr>
<td width="185">Square</td>
<td width="306"><img class="size-full wp-image-94641 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Square-end-style-in-arrow-shape.png" alt="Square end style in arrow shape" width="470" height="69" /></td>
</tr>
<tr>
<td width="185">Slash</td>
<td width="306"><img class="size-full wp-image-94642 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Slash-end-style-in-arrow-shape.png" alt="Slash end style in arrow shape" width="489" height="79" /></td>
</tr>
<tr>
<td width="185">None (Normal line)</td>
<td width="306"><img class="size-full wp-image-94643 aligncenter" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/None-Normal-line-end-style-in-arrow-shape.png" alt="None (Normal line) end style in arrow shape" width="475" height="62" /></td>
</tr>
</tbody>
</table>

Apart from these styles, you can also apply the desired styles to both ends of an arrow, like in the following screenshot.

![Customized Arrow with Different Styles at Both Ends](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Customized-arrow-with-different-styles-at-both-the-ends.png)<figcaption>Customized Arrow with Different Styles at Both Ends</figcaption>

## Custom notes

Add custom notes for the annotation by using the pop-up note associated with the annotation. The pop-up note for the arrow annotation can be opened by selecting and right-clicking on the arrow shape and then choosing **Open Pop-up Note** from the context menu.

![Pop-up note](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Pop-up-note.png)<figcaption>Pop-up Note</figcaption>

## Keyboard shortcuts summary

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

- **Ctrl + Z** : Undo the changes.
- **Ctrl + Y** : Redo the changes.
- **Esc** : Deselect the annotation if it is selected; (or) reset the arrow 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, and Left arrow keys** : Move the arrow up, down, right, and left, respectively.
- **Delete** : Delete the selected annotation.

## References

For more information, refer to the [arrow shape annotation in the WPF PDF Viewer GitHub demo](https://github.com/SyncfusionExamples/WPF-PDFViewer-Examples/tree/master/Annotations/Arrow "Link to Add, Edit, and Delete Arrow Shapes in PDF Files using WPF PDF Viewer demo on GitHub") and [documentation](https://help.syncfusion.com/wpf/pdf-viewer/working-with-annotations/shape-annotations#arrow "Link to Arrow shape annotation in WPF PDF Viewer documentation").

## Conclusion

Thank you for reading this blog. I hope that you enjoyed learning about how to add, remove, and modify arrow shapes in your PDF files using the Syncfusion [WPF PDF Viewer](https://www.syncfusion.com/wpf-controls/pdf-viewer "Link to WPF PDF Viewer"). Arrow shapes are a great way to highlight a call to action, lead a visitor’s eye, or show a direction of flow. Try using our PDF Viewer to handle arrows in your application and let us know what you think in the comment section below.

Our PDF Viewer is also available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer "Link to Blazor PDF Viewer"), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-pdf-viewer "Link to Flutter PDF Viewer"),  ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/pdf-viewer "Link to ASP.NET Core PDF Viewer"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/pdf-viewer "Link to ASP.NET MVC PDF Viewer"), [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/pdf-viewer "Link to ASP.NET Web Forms PDF Viewer")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-pdf-viewer "Link to JavaScript PDF Viewer"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-pdf-viewer "Link to Angular PDF Viewer"), [React](https://www.syncfusion.com/react-ui-components/react-pdf-viewer "Link to React PDF Viewer"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-pdf-viewer "Link to Vue PDF Viewer"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-pdf-viewer "Link to Xamarin PDF Viewer"), [UWP](https://www.syncfusion.com/uwp-ui-controls/pdf-viewer "Link to UWP PDF Viewer"),  [WinForms](https://www.syncfusion.com/winforms-ui-controls/pdf-viewer "Link to WinForms PDF Viewer"), and [WPF](https://www.syncfusion.com/wpf-controls/pdf-viewer "Link to WPF PDF Viewer") platforms.

If you are not a customer yet, you can start a 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out the arrow annotation and other features.

If you wish to send us feedback or would like to submit any questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Link to Syncfusion Feedback Portal"), or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [What’s New in 2021 Volume 3: WinUI and WPF](https://dev.to/sureshmohan/what-s-new-in-2021-volume-3-winui-and-wpf-3d05-temp-slug-8802760 "Link to What’s New in 2021 Volume 3: WinUI and WPF blog")
- [Create a Feature-Rich WPF Diagramming App in 2 Minutes](https://dev.to/syncfusion/create-a-feature-rich-wpf-diagramming-app-in-2-minutes-5b9n "Link to Create a Feature-Rich WPF Diagramming App in 2 Minutes blog")
- [Add, Edit, and Delete Cloud Shapes in PDF Files with Ease in WPF](https://dev.to/karthickramasamy08/add-edit-and-delete-cloud-shapes-in-pdf-files-with-ease-in-wpf-4l52-temp-slug-4649139 "Link to Add, Edit, and Delete Cloud Shapes in PDF Files with Ease in WPF blog")
- [Create, View, Edit, and Save Your Excel Files Using WPF Spreadsheet](https://dev.to/karthickramasamy08/create-view-edit-and-save-your-excel-files-using-wpf-spreadsheet-3i1m-temp-slug-2005143 "Link to Create, View, Edit, and Save Your Excel Files Using WPF Spreadsheet blog")