Creating Scratch card effect on Windows Phone c# xaml

Question

I would like to create a scratch card effect on the Windows Phone. However my current solution seem sluggish and the scratch effect look weird(refer to the screenshot below). The experience is very poor as compared to those that i had seen on iOS.

Would appreciate if someone could guide me toward it. Below are my current code.

        <Grid Width="Auto" Height="Auto" Background="Black">
        <Viewbox Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid Height="60" Width="60" Background="White">
                <InkPresenter x:Name="inkP" Width="60" Height="60">
                    <InkPresenter.Background>
                        <ImageBrush Stretch="Fill" ImageSource="/Assets/image.png"/>
                    </InkPresenter.Background>
                    <Grid Height="60" Width="60">
                        <TextBlock x:Name="lblsecretText" HorizontalAlignment="Center" TextWrapping="Wrap" Text="LOL" VerticalAlignment="Center" Width="60" Foreground="Black" TextAlignment="Center" FontSize="5.333"/>
                    </Grid>
                </InkPresenter>
            </Grid>
        </Viewbox>
    </Grid>


        Stroke s;
    int mycol = 0;
    public MainPage()
    {
        InitializeComponent();
        inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
        for (int i = 0; i < 60; i++)
        {
            for (int l = 0; l < 60; l++)
            {
                Stroke bigStroke = new Stroke();
                bigStroke.StylusPoints.Add(new StylusPoint(i, l));
                inkP.Strokes.Add(bigStroke);
            }
        }
    }

StylusPoint _lastPoint;

    void inkP_MouseMove(object sender, MouseEventArgs e)
    {
        StylusPointCollection pointErasePoints = e.StylusDevice.GetStylusPoints(inkP);
        pointErasePoints.Insert(0, new StylusPoint(e.GetPosition(inkP).X, e.GetPosition(inkP).Y));
        //Compare collected stylus points with the ink presenter strokes and store the intersecting strokes.
        StrokeCollection hitStrokes = inkP.Strokes.HitTest(pointErasePoints);
        if (hitStrokes.Count > 0)
        {
            foreach (Stroke hitStroke in hitStrokes)
            {
                inkP.Strokes.Remove(hitStroke);
            }
        }
        _lastPoint = pointErasePoints[pointErasePoints.Count - 1];
    }

Answer 1

Your strokes are beeing removed point by point.

You can adjust this by changing your MainPage constructor to:

public MainPage()
{
    InitializeComponent();
    inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
    for (int i = 0; i < 60; i++)
    {
        Stroke bigStroke = new Stroke();
        for (int l = 0; l < 60; l++)
        {
            bigStroke.StylusPoints.Add(new StylusPoint(i, l));               
        }
        inkP.Strokes.Add(bigStroke);
    }
}

This will add the strokes line by line. When you remove them, they will be removed line by line.