WPF - Canvas_MouseLeftButtonDown event

Question

Greetings

I started developing with WPF yesterday and have ran into some issues. I came to the understanding that a Canvas was the equivalent to a Panel in WinForms. However I'm running into some difficulties with the 'click' event. The MouseLeftButtonDown event. If it's relevant or not, this Image and the Canvasses are in a UserControl

The above image is basically what I am having difficulties with. The 3 images you see is one image. The squares you see are each different canvases. Depending on what canvas is clicked i want something different to happen.

Currently i have the following code:

<Grid>
    <Canvas Name="canvasTerran"  Height="27" Width="26" Margin="88,106,134,106" MouseLeftButtonDown="canvasTerran_MouseLeftButtonDown" />
    <Canvas Name="canvasZerg" Height="27" Width="26" Margin="117,107,105,107" MouseLeftButtonDown="canvasZerg_MouseLeftButtonDown" />
    <Canvas Name="canvasProtoss" Height="27" Margin="145,107,88,107" MouseLeftButtonDown="canvasProtoss_MouseLeftButtonDown" />
    <Image Name="imageRaces" Height="27" Width="73" Stretch="Fill" Source="pack://application:,,,/Images/Races/Races.png" />
</Grid>

When I run the application (the user control is in the main window ofcourse) and I click where the canvasses should be nothing happens. The event I'm trying to fire:

 private void canvasTerran_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            MessageBox.Show("lolterran", "lol");

            // image on main window
            // .Source = new BitmapImage(new Uri("pack://application:,,,/" + Constants.RACESPATH + "T.png"));
        }

I don't really see what I'm doing wrong here so any suggestions would be welcome. As I said I'm new to WPF so if you think there is a better way than I'm currently trying please do say so!

Thanks in advance.

Answer 1

The actual problem is that the canvases are transparent. Thus, all the events do not halt at canvas, but they are generated for its parent element.

If you set Background=White or Red for example for a canvas, it should get MouseLeftButtonDown.

Answer 2

Your Image hides the canvases so in the XAML declare the canvases after you declare the image, so in the UI they will be in front of it and the the Click will take effect.

Tip: Give the canvas Background colors just to see how they render themselves in the UI. When you do that u can see that the image hides them.