Touch not seen on Image in a Canvas

NETMF & Gadgeteer
1

I’m trying to get my display to be all nice and friendly. Individually I can get all the components working (after much work). But I have a query about the Canvas method.

TouchDown events work for my Image object buttons added to my display StackPanel.

But when I add the Images to a Canvas in order to position them nicely in the bottom right, I can no longer detect the TouchDown events.

I can get a TouchDown event to fire when my Canvas is given a TouchDown event handler, but I don’t want that. I’d like to click buttons.

Any assistance?

2

Don’t you have to add a touch event to the image touch event in the current scope so you can interrogate the image touch event.

i.e… image.touchevent + toucheventchecker;

Then do the event code in the new event handeler.

This is how I do it… However I dont use a canvas I use a screen sized bitmap and draw my controls on that…

Cheers Ian

3

I’m working in the Application Class rather than the Bitmap Class.

The Application class has no command like Flush, and there isn’t a background bitmap on which to hang things.

4

Please post your code.

5 

			Image imageButtonLeft = new Image(bmpIconLeft);
			Image imageButtonSet = new Image(bmpIconSet);
			Image imageButtonRight = new Image(bmpIconRight);
			Image imageButtonPlus = new Image(bmpIconPlus);
			Image imageButtonMinus = new Image(bmpIconMinus);
			Image imageButtonTime = new Image(bmbIconTime);

			imageButtonPlus.HorizontalAlignment = HorizontalAlignment.Center;
			imageButtonMinus.HorizontalAlignment = HorizontalAlignment.Center;

			txtTemperatureRoom = new Text(fntCourier9Reg, "");
			txtTemperatureExternal = new Text(fntCourier9Reg, "");
			txtTemperatureTankBody = new Text(fntCourier9Reg, "");
			txtTemperatureTankBase = new Text(fntCourier9Reg, "");
			txtWattcount = new Text(fntCourier9Reg, "");


			// Lowest level:
			StackPanel stackMiddleButtons = new StackPanel(Orientation.Horizontal);
			stackMiddleButtons.Width = 90;
			stackMiddleButtons.HorizontalAlignment = HorizontalAlignment.Right;
			stackMiddleButtons.Children.Add(imageButtonLeft);
			stackMiddleButtons.Children.Add(imageButtonSet);
			stackMiddleButtons.Children.Add(imageButtonRight);

			StackPanel stackButtonPanel = new StackPanel();
			stackButtonPanel.Width = 90;
			stackButtonPanel.HorizontalAlignment = HorizontalAlignment.Right;
			stackButtonPanel.VerticalAlignment = VerticalAlignment.Bottom;
			stackButtonPanel.Children.Add(imageButtonPlus);
			stackButtonPanel.Children.Add(stackMiddleButtons);
			stackButtonPanel.Children.Add(imageButtonMinus);


			Canvas canvasButtonPanel = new Canvas();
			Canvas.SetTop(stackButtonPanel, 140);
			Canvas.SetLeft(stackButtonPanel, 10);
			canvasButtonPanel.Children.Add(stackButtonPanel);

			Canvas.SetTop(imageButtonTime, 170);
			Canvas.SetLeft(imageButtonTime, 250);
			canvasButtonPanel.Children.Add(imageButtonTime);
			canvasButtonPanel.TouchDown += new Microsoft.SPOT.Input.TouchEventHandler(canvasSetTime_TouchDown);
			

			// Default constructor:
			StackPanel stackMainPanel = new StackPanel();
			stackMainPanel.Height = SystemMetrics.ScreenHeight;
			stackMainPanel.Width = SystemMetrics.ScreenWidth;
			stackMainPanel.HorizontalAlignment = HorizontalAlignment.Left;
			stackMainPanel.VerticalAlignment = VerticalAlignment.Bottom;
			
			txtTimeStamp = new Text(fntCourier9Reg, DateTime.Now.ToString());
			txtTimeStamp.HorizontalAlignment = HorizontalAlignment.Center;
			stackMainPanel.Children.Add(txtTimeStamp);

