Mouse-down event not working on Canvas control in my wpf application

Question

I am following MVVM for my wpf application project and creating different views/usercontrols for different tab control items,reading data from a Restful API.Why does my Mousedownclick event on the canvas control is not working for this view?Any help is highly appreciated.When I enter and click different canvas controls the text in the "textbox" should change accordingly. Note:Even Mouseenter is also not working?

XAML

<UserControl x:Class="ISTE.Views.Resources"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ISTE.Views"
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="1300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="400"/>
        </Grid.ColumnDefinitions>

        <Button  Grid.Column="0" Name="go" Click="Button_Click" Margin="56,68,714,506" Grid.ColumnSpan="2"   >RIT Website</Button>
        <StackPanel  Grid.Column="1">
            <WebBrowser Height="600px"  x:Name="ritwebsite" Margin="117,0,254,0"/>
        </StackPanel>

        <Canvas  Grid.Column="2" Height="400" Width="400">
            <Canvas Name="studyAbroad" MouseDown="studyAbroad_MouseDown" Height="132" Width="136" Canvas.Top="10" Canvas.Left="10" Background="Blue"/>
            <Canvas Name="studentServices" MouseDown="studyAbroad_MouseDown" Height="150" Width="154" Canvas.Top="200" Canvas.Left="208" Background="SkyBlue"/>
            <Canvas Name="studentAmbassadors" MouseDown="studyAbroad_MouseDown" Height="150" Width="158" Canvas.Top="100" Canvas.Left="100" Background="DarkBlue"/>
        </Canvas>
        <TextBlock Grid.Column="2" x:Name="res"><Run Text="ADJH"/><InlineUIContainer>
                <TextBox x:Name="textBox" Height="51" TextWrapping="Wrap" Text="TextBox" Width="172" RenderTransformOrigin="0.924,8">
                    <TextBox.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="-1"/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </TextBox.RenderTransform>
                </TextBox>
            </InlineUIContainer></TextBlock>
    </Grid>
</UserControl>
----------------------------------------------------------------------------
CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using ISTE.ViewModels;
using ISTE.Models;

namespace ISTE.Views
{
    /// <summary>
    /// Interaction logic for Resources.xaml
    /// </summary>
    public partial class Resources : UserControl
    {
        ResourcesVM vm;
        public Resources()
        {
            InitializeComponent();
            vm = new ResourcesVM();
            this.DataContext = vm;

            vm.GetData();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {


            this.ritwebsite.Navigate(new Uri("https://www.rit.edu"));
        }



        private void studyAbroad_MouseDown(object sender, MouseButtonEventArgs e)
        {
            {
                var b = sender as Canvas;
                var selected = b.Name;
                var resselected = b.Name.ToString();

                if (resselected == "studyAbroad")
                {
                    res.Text = "";
                    res.Text = vm.ItemData.studyAbroad.description;

                }
                else if (resselected == "studentServices")
                {
                    res.Text = "";
                    res.Text = vm.ItemData.studentServices.title;
                }
                else
                {
                    res.Text = "";
                    res.Text = vm.ItemData.studentAmbassadors.title;

                }


                /*   foreach (Place p in vm.ItemData.studyAbroad.places)
                   {
                       if (p.nameOfPlace == selected)
                       {
                           textBox.Text = "";
                           textBox.Text = p.description + "\n\n";
                           Console.WriteLine("places \t" + p.nameOfPlace);
                       }

                   }*/

            }
        }
    }
}

Answer 1

This is simple enough, and actually has nothing to do with MVVM at all.

Look at the XAML definition, your TextBlock is taking up all available space of the 2nd column, the canvases are beneath it so they can not respond to the mouse clicks.

Set a decent size to the TextBlock and move it to one of the corners can solve your problem.

Or you can recorder the Z-Order of the controls, first the TextBlock, then the canvases.