We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Adding a signature image to a pdf file

In a Winrt project i have an option on an app bar, when a pdf file is open with the SfPdfViewer, to add a signature (image with signature) to the file.
basically a sidebar appears and the user drags and drops a image on top of the pdf, then presses save, and i generate a new pdf file with the signature.
the new pdf file is generated indeed, but the signature sometimes appears in the wrong place.

I have this option on the control: 

pdfViewer.ViewMode = PageViewMode.FitWidth

and this is the part i use when i drag and drop my signature image

        private void OnDragItemsStarting(object sender, DragItemsStartingEventArgs e)
            e.Data.Properties.Add(string.Empty, e.Items.Single());

        private void OnDrop(object sender, DragEventArgs e)
            signGrid.Visibility = Visibility.Collapsed;
                var item = e.Data.Properties.Values.Single() as ImageSource;
                position = e.GetPosition(sender as UIElement);
                var style = Resources["ImageStyle"] as Style;

                Debug.WriteLine("POS: " + position);

                var image = new Image
                    Style = style,
                    HorizontalAlignment = HorizontalAlignment.Left,
                    ManipulationMode = ManipulationModes.All,
                    RenderTransform = new CompositeTransform(),
                    Source = item,
                    VerticalAlignment = VerticalAlignment.Top,

                Debug.WriteLine("Image: " + image.ActualWidth + " " + image.ActualHeight);

                Thickness imageThickness = new Thickness(position.X - image.ActualWidth / 2 + 10,
                    position.Y - image.ActualHeight / 2 + 10, 0, 0);

                Debug.WriteLine("imageThickness: " + imageThickness);

                // Thickness imageThickness = new Thickness(position.X,position.Y,0,0);

                image.Margin = imageThickness;
                image.ManipulationDelta += OnManipulationDelta;


            catch (Exception e1)
                MarkedUp.AnalyticClient.Error("PdfPage.cs  287  " + e1.Message);

        private void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
            var image = sender as Image;
            var transform = image.RenderTransform as CompositeTransform;

            transform.TranslateX += e.Delta.Translation.X;
            transform.TranslateY += e.Delta.Translation.Y;

        private void OnVerticalValueChanged(object sender, RangeBaseValueChangedEventArgs e)
            foreach (var image in images)
                var transform = image.RenderTransform as CompositeTransform;

                transform.TranslateY += e.OldValue - e.NewValue;

            verticalOffset = (float)e.NewValue;

        private void OnHorizontalValueChanged(object sender, RangeBaseValueChangedEventArgs e)
            foreach (var image in images)
                var transform = image.RenderTransform as CompositeTransform;

                transform.TranslateX += e.OldValue - e.NewValue;

            horizontalOffset = (float)e.NewValue;

and after its dropped i do this on my save method.

private async void OnSaveButtonClick(object sender, RoutedEventArgs e)
            backButton.IsEnabled = false;
            IsLoading = true;

                foreach (var image in this.images)
                    var bitmap = image.Source as ImageSource;
                    var index = bitmaps.IndexOf(bitmap);
                    var signature = signatures.ElementAt(index);
                    var bytes = await signature.Data.EncodePngToJpeg();

                    PdfImage pdfImage;
                    using (var memoryStream = new MemoryStream(bytes))
                        pdfImage = PdfImage.FromStream(memoryStream);

                    var transform = image.RenderTransform as CompositeTransform;

                    var x = (image.Margin.Left + transform.TranslateX + horizontalOffset) * 100 / pdfViewer.Zoom - 10;
                    var y = (image.Margin.Top + transform.TranslateY + verticalOffset) * 100 / pdfViewer.Zoom - 10;
                    Debug.WriteLine("XY " + x + " " + y);

                    var firstPage = pdfDocument.Pages[pdfViewer.PageNumber];
                    var pageHeight = firstPage.Size.Height;
                    var pageWidth = firstPage.Size.Width;

                    var selpage = pdfViewer.PageNumber;

                    //var pageNumber = 0;
                    //while (y > pageHeight)
                    //    y -= pageHeight + 11;
                    //    pageNumber++;

                    var page = pdfDocument.Pages[selpage-1];
                    Debug.WriteLine("PAG " + selpage);
                    var graphics = page.Graphics;
                    //var width = image.Width * 100 / pdfViewer.Zoom;
                    //var height = image.Height * 100 / pdfViewer.Zoom;

                    var width = image.Width;
                    var height = image.Height;

                    float fWidth = (float)width;
                    float fHeight = (float)height;
                    fWidth = 165f * 0.50f;
                    fHeight = 110f * 0.50f;

                    graphics.ScaleTransform(0.75f, 0.75f);

                    graphics.DrawImage(pdfImage, (float)x, (float)y, fWidth, fHeight);
                } ...

Im guessing that its a bit confusing just looking at that
So i was wondering if you guys have any examples of a drag and drop image on top of a pdf and save it (creating a new pdf file with the image inserted )

4 Replies

SM Suresh M Syncfusion Team November 10, 2014 10:27 AM UTC

Hi Ric,


Thank you for your interest in Syncfusion products.


With our current implementation of the PDF Viewer, we only support to add images to some particular position of the page and dynamic positioning of images in the page is not supported. We have logged a feature report for supporting the same. Please follow up the implementation of the feature with the below incident. Also we have attached a sample to include the image at a particular position in the page of the PDF document.


Incident ID: http://www.syncfusion.com/support/directtrac/incidents/131817


Sample link: http://www.syncfusion.com/downloads/support/directtrac/131817/PDFViewerWintRT_2013-1007219122.zip


Please let us know if you need any further assistance.




RS Ric Silva December 2, 2014 05:49 PM UTC

still having a positioning issue with my image

mainly in the Y coordinate, because of the scrolldown amount i do to get to the desired position

like i explained before im trying to add a image to a specific location

for example on this image, i have a PDF page, and the black square represents my screen and the part of the pdf im seeing, the red X represents the place i want to add the image.

what i want is a way to calculate that position.
i can get the screen coordinates where the red X is, but when i convert to the pdf coordinates my Y is wrong because of the scroll offset ( red line )

is there a way to get the scroll value or some other way i can calculate the red X position in the pdf?

SS Sathish Sivakumar Syncfusion Team December 4, 2014 12:26 PM UTC

Hi Ric,


Thank you for your response.


Implementation to expose Properties of Vertical and Horizontal offset, Gap between the pages and Collection of Page Offsets from the PDF Viewer is available in our service pack release available in the link below. 




We have also prepared a sample to illustrate the same, please find it in the link below.




Sample Explanation:


·         *Canvas for image to draw in your Pdf file will be enabled if you clicked the button “Toggle to Insert Image”.

·         *If the Canvas is enabled the functioning of scrollbar gets disabled to avoid unwanted scrolling.

·         * While you clicking anywhere on the Pdf file image will be drawn at the respective clicking position.  


Note: The above can work only after the installation of the WinRT build from the Volume 3 service pack release.


Please let us know if you need any further assistance.



Sathish Sivakumar.

DN Dnyani May 22, 2015 04:38 AM UTC

Hello All,

Can I have sample example for  xamrin.forms  android. 

Live Chat Icon For mobile
Up arrow icon