//			Various other text components added here

			canvasButtonPanel.Children.Add(stackMainPanel);
			Child = canvasButtonPanel;

Is this really much help? I hope so…

6

Try to remove touchdown event handler from canvasButtonPanel and add individual touchdown handlers for each imageButton… instead.

7

You need to attach the handler to the image, not the canvas…
Each image can work as a button, therefor you need a touchdown event (click event in windows form) on a button.

imageButtonLeft.TouchDown += new Microsoft.SPOT.Input.TouchEventHandler(buttonLeftTouchDown);
8

Yes you would think that was all that’s needed. But sadly it does not work.

As I mentioned in the initial post - as soon as you arrange a button (with working TouchEvent handler) using the Canvas the button touch event is inaccessible.

By inaccessible I mean that pressing the button does not trigger the interrupt any more. It is as if the canvas obscures the button from the touch.

As the canvas seems the only way to specify the position of a button on screen exactly I’m not sure how to proceed. Using the stack panel evidently doesn’t cause this problem, but the stack panel doesn’t allow one to position an element precisely (just make a vague list of elements).

9

Did you remove the handler from canvas, though? If you do need it, then you have to propagate the event down the UIElement tree.

10

I’m using the EMX Development board at my University and I am running into this same issue. Code that worked in 3.0 got frustrating changed (with Microsoft’s inclusion of getting rid of stylusevents completely and making them multi gesture only) in 4.0, so I can no longer see the same platform-neutral code working on this device. The previous device that it worked on was a Tahoe-II (no longer made) from Device Solutions.

The issue I believe is something to do with images placed in a stackpanel in a canvas running into issues. The lone ‘button’ (running in program.cs) works fine, but a group of buttons formatted the way I have them do not respond to touch events at all. I’ve even tried adding some code from a project I saw that seemed to get the new implementation right (the lone Touches[0] item in one of the TouchEvents).

Here’s the code I have:

//Chris Hilgenberg
//Lab 6 & 7
//2-22-12
//This class is the basis for opening a new window with a 0-9 keypad with an enter and backspace key.

using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT;
using Microsoft.SPOT.Touch;
using Microsoft.SPOT.Input;
using System.Threading; 

namespace MFTouchKeyPadWindow
{
    public class MFTouchKeyPadWindow
    {
        //Image Declaration
        Image button1;
        Image button2;
        Image button3;
        Image button4;
        Image button5;
        Image button6;
        Image button7;
        Image button8;
        Image button9;
        Image button0;
        Image button1Pressed;
        Image button2Pressed;
        Image button3Pressed;
        Image button4Pressed;
        Image button5Pressed;
        Image button6Pressed;
        Image button7Pressed;
        Image button8Pressed;
        Image button9Pressed;
        Image button0Pressed;
        Image done;
        Image backspace;
        Image donePressed;
        Image backspacePressed;

        //Window Declaration
        Window popUpWindow;

        //Brush & Color Declaration
        Brush modalDialogBrush;
        Color backgroundColor;

        //Canvas Declaration
        Canvas exactPositioning;

        //Text and variable declaration
        Text keypadScreen;
        int keyVal=0;
        int total=0;
        int count = 0;
        int[] keysPressed = new int[100];

