Google Windows Phone Ink Support:signature capturing and save to media library with image format in c# | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Wednesday 19 March 2014

Windows Phone Ink Support:signature capturing and save to media library with image format in c#

Introduction

Recently I heard about one interesting requirement is "user signing on the screen and it need to be store that signature into media library when user capture it  and also show it again in image control ",and its quietly similar to we are signing signature after taking the post from postman,so we may need to implement this one in device


Source File at :WindowsPhoneSignatureSample


Building the Sample

However to implement this sample ,we are not need for any other dll's. Because Ink support is available for windows phone 8.0 &windows phone 7.1
Note:I am not sure ,Ink support is available for windows phone 7.0


Description 


 we can implement this kind of signature application using two ways
1) By manipulating the canvas events such as ManipulationStarted,ManipulationDelta,ManipulationCompleted :Please refer this one if you want to implement though canvas Capture User Signatures with canvas
2)Using InkPresenter 
However in above two ways ,i recommend second one is using InkPresenter
InkPresenter:provides a drawing surface to support ink features. InkPresenter derives from Canvas and can display one or more UIElement objects and a StrokeCollection.
So that we need to follow some few steps,to meet our requirement

1)How to use InkPresenter in xaml

XAML

<Canvas    <TextBlock Text="InkPresenter Control" FontWeight="Bold" Margin="50,30,0,0" /> 
    <Rectangle Height="500" Width="500" Margin="50,50,0,0" Stroke="Black" /> 
    <InkPresenter x:Name="MyIP" Height="500" Width="500" 
              Margin="50,50,0,0" 
              MouseLeftButtonDown="MyIP_MouseLeftButtonDown"  
              LostMouseCapture="MyIP_LostMouseCapture"  
              MouseMove="MyIP_MouseMove"  
              Background="Transparent" Opacity="1" /> 
</Canvas>
 To change Inkpresenter color in c# with stroke,


C#

NewStroke.DrawingAttributes.Color = Colors.Red;
 To write signature on the screens ,we must take adavnates of inkpresenter mouse events like this way 
C#
private void MyIP_MouseLeftButtonDown(object sender, MouseEventArgs e) 
{ 
     
                StylusPointCollection MyStylusPointCollection = new StylusPointCollection(); 
                MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(MyIP)); 
                NewStroke = new Stroke(MyStylusPointCollection); 
                NewStroke.DrawingAttributes.Color = Colors.Red; 
                MyIP.Strokes.Add(NewStroke); StylusPointCollection ErasePointCollection = new StylusPointCollection(); 
}


C#
private void MyIP_MouseMove(object sender, MouseEventArgs e) 
{ 
   if (NewStroke != null) 
                NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyIP)); 
}
 2)How to Clear InkPresenter value in C# 
C#

MyIP.Strokes.Clear();
 3)How to erase InkPresenter value in C#
C#
 private void MyIP_MouseMove(object sender, MouseEventArgs e)
        {
            if (eraseflag == false)
            {
                StylusPointCollection pointErasePoints = e.StylusDevice.GetStylusPoints(MyIP);
                StrokeCollection hitStrokes = MyIP.Strokes.HitTest(pointErasePoints);
                if (hitStrokes.Count > 0)
                {
                    foreach (Stroke hitStroke in hitStrokes)
                    {
                        MyIP.Strokes.Remove(hitStroke);
                        //  undoStack.Push(hitStroke);
                        // undoStateBufferStack.Push(true);
                    }
                }
            }
            if (NewStroke != null)
                NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyIP));
        }
 4)How to Undo and Redo InkPresenter value in C#
C#
private void btnUndo_Click(object sender, RoutedEventArgs e) 
        { 
            if (MyIP.Strokes != null && MyIP.Strokes.Count > 0) 
            { 
                _removedStrokes.Push(MyIP.Strokes.Last()); 
                MyIP.Strokes.RemoveAt(MyIP.Strokes.Count - 1); 
            } 
            else 
            { 
                MessageBox.Show("Note:There is no signature line to undo!"); 
            } 
        }
C#
 private void btnRedo_Click(object sender, RoutedEventArgs e) 
        { 
            if (_removedStrokes != null && _removedStrokes.Count > 0) 
            { 
                MyIP.Strokes.Add(_removedStrokes.Pop()); 
            } 
            else 
            { 
                MessageBox.Show("Note:There is no signature line to redo!"); 
            } 
        }
5)How to Capture InkPresenter signature of Image format in C#

C#
private void btncaprture_Click(object sender, RoutedEventArgs e) 
        { 
            if (MyIP.Strokes != null && MyIP.Strokes.Count > 0) 
            { 
                WriteableBitmap wbBitmap = new WriteableBitmap(MyIP, new TranslateTransform()); 
                EditableImage eiImage = new EditableImage(wbBitmap.PixelWidth, wbBitmap.PixelHeight); 
 
                try 
                { 
                    for (int y = 0; y < wbBitmap.PixelHeight; ++y) 
                    { 
                        for (int x = 0; x < wbBitmap.PixelWidth; ++x) 
                        { 
                            int pixel = wbBitmap.Pixels[wbBitmap.PixelWidth * y + x]; 
                            eiImage.SetPixel(x, y, 
                            (byte)((pixel >> 16) & 0xFF), 
                            (byte)((pixel >> 8) & 0xFF), 
                            (byte)(pixel & 0xFF), (byte)((pixel >> 24) & 0xFF) 
                            ); 
                        } 
                    } 
                } 
                catch (System.Security.SecurityException) 
                { 
                    throw new Exception("Cannot print images from other domains"); 
                } 
 
                // Save it to disk 
                Stream streamPNG = eiImage.GetStream(); 
                StreamReader srPNG = new StreamReader(streamPNG); 
                byte[] baBinaryData = new Byte[streamPNG.Length]; 
                long bytesRead = streamPNG.Read(baBinaryData, 0, (int)streamPNG.Length); 
 
                IsolatedStorageFileStream isfStream = new IsolatedStorageFileStream("tempsignature.png", FileMode.Create, IsolatedStorageFile.GetUserStoreForApplication()); 
                isfStream.Write(baBinaryData, 0, baBinaryData.Length); 
                isfStream.Close(); 
 
                //Show to image 
                isfStream = new IsolatedStorageFileStream("tempsignature.png", FileMode.Open, IsolatedStorageFile.GetUserStoreForApplication()); 
 
                biImage.SetSource(isfStream); 
                isfStream.Close(); 
                ucImg.Visibility = Visibility.Visible; 
                ucImg.SignCapture.Source = biImage; 
                savebtn.IsEnabled = true; 
                TitlePanel.IsHitTestVisible = false; 
                ContentPanel.IsHitTestVisible = false; 
            } 
            else 
            { 
                MessageBox.Show("Note:There is no signature line to capture!"); 
            } 
        }
 6)How to save InkPresenter signature Image to media library

C#

 private void savebtncaprture_Click(object sender, RoutedEventArgs e) 
        { 
            var result = MessageBox.Show("Are you sure save signature to media library?""", MessageBoxButton.OKCancel); 
            if (result == MessageBoxResult.OK) 
            { 
                WriteableBitmap wb = new WriteableBitmap(biImage); 
                using (var stream = new MemoryStream()) 
                { 
                    // Save the picture to the Windows Phone media library. 
                    wb.SaveJpeg(stream, wb.PixelWidth, wb.PixelHeight, 0100); 
                    stream.Seek(0, SeekOrigin.Begin); 
                    new MediaLibrary().SavePicture("tempsignature.png", stream); 
                } 
            } 
        } 
 7)ScreenShots


FeedBack Note:
Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.
Follow me always at  
Have a nice day by  :)

11 comments:

  1. This is totally unacceptable. I have a Galaxy Note 3. I'm not really happy with it, because it's not good for work, since its inking is not as good as inking in OneNote in Windows 8.1 (in Tablet PC's). The inking can later be changed to text. OneNote and EverNote in Android can't do that, even with the Wacom digitizer. When will Microsoft wake up and put a Wacom digitizer in a Nokia phone, and include true inking in Windows Phone, and let me buy a version of OneNote for Windows Phone that works the same as in regular Windows. MS would rule the phone market if it included what it does best, the stylus with Wacom digitizer, and full OneNote.

    ReplyDelete
  2. Replies
    1. I already mentioned Source File path in top of this post.Have you find it :)

      Delete
  3. Can i Connect a Wacom digitizer to windows store app and capture the signature from there and store in store app

    ReplyDelete
  4. can you please tell me how to read the written text ??

    ReplyDelete
  5. Is it possible to use it for Windows phone 8.1 ???

    ReplyDelete
    Replies
    1. No! currently InkPresenter is not supported by wp8.1 store apps.But you can still used it for silverlight 8.1 apps.

      Delete
    2. So how can windows Phone 8.1 store the signature then? Anyway to get it around?

      Delete
  6. Hi Subbu Sir, I really love your Work, I always keep an eye on your Blogs and Post, it is a boon to New Bees in Windows Phone Development,
    I am Having problem in running above Project"Ink Support:signature" its throwing Error "Xap Packaging failed , Object reference not set to instance of an object". I am having VS2012 Update 4 Windows Phone SDK 8.0 .
    Kindly do help me with this.

    ReplyDelete
  7. Nice article.

    Is it possible to dynamically change the ink colour without lifting the stylus pen based on the pressure value. Also on retrieving the signature back, is it possible to set colour to the strokes/stylus points based on the pressure value.

    ReplyDelete
  8. Hi, Nice post. I need to erase a portion of a line like a eraser. How it is possible?

    ReplyDelete

Search Engine Submission - AddMe