Pdf Signature in Windows Store/Phone (XAML)

This article describes about how user can sign on the PDF Form in Windows Store application. If you want to accomplish the same feature in Windows Phone or Universal app, we don’t have the Assembly (dll) support in Windows 8.0 version. For Windows Store app, we can use the Windows.Data.Pdf dll to implement this feature.

i) Rendering the PDF Form
ii) When clicks on Signature option on Pdf, Signature Popup will be opened where user can sign on (use mouse if you don’t have touch support)
iii) And that signature will be set on PDF upon signature popup closes.

Create a Windows Store project adds the Grid Layout in MainPage.Xaml as below.

    <ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Column="0" Grid.Row="0" VerticalScrollBarVisibility="Auto" MinZoomFactor=".7">
                <Grid x:Name="pdfGrid">

Add the Stack Panel to this Grid Layout as a child element.  While Pdf rendering, it will be converted as Image and be added to this stack panel finally.

StackPanel pdfViwer = new StackPanel();

Rendering the Pdf Form:

Add the Widows.Data.Pdf assembly in MainPage.Xaml.cs

using Windows.Data.Pdf;

Add below lines of code for Pdf rendering and add to the stack panel

                this.pdfViwer.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Top;
                StorageFile pdfFile = selectedFile;
                PdfDocument pdfDocument = await PdfDocument.LoadFromFileAsync(pdfFile);

                //this.pdfViwer.Width = 816;
                //this.pdfViwer.Height = 0;
                if (pdfDocument != null && pdfDocument.PageCount > 0)
                    for (int pageIndex = 0; pageIndex < pdfDocument.PageCount; pageIndex++)
                        var pdfPage = pdfDocument.GetPage((uint)pageIndex);
                        if (pdfPage != null)
                            var tempFolder = ApplicationData.Current.TemporaryFolder;
                            var pngFile = await tempFolder.CreateFileAsync(Guid.NewGuid().ToString() + ".png", CreationCollisionOption.ReplaceExisting);
                            if (pngFile != null)
                                IRandomAccessStream randomStream = await pngFile.OpenAsync(FileAccessMode.ReadWrite);
                                var pdfPageRenderOptions = new PdfPageRenderOptions();
                                //pdfPageRenderOptions.DestinationWidth = 1046;
                                //pdfPageRenderOptions.DestinationHeight = 1152;
                                //pdfPageRenderOptions.DestinationWidth = 816;
                                //pdfPageRenderOptions.DestinationHeight = 1056;
                                //pdfPageRenderOptions.SourceRect=new Rect(0,0,684,864);

                                pdfPageRenderOptions.DestinationHeight = (uint)(pdfPage.Dimensions.MediaBox.Height);
                                pdfPageRenderOptions.DestinationWidth = (uint)(pdfPage.Dimensions.MediaBox.Width);


                                await pdfPage.RenderToStreamAsync(randomStream, pdfPageRenderOptions);
                                await randomStream.FlushAsync();
                                var pdfimg = new Image();
                                pdfimg.Source = new BitmapImage(new Uri(pngFile.Path, UriKind.Absolute));
                                pdfimg.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Top;

                                pdfimg.MaxHeight = pdfPageRenderOptions.DestinationHeight;
                                pdfimg.MaxWidth = pdfPageRenderOptions.DestinationWidth;


            catch (Exception err)

Signature Popup

Place the Canvas control based on the dimensions of the PDF control where we have the Signature option in rendered pdf form and add the Tapped event for Canvas control to open the Signature popup.

           smallsigCanvas.Width = pnttopix(150);
            smallsigCanvas.Height = pnttopix(27);
            smallsigCanvas.Opacity = .5;
            smallsigCanvas.Background = new SolidColorBrush(Colors.Gray);
            smallsigCanvas.HorizontalAlignment = HorizontalAlignment.Left;
            smallsigCanvas.VerticalAlignment = VerticalAlignment.Top;
            smallsigCanvas.Tapped += canvas_Tapped;
            smallsigCanvas.Margin = new Thickness(pnttopix(121), PixelforTopCoordinate(338, 3), 0, 0);

Add the Grid Layout for Signature popup , set visibility to collapsed and add the Canvas control to this Grid Layout

