How to use “Threading” / Parallel methods in XAML UWP

Question

I've known how to use threading functions in Windows Form but we have a project that makes use of XAML. I am working out with a simple robot that has Odometry. Right now, I am trying to implement 2 process simultaneously specifically.. Starting the Motors(forward, backward, left, right) and Counting the encoders (number of rotations it turns or number of encoder ticks)

My problem is that after my I press the 'forward button' (or any motor button), my UI stops and doesn't perform the 'StartCount()' function and doens't change my TextBoxes according to the number of ticks. My apologies if I made some confusions, I am still a beginner at XAML. Is there a way I could thread these 2 methods? And threading in XAML UWP does not work. Thanks in advance. Here is my simple code..

private void Forward_btn_Click(object sender, RoutedEventArgs e)
    {
        StartStop_Bool = true;
        CwCcwPinLeft.Write(GpioPinValue.Low);
        CwCcwPinRight.Write(GpioPinValue.High);
        Task.Delay(FIFTEEN_MILLISECOND);
        RunBrakePinRight.Write(GpioPinValue.High);
        RunBrakePinLeft.Write(GpioPinValue.High);
        StartCount();
    }

here is my startcount() function..

private void StartCount() {

        if (TicksLeftPin.Read() == GpioPinValue.High && TicksRightPin.Read() == GpioPinValue.High)
            {
                if (CwCcwPinLeft.Read() == GpioPinValue.High && CwCcwPinRight.Read() == GpioPinValue.Low)
                { // MOVING ON A STRAIGHT LINE
                    LeftMotor_TickCounter++;
                    RightMotor_TickCounter++;
                }
                else if (CwCcwPinLeft.Read() == GpioPinValue.High && CwCcwPinRight.Read() == GpioPinValue.High)
                { // ROTATING TO RIGHT
                    LeftMotor_TickCounter++;
                    RightMotor_TickCounter--;
                }
                else if (CwCcwPinLeft.Read() == GpioPinValue.Low && CwCcwPinRight.Read() == GpioPinValue.High)
                { // MOVING BACKWARDS
                    LeftMotor_TickCounter--;
                    RightMotor_TickCounter--;
                }
                else
                { // ROTATING TO LEFT
                    LeftMotor_TickCounter--;
                    RightMotor_TickCounter++;
                }
            }
            else if (TicksLeftPin.Read() == GpioPinValue.High && TicksRightPin.Read() == GpioPinValue.Low)
            {
                if (CwCcwPinLeft.Read() == GpioPinValue.High)
                {
                    LeftMotor_TickCounter++;
                }
                else
                {
                    LeftMotor_TickCounter--;
                }
            }
            else if (TicksLeftPin.Read() == GpioPinValue.Low && TicksRightPin.Read() == GpioPinValue.High)
            {
                if (CwCcwPinRight.Read() == GpioPinValue.Low)
                {
                    RightMotor_TickCounter++;
                }
                else
                {
                    RightMotor_TickCounter--;
                }
            }
            CounterLabelLeft.Text = LeftMotor_TickCounter.ToString();
            CounterLabelRight.Text = RightMotor_TickCounter.ToString();


    }

Answer 1

I would use async await to keep ui responsive. It will allow stuff to happen in background and the UI to stay responsive. I would change StartCount to something like this. Any function you run async you should return something. I am assuming your app is using a .net version that supports async and await

private async Task<bool> StartCount() {

    if (TicksLeftPin.Read() == GpioPinValue.High && TicksRightPin.Read() == GpioPinValue.High)
        {
            if (CwCcwPinLeft.Read() == GpioPinValue.High && CwCcwPinRight.Read() == GpioPinValue.Low)
            { // MOVING ON A STRAIGHT LINE
                LeftMotor_TickCounter++;
                RightMotor_TickCounter++;
            }
            else if (CwCcwPinLeft.Read() == GpioPinValue.High && CwCcwPinRight.Read() == GpioPinValue.High)
            { // ROTATING TO RIGHT
                LeftMotor_TickCounter++;
                RightMotor_TickCounter--;
            }
            else if (CwCcwPinLeft.Read() == GpioPinValue.Low && CwCcwPinRight.Read() == GpioPinValue.High)
            { // MOVING BACKWARDS
                LeftMotor_TickCounter--;
                RightMotor_TickCounter--;
            }
            else
            { // ROTATING TO LEFT
                LeftMotor_TickCounter--;
                RightMotor_TickCounter++;
            }
        }
        else if (TicksLeftPin.Read() == GpioPinValue.High && TicksRightPin.Read() == GpioPinValue.Low)
        {
            if (CwCcwPinLeft.Read() == GpioPinValue.High)
            {
                LeftMotor_TickCounter++;
            }
            else
            {
                LeftMotor_TickCounter--;
            }
        }
        else if (TicksLeftPin.Read() == GpioPinValue.Low && TicksRightPin.Read() == GpioPinValue.High)
        {
             if (CwCcwPinRight.Read() == GpioPinValue.Low)
            {
                RightMotor_TickCounter++;
            }
            else
            {
                RightMotor_TickCounter--;
            }
        }
        CounterLabelLeft.Text = LeftMotor_TickCounter.ToString();
        CounterLabelRight.Text = RightMotor_TickCounter.ToString();

        return true;
}            

And your event handler to this. The awaits will allow the UI to update while the function is running.

private async void Forward_btn_Click(object sender, RoutedEventArgs e)
{
    StartStop_Bool = true;
    CwCcwPinLeft.Write(GpioPinValue.Low);
    CwCcwPinRight.Write(GpioPinValue.High);
    await Task.Delay(FIFTEEN_MILLISECOND);
    RunBrakePinRight.Write(GpioPinValue.High);
    RunBrakePinLeft.Write(GpioPinValue.High);
    await StartCount();
}

Another option would be to do this in a thread and use Dispatcher.BeginInvoke when ever you update a control from the thread.

https://msdn.microsoft.com/en-us/library/system.windows.threading.dispatcher.begininvoke(v=vs.110).aspx