Dim overlay by swiping on Windows Phone

Question

I have a rectangle as an overlay and I want to modify its opacity by swiping up and down, like in the app Free Talking Alarm Clock. I figured out, that I have to deal with ManipulationStarted and ManipulationDelta events, but not sure which value to use. At this point I'm able to change the opacity by swiping, but changes only when the swipe is completed, and I want the opacity to change while I'm swiping. How do I do that?

Right now, I have this:

private Point initialpoint;
private double opacity;
private void rec_overlay_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
        initialpoint = e.Position;
    }

private void rec_overlay_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    Point currentpoint = e.Position;

    if (initialpoint.Y - currentpoint.Y < 0)
    {
        opacity += 0.1;
        rec_overlay.Opacity = opacity;
        System.Diagnostics.Debug.WriteLine("Swipe down");
    }
    else if(initialpoint.Y - currentpoint.Y > 0)
    {
        opacity -= 0.1;
        rec_overlay.Opacity = opacity;
        System.Diagnostics.Debug.WriteLine("Swipe up");
    }
}

Answer 1

the code above works, just have to change the opacity value from 0.1 to 0.01

Answer 2

Basically, the distance of your finger movement should be directly proportional to the Rectangle's Opacity change.

You can monitor the most recent Y change which is e.Delta.Translation.Y and divide it by the Rectangle's ActualHeight in order to get a more accurate Opacity change.

Something like this will do.

private void rec_overlay_ManipulationDelta(object sender, Windows.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs e)
{
    // keep the Opacity value within its boundary
    if (rec_overlay.Opacity > 1)
    {
        rec_overlay.Opacity = 1;
    }
    else if (rec_overlay.Opacity < 0)
    {
        rec_overlay.Opacity = 0;
    }

    // update the opacity whenever a movement happens
    rec_overlay.Opacity += -e.Delta.Translation.Y / this.rec_overlay.ActualHeight;
}