        public void ShowKeyPadDialog(Window window)
        {
            /*Setting Local Window variable to passed object*/
            popUpWindow = window;
            popUpWindow.Height = SystemMetrics.ScreenHeight;
            popUpWindow.Width = SystemMetrics.ScreenWidth;

            /*Brush & Color Declaration*/
            backgroundColor = ColorUtility.ColorFromRGB(0x5F, 0x9e, 0xa0); //CadetBlue 
            modalDialogBrush = new SolidColorBrush(backgroundColor);
            popUpWindow.Background = modalDialogBrush;

            Debug.Print("I am executing the second window"); //Making sure second window executes
           
            
            /*Image Declaration*/

            button1 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key1));
            button1Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key11));
            button2 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key2));
            button2Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key21));
            button3 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key3));
            button3Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key31));
            button4 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key4));
            button4Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key41));
            button5 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key5));
            button5Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key51));
            button6 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key6));
            button6Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key61));
            button7 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key7));
            button7Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key71));
            button8 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key8));
            button8Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key81));
            button9 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key9));
            button9Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key91));
            button0 = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key0));
            button0Pressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Key01));
            done = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Done));
            donePressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Done1));
            backspace = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Backspace));
            backspacePressed = new Image(Demo.Resources.GetBitmap(Demo.Resources.BitmapResources.Backspace1));

            
            //StackPanel Declaration

            StackPanel row1 = new StackPanel(Orientation.Horizontal);
            row1.Children.Add(button1);
            row1.Children.Add(button2);
            row1.Children.Add(button3);
            row1.Children.Add(button0);
            StackPanel row2 = new StackPanel(Orientation.Horizontal);
            row2.Children.Add(button4);
            row2.Children.Add(button5);
            row2.Children.Add(button6);
            row2.Children.Add(backspace);
            StackPanel row3 = new StackPanel(Orientation.Horizontal);
            row3.Children.Add(button7);
            row3.Children.Add(button8);
            row3.Children.Add(button9);
            row3.Children.Add(done);
            StackPanel stackContainer = new StackPanel(Orientation.Vertical);
            stackContainer.Children.Add(row1);
            stackContainer.Children.Add(row2);
            stackContainer.Children.Add(row3);
            //StackPanel for pressed keys
            StackPanel pressedRow1 = new StackPanel(Orientation.Horizontal);
            pressedRow1.Children.Add(button1Pressed);
            pressedRow1.Children.Add(button2Pressed);
            pressedRow1.Children.Add(button3Pressed);
            pressedRow1.Children.Add(button0Pressed);
            StackPanel pressedRow2 = new StackPanel(Orientation.Horizontal);
            pressedRow2.Children.Add(button4Pressed);
            pressedRow2.Children.Add(button5Pressed);
            pressedRow2.Children.Add(button6Pressed);
            pressedRow2.Children.Add(backspacePressed);
            StackPanel pressedRow3 = new StackPanel(Orientation.Horizontal);
            pressedRow3.Children.Add(button7Pressed);
            pressedRow3.Children.Add(button8Pressed);
            pressedRow3.Children.Add(button9Pressed);
            pressedRow3.Children.Add(donePressed);
            StackPanel pressedStackContainer = new StackPanel(Orientation.Vertical);
            pressedStackContainer.Children.Add(pressedRow1);
            pressedStackContainer.Children.Add(pressedRow2);
            pressedStackContainer.Children.Add(pressedRow3);
            exactPositioning = new Canvas();
            Canvas.SetLeft(pressedStackContainer, 70);
            Canvas.SetBottom(pressedStackContainer, 10);
            exactPositioning.Children.Add(pressedStackContainer);
            Canvas.SetLeft(stackContainer, 70);
            Canvas.SetBottom(stackContainer, 10);
            exactPositioning.Children.Add(stackContainer);
            
            
            //Text declaration
            keypadScreen = new Text();
            keypadScreen.Font = Demo.Resources.GetFont(Demo.Resources.FontResources.small);
            keypadScreen.TextContent = total.ToString();
            Canvas.SetLeft(keypadScreen, 150);
            Canvas.SetTop(keypadScreen, 50);
            exactPositioning.Children.Add(keypadScreen);
            window.Child = exactPositioning;
            
            popUpWindow.Visibility = Visibility.Visible;

            //Stylus Event Handlers
            done.TouchDown += new TouchEventHandler(DoneClicked);
            done.TouchUp += new TouchEventHandler(DoneReleased);
            backspace.TouchDown += new TouchEventHandler(BackspaceClicked);
            backspace.TouchUp += new TouchEventHandler(BackspaceReleased);
            button0.TouchDown += new TouchEventHandler(ZeroClicked);
            button0.TouchUp += new TouchEventHandler(ZeroReleased);
            button1.TouchUp += new TouchEventHandler(OneReleased);
            button1.TouchDown += new TouchEventHandler(OneClicked);
            button2.TouchDown += new TouchEventHandler(TwoClicked);
            button2.TouchUp += new TouchEventHandler(TwoReleased); 
            button3.TouchDown += new TouchEventHandler(ThreeClicked);
            button3.TouchUp += new TouchEventHandler(ThreeReleased); 
            button4.TouchDown += new TouchEventHandler(FourClicked);
            button4.TouchUp += new TouchEventHandler(FourReleased); 
            button5.TouchDown += new TouchEventHandler(FiveClicked);
            button5.TouchUp += new TouchEventHandler(FiveReleased); 
            button6.TouchDown += new TouchEventHandler(SixClicked);
            button6.TouchUp += new TouchEventHandler(SixReleased); 
            button7.TouchDown += new TouchEventHandler(SevenClicked);
            button7.TouchUp += new TouchEventHandler(SevenReleased); 
            button8.TouchDown += new TouchEventHandler(EightClicked);
            button8.TouchUp += new TouchEventHandler(EightReleased); 
            button9.TouchDown += new TouchEventHandler(NineClicked);
            button9.TouchUp += new TouchEventHandler(NineReleased);

            //Threads for Modal Dialog
            DispatcherFrame modalBlock = new DispatcherFrame();

            popUpWindow.IsVisibleChanged += delegate{ModalVisibleChanged(modalBlock,popUpWindow.Visibility);};

            Dispatcher.PushFrame(modalBlock);

            popUpWindow.IsVisibleChanged -= delegate{ModalVisibleChanged(modalBlock,popUpWindow.Visibility);};

            popUpWindow.Close();

        }
        //Stylus Events
        private void DoneReleased(object sender, TouchEventArgs e)
        {
            UIElement test = (UIElement)sender;
            UIElement item = test.GetPointerTarget(e.Touches[0].X, e.Touches[0].Y);
            if (null == item)
            {
                return;
            }
            Debug.Print(item.ToString());
            if (item is Image)
            {
                done.Visibility = Visibility.Visible;
                donePressed.Visibility = Visibility.Hidden;
                exactPositioning.Invalidate();
            }
        }
        private void OneClicked(object sender, TouchEventArgs e)
        {
            keyVal = 1;
            CalculateValue(keyVal);
            button1.Visibility = Visibility.Hidden;
            button1Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void OneReleased(object sender, TouchEventArgs e)
        {
            button1.Visibility = Visibility.Visible;
            button1Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void TwoClicked(object sender, TouchEventArgs e)
        {
            keyVal = 2;
            CalculateValue(keyVal);
            button2.Visibility = Visibility.Hidden;
            button2Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void TwoReleased(object sender, TouchEventArgs e)
        {
            button2.Visibility = Visibility.Visible;
            button2Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void ThreeClicked(object sender, TouchEventArgs e)
        {
            keyVal = 3;
            CalculateValue(keyVal);
            button3.Visibility = Visibility.Hidden;
            button3Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void ThreeReleased(object sender, TouchEventArgs e)
        {   
            button3.Visibility = Visibility.Visible;
            button3Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void FourClicked(object sender, TouchEventArgs e)
        {
            keyVal = 4;
            CalculateValue(keyVal);
            button4.Visibility = Visibility.Hidden;
            button4Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void FourReleased(object sender, TouchEventArgs e)
        {
            button4.Visibility = Visibility.Visible;
            button4Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void FiveClicked(object sender, TouchEventArgs e)
        {
            keyVal = 5;
            CalculateValue(keyVal);
            button5.Visibility = Visibility.Hidden;
            button5Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void FiveReleased(object sender, TouchEventArgs e)
        {
            button5.Visibility = Visibility.Visible;
            button5Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void SixClicked(object sender, TouchEventArgs e)
        {
            keyVal = 6;
            CalculateValue(keyVal);
            button6.Visibility = Visibility.Hidden;
            button6Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void SixReleased(object sender, TouchEventArgs e)
        {
            button6.Visibility = Visibility.Visible;
            button6Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void SevenClicked(object sender, TouchEventArgs e)
        {
            keyVal = 7;
            CalculateValue(keyVal);
            button7.Visibility = Visibility.Hidden;
            button7Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void SevenReleased(object sender, TouchEventArgs e)
        {
            button7.Visibility = Visibility.Visible;
            button7Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void EightClicked(object sender, TouchEventArgs e)
        {
            keyVal = 8;
            CalculateValue(keyVal);
            button8.Visibility = Visibility.Hidden;
            button8Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void EightReleased(object sender, TouchEventArgs e)
        {
            button8.Visibility = Visibility.Visible;
            button8Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void NineClicked(object sender, TouchEventArgs e)
        {
            keyVal = 9;
            CalculateValue(keyVal);
            button9.Visibility = Visibility.Hidden;
            button9Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void NineReleased(object sender, TouchEventArgs e)
        {
            button9.Visibility = Visibility.Visible;
            button9Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void ZeroClicked(object sender, TouchEventArgs e)
        {
            keyVal = 0;
            CalculateValue(keyVal);
            button0.Visibility = Visibility.Hidden;
            button0Pressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void ZeroReleased(object sender, TouchEventArgs e)
        {
            button0.Visibility = Visibility.Visible;
            button0Pressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void BackspaceClicked(object sender, TouchEventArgs e)
        {
            RemoveLastPressed();
            backspace.Visibility = Visibility.Hidden;
            backspacePressed.Visibility = Visibility.Visible;
            exactPositioning.Invalidate();
        }
        private void BackspaceReleased(object sender, TouchEventArgs e)
        {
            backspace.Visibility = Visibility.Visible;
            backspacePressed.Visibility = Visibility.Hidden;
            exactPositioning.Invalidate();
        }
        private void DoneClicked(object sender, TouchEventArgs e)
          {
              done.Visibility = Visibility.Hidden;
              donePressed.Visibility = Visibility.Visible;
              popUpWindow.Invalidate(); 
              popUpWindow.Visibility = Visibility.Hidden;
              

          }
        private void ModalVisibleChanged(DispatcherFrame Block, Visibility visibility)
        {
            if (visibility != Visibility.Visible)
            {
                Block.Continue = false;
            }
        }
        //This will write characters to the 'display' while placing the next value to the right
        public void CalculateValue(int val)
        {
            int value;
            
            value = val;
            try
            {
                if (count <= -1)
                {
                    count = 0;
                    keysPressed[count] = value;
                    Debug.Print(" Count Reset to 0");
                }
            }
            catch
            {
                Debug.Print(count.ToString());
                Debug.Print("I don't like this. Close the window and try again.");
            }
            total = total * 10 + val;
            keypadScreen.TextContent = total.ToString();
            ++count;
            exactPositioning.Invalidate();

        }
        //Code for the backspace button to delete the last value pressed
        public void RemoveLastPressed()
        {
           
           Debug.Print(count.ToString());
           if (count != 0)
           {
               try
               {
                   total = total - keysPressed[count];
               }
               catch 
               {
                   Debug.Print("Enter a number first you dummy!");
                   //count = 0;
               }
           }
           total = total / 10;
           Debug.Print(keyVal.ToString());
           keypadScreen.TextContent = total.ToString();
           --count; //might throw array out of bounds exception
           exactPositioning.Invalidate();
        }
      
    }
}