Moving an object according to the direction button in WP8 App

Question

I'm trying to move an object according to the direction buttons Up,Left,Right,Down.

I am setting the margin property like:-

    img.Margin = new Thickness(l, t, r, b); //L T R B

I am incrementing/decrementing the values according to the desired movement needed.

I am able to move the object through the click event. However, I'd like to move the object in the desired direction whenever the button is pressed and held for the user. As soon as the user releases the button the movement should also stop.

I tried using the hold event, but the operation executed once and then stopped.

On another attempt I tried looping my statements but the App stalled.

Kindly help me out. Thanks!

EDIT:-

I handled the ManipulationStarted,ManipulationDelta,ManipulationCompleted events.

Now, I'm able to move my object whenever I'm pressing and holding the button. However, the new problem that I'm facing is that I have to constantly keep my finger moving on the screen so as to perform the motion.

The code for the Up Button(the button that moves the object in the vertical direction) is:-

    public double l = 0.0, t = 0.0, r = 0.0, b = 0.0;
    public void move()
    {
        img.Margin = new Thickness(l, t, r, b); //L T R B
    }

    private void up_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
    {

    }

    private void up_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        t = t + 1.0;
        move();
    }

    private void up_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
    {

    }

I'm not sure whether this method is correct or not. Do advise. Thanks.

Answer 1

You should use ManipulationStarted and ManipulationCompleted events. They works for Tap and Hold gestures as stated here: https://msdn.microsoft.com/en-us/library/windows/apps/ff426933(v=vs.105).aspx

Update

To correctly detect the beginning and the end of a tap, I suggest using MouseEnter and MouseLeaving events. Here a sample which shows how I'm moving down an object. This is currently a square in the centre of the screen:

<Grid x:Name="objectToMove" Background="red" Height="100" Width="100">
    <Grid.RenderTransform>
        <TranslateTransform x:Name="verticalTransform" Y="0" />
    </Grid.RenderTransform>
</Grid>

The code behind:

AutoResetEvent autoEvent = new AutoResetEvent(true);

System.Threading.Timer dt;

private void toggle_MouseEnter(object sender, MouseEventArgs e)
{
    dt = new System.Threading.Timer(new TimerCallback(MoveFunct), autoEvent, 0, 1);
}

private void MoveFunct(Object stateInfo)
{
    Deployment.Current.Dispatcher.BeginInvoke(() => { verticalTransform.Y += 3; });
}

private void toggle_MouseLeave(object sender, MouseEventArgs e)
{
    dt.Dispose();
}

Note that the last parameter of Timer constructor consists in the interval between ticks. Also inside MoveFunct function, I'm calling a Dispatcher method otherwise it could not access UI thread. In the sample I used a TranslateTransform which is better, in my opinion, than Margin manipulation because it requires to update the element whole visual tree.