Canvas mouse events don't work wpf

Question

I have the following ObservableCollection: `

private ObservableCollection<Grid> m_streams = new ObservableCollection<Grid>();

public ObservableCollection<Grid> Streams
{
    get { return m_streams; }
    set
    {
        m_streams = value;
        OnPropertyChanged();
    }
}

I also have a Command which adds a new Grid with Canvas to the list of Streams:

private void AddCanvas(object parameter)
{
    var newGrid = new Grid { Name = "Grid_No_" + Streams.Count + 1 };
    var newCanvas = new Canvas { Name = "Canvas_No_" + Streams.Count + 1, Background = Brushes.Cyan};

    newCanvas.MouseDown += MouseClick;
    newCanvas.MouseMove += MouseMove;
    newCanvas.MouseUp += MouseClick;

    newGrid.Children.Add(newCanvas);

    Streams.Add(newGrid);
}

And finally, I have the following MouseClick event function:

private static void MouseClick(object sender, MouseButtonEventArgs mouseButtonEventArgs)
{
      MessageBox.Show("Working");
}

This flow works perfectly.

However, if I change the AddStream function by adding an Image to the Grid, like this:

private void AddCanvas(object parameter)
{
    var newGrid = new Grid { Name = "Grid_No_" + Streams.Count + 1 };
    var newCanvas = new Canvas { Name = "Canvas_No_" + Streams.Count + 1 };
    var newImage = new Image { Name = "Image_No_" + Streams.Count + 1, Source = new BitmapImage(new Uri(@"C:\SomeImage.jpg")) };

    newCanvas.MouseDown += MouseClick;
    newCanvas.MouseMove += MouseMove;
    newCanvas.MouseUp += MouseClick;

    newGrid.Children.Add(newImage);
    newGrid.Children.Add(newCanvas);

    Streams.Add(newGrid);
}

Then, the Image is shown as expected, but the MouseClick function is no longer called when I'm clicking anywhere on the Canvas.

What am I missing here?

Answer 1

Your canvas has to have Background set to Brushes.Transparent for hit testing to work properly.