<Grid Name="signatureGrid" Height="500" Width="600" HorizontalAlignment="Center" Visibility="Collapsed" Grid.Column="1">
                        <RowDefinition Height="Auto" />
                    <Border BorderThickness="2" BorderBrush="Black" Grid.Row="0">
                        <StackPanel  Orientation="Vertical">
                            <Border Background="Aqua">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Please sign below!!!" FontSize="24" Foreground="Gray" Padding="5" Opacity="1.0" Margin="200,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    <Button Name="btnClose" Content="Close" BorderThickness="2" BorderBrush="Black" Background="Aquamarine" Margin="110,0,0,0" Click="BtnClose_OnClick" HorizontalAlignment="Right" Padding="5"></Button>
                            <Canvas Height="420" Width="600" Name="bigSigcanvas" Background="Gray" PointerPressed="InkCanvas_PointerPressed" PointerMoved="InkCanvas_PointerMoved" PointerReleased="InkCanvas_PointerReleased" />
                            <Border Background="Aqua" BorderBrush="Black"  BorderThickness=".5">
                                <StackPanel Orientation="Horizontal"  Height="80">
                                    <Button Name="btnSave" Foreground="Black" BorderThickness="1" BorderBrush="Black" Padding="5" FontSize="15" HorizontalAlignment="Center" Width="200" VerticalContentAlignment="Top" VerticalAlignment="Top" Content="Save Signatures" Click="BtnSave_OnClick"></Button>
                                    <Button Name="btnErase" Foreground="Black" BorderThickness="1" BorderBrush="Black" Padding="5" FontSize="15" HorizontalAlignment="Right" Width="200" Margin="200,0,0,0" VerticalContentAlignment="Top" VerticalAlignment="Top" Content="Erase Signatures" Click="BtnErase_OnClick"></Button>

Make the Signature Grid Visible when taps on Signature Canvas on rendered pdf form.

void canvas_Tapped(object sender, TappedRoutedEventArgs e)
            this.signatureGrid.Visibility = Visibility.Visible;

Add Signature and catch the signature lines on  PonterMoved event of the Canvas control
       private uint _penID;
        private uint _touchID;
        private Point _previousContactPt;
        private Point currentContactPt;
        private int _lineCount = 0;
        //List of Line class to capture coordinates in the dialog signature gray box
        private List<Line> sigBigLines = new List<Line>();
        //List of Line class to capture coordinates in the small signature gray box
        private List<Line> sigSmallLines = new List<Line>();
        //This value is the ratio of Line class properties of Small Signature canvas to Big Signature Canvas
        private double _signatureLineRatioWidth = 0;
        private double _signatureLineRatioHeight = 0;
        private double _strokeThickness;
        private double x1;
        private double y1;
        private double x2;
        private double y2;

private void InkCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)

            if (e.Pointer.PointerId == _penID)
                PointerPoint pt = e.GetCurrentPoint(bigSigcanvas);

                // Render a green line on the canvas as the pointer moves.
                currentContactPt = pt.Position;
                x1 = _previousContactPt.X;
                y1 = _previousContactPt.Y;
                x2 = currentContactPt.X;
                y2 = currentContactPt.Y;

                if (Distance(x1, y1, x2, y2) > 2.0)
                    Line bigline = new Line()
                        X1 = x1,
                        Y1 = y1,
                        X2 = x2,
                        Y2 = y2,
                        StrokeThickness = 4.0,
                        Stroke = new SolidColorBrush(Colors.Blue)

                    Line smallline = new Line()
                        X1 = x1 * _signatureLineRatioWidth,
                        Y1 = y1 * _signatureLineRatioHeight,
                        X2 = x2 * _signatureLineRatioWidth,
                        Y2 = y2 * _signatureLineRatioHeight,
                        StrokeThickness = _strokeThickness,
                        Stroke = new SolidColorBrush(Colors.Blue)


                    _previousContactPt = currentContactPt;

                    // Draw the line on the canvas by adding the Line object as
                    // a child of the Canvas object.

                    // Pass the pointer information to the InkManager.

            else if (e.Pointer.PointerId == _touchID)
                // Process touch input

Set Signature on PDF

Add Signature Lines to the Canvas which was placed on Signature option of pdf form.

private async void BtnSave_OnClick(object sender, RoutedEventArgs e)
            smallsigCanvas.Background = new SolidColorBrush(Colors.Gray);
            signatureGrid.Visibility = Visibility.Collapsed;
            if (sigSmallLines.Count < 1)
                txtCurrentDateTime.Text = string.Empty;
            for (int i = 0; i < sigSmallLines.Count; i++)
                sigCoordinates.Add(new SigCoordinates() { X1 = pixtopnt(sigSmallLines[i].X1), X2 = pixtopnt(sigSmallLines[i].X2), Y1 = pixtopnt(sigSmallLines[i].Y1), Y2 = pixtopnt(sigSmallLines[i].Y2) }
            bigSigcanvas.Background = new SolidColorBrush(Colors.Gray);

That’s it .

Please download the source code from below location

By Siva Jagan Dhulipalla   Popularity  (3885 Views)