Mouse events not firing in Windows WPF

Question

I have a simple WPF application

<Grid>
    <Border BorderBrush="Black" BorderThickness="1" 
            HorizontalAlignment="Left" Height="388" Margin="10,10,0,0" VerticalAlignment="Top" Width="329"/>
    <Image x:Name="PreviewImg" HorizontalAlignment="Left" Height="400" Margin="10,10,0,0" VerticalAlignment="Top" Width="329"       MouseDown="PreviewImgMouse" AllowDrop="True" PreviewMouseWheel="PreviewImg_PreviewMouseWheel" MouseEnter="Entered"       Focusable="True"></Image>
    <Label Content="Matched Products" HorizontalAlignment="Left" Margin="344,10,0,0" VerticalAlignment="Top" Width="290"/>
    <Label Content="Unknown Products" HorizontalAlignment="Left" Margin="661,10,0,0" VerticalAlignment="Top" Width="290"/>
    <TextBlock x:Name="MatchedProducts" HorizontalAlignment="Left" Margin="349,36,0,0" TextWrapping="Wrap" Text="TextBlock"           VerticalAlignment="Top" Height="362" Width="295"/>
    <TextBlock x:Name="UnknownProducts" HorizontalAlignment="Left" Margin="666,36,0,0" TextWrapping="Wrap" Text="TextBlock"           VerticalAlignment="Top" Height="362" Width="295"/>
    <Grid HorizontalAlignment="Left" Height="50" Margin="10,410,0,0" VerticalAlignment="Top" Width="957">
        <Button x:Name="FinalizeBtn" Content="Finalize" HorizontalAlignment="Left" Margin="826,10,0,0" VerticalAlignment="Top"        Width="120" Height="30"/>
        <Button x:Name="NewEntryBtn" Content="Create new entry" HorizontalAlignment="Left" Margin="701,10,0,0"
                VerticalAlignment="Top" Width="120" Height="30"/>
        <Button x:Name="FreeBtn" Content="Free Button" HorizontalAlignment="Left" Margin="576,10,0,0" VerticalAlignment="Top"        Width="120" Height="30"/>
    </Grid>
</Grid>

All the events defined under the Image component are not firing, I tried all of googles first page searches, but none of them work.

I read about the difference of Routed events in my application both MouseDown and PreviewMouseDown should work.

The only thing that can block the image is Border component, but I did try without it and still nothing, and since it is declared first the image should overlay it...?

All function names are correct since they were automatically generated.

I can paste in the .cs file if it can help.

Thanks

E1: Somehow it works now, but I have no idea what fixed it... One change I did was mode the image inside the border:

<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="388" Margin="10,10,0,0" VerticalAlignment="Top" Width="329">
    <Image x:Name="PreviewImg" Height="400" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="329" MouseDown="PreviewImgMouse" AllowDrop="True" PreviewMouseWheel="PreviewImg_PreviewMouseWheel" MouseEnter="Entered" Focusable="True"/>
</Border>

But I can't image that this fixed it.

Instead of using MouseDown="PreviewImgMouse", try using click="PreviewImgMouse" instead. — Richard, Sep 01 '18 at 16:24
The other option is to place the image in a button and remove the button styles. I've seen this on here somwhere. Will post a link in a sec. — Richard, Sep 01 '18 at 16:39

score 0 · Answer 1 · answered Sep 01 '18 at 16:27

0

You need to define a source for your image like <Image Source="image.jpg". Without the image the events will not fire.

answered Sep 01 '18 at 16:27

IceCode

1,466
13
22

Oh wow, that is dumb, What if I want to click on the component to let the user select the source ? (Adding a transparent image, if that is even possible, is not the solution I hope you suggest ;)) – MoonKillCZ Sep 01 '18 at 16:30
You would need to open a filedialog and get the selected image path and add it as the image source in the codebehind cs. file. – IceCode Sep 01 '18 at 16:39
You could also set the mouse events on the boarder element itself. – IceCode Sep 01 '18 at 16:41
I know about dialogs, but I want to trigger it by clicking in the empty Image component. I tried adding events to the border, but that fires only when I touch the black border pixels – MoonKillCZ Sep 01 '18 at 16:47

score 0 · Accepted Answer · edited Oct 11 '22 at 18:00

0

For advanced users

Use a Button styled as an Image, see @Richard's answer with WPF Image Control with Click event

For beginners

The Image component needs a source to fire events as posted by @Örvar. Adding a transparent source is the solution, although a hacky one.

edited Oct 11 '22 at 18:00

miken32

42,008
16
111
154

answered Sep 01 '18 at 17:05

MoonKillCZ

71
7

Another little hack is to set the image opacity to 0 ` – IceCode Sep 01 '18 at 17:14

score -1 · Answer 3 · answered Sep 01 '18 at 16:42

-1

One way of achieving what you want is to place the image in a button and removing the button styles. There is an excellent example here:

WPF Image Control with Click Event

answered Sep 01 '18 at 16:42

Richard

439
3
25

I found this article too, but since this is literally my first day of WPF (Yaay), I do not want to get into advanced stuff right away, and just copying a bunch of code is not giving me anything. Knowledge wise. – MoonKillCZ Sep 01 '18 at 16:50
Haha, fair enough. With WPF if something doesn't work that should, rebuild is often your friend. It fixes so many issues. – Richard Sep 01 '18 at 16:58

Mouse events not firing in Windows WPF

3 Answers3