handle click event outside of button

Question

I am trying to practice c# by reproduce an App that is in the Apple AppStore.

In the app, there is a rectangle with the text: "Touch me". When you touch it, the rectangle repositions itself.

After you do this a few times, the text changes to "Do not Touch me". In that case you have to Touch outside of the rectangle.

It all went well, up to the point where you have to touch outside the rectangle.

Here is my event handler:

    private void Canvas_MouseLeftButtonDown_1(object sender, MouseButtonEventArgs e)
    {
        if (click == 0)
        {
            if (rectangle1.IsMouseOver || textBlock1.IsMouseOver)
            {
               // reposition and stuff
                if (clicks == 10)
                {
                    // Change the value of the variable click to 1 
                    click = 1;
                    textBlock1.Text = "Do Not Click me";
                    Canvas.SetLeft(textBlock1, 200);
                }
            }
        }
        else
        {
            if (rectangle1.IsMouseOver || textBlock1.IsMouseOver)
            {
                // Game Over
                this.Close();
            } else
            {
                // reposition and stuff

                click = 0;
                textBlock1.Text = "Click me";
                Canvas.SetLeft(textBlock1, 225);
            }
        }
    }

The program works perfectly up to the point where you have to click outside the rectangle.

The program closes when you click on the rectangle but when you click outside it, nothing happens. Is there any event-handler that can do the task i want?

Here is my xaml

<Window x:Class="ClickMe.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="510" Width="525" ResizeMode="NoResize">
<Canvas Name="canvas" MouseLeftButtonDown="Canvas_MouseLeftButtonDown_1">
    <Rectangle Fill="#FFF4F4F5" Name="rectangle1" HorizontalAlignment="Left" Height="38" Stroke="Black" VerticalAlignment="Top" Width="509" Canvas.Left="0" Canvas.Top="63"/>
    <Label Name="label1" Content="0" Canvas.Left="57" Canvas.Top="446"/>
    <Label Content="Klicks:" Canvas.Left="10" Canvas.Top="446"/>
    <TextBlock Name="textBlock1" Canvas.Left="225" TextWrapping="Wrap" Text="Click Me" Canvas.Top="74" Margin="10,0,0,0"/>

</Canvas>

Answer 1

You really just need to set the Background of the Canvas, as it only gets mouse input where it has "rendered content". The background could even be transparent:

<Canvas Name="canvas" Background="Transparent"
        MouseLeftButtonDown="Canvas_MouseLeftButtonDown_1">
    ...
</Canvas>

Answer 2

Canvas is a UIElement. This allows the use of the PointerPressed event.

private void Target_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    Windows.UI.Xaml.Input.Pointer ptr = e.Pointer;

    if (ptr.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse)
    {

        Windows.UI.Input.PointerPoint ptrPt = e.GetCurrentPoint(Target);
        if (ptrPt.Properties.IsLeftButtonPressed)
        {
            //do yo thang
        }
    }
}

Answer 3

use this instead of Canvas_MouseLeftButtonDown_1 event:

protected override OnMouseDown(MouseButtonEventArgs e)
{
    if(e.Changed == MouseButton.Left)
      {
    // Your logic on mouse down will go here
      }
    base.OnMouseDown(e);
}

with this you can click anywhere on the canvas and get the event to fire. I hope this helps..