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.