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, 0, 100); 
                    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  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)