Tapped Image inside a ListViewItem UWP C#

Question

I have a listView that has an Image in every listViewItem. I have 2 events: ItemClick on the ListView and Tapped on the Image. By default isItemClickEnabled is false in the listView, when it is false: the tap Image event works but not the ItemClick. When I set it to true: I tried setting e.OriginalSource in the ItemClick event, but it is always a ListView even when click on the Image: ItemClick works but not the tap Image event.

ItemClick event:

private void listView_ItemClick(object sender, ItemClickEventArgs e)
        {
            if (e.OriginalSource is Image)
                (e.OriginalSource as Image).Tapped += image_Tapped;
            else
                Frame.Navigate(typeof(nextPage), e.ClickedItem as Prayer);
        }

Anything I'm doing wrong?

e.OriginalSource will always be ListView, when you tap on image also.And image tap won't work when itemclick is enabled. Please explain the scenario do that I can help you — Archana, Jun 04 '16 at 09:31
I just need to be able to click on the Image and fire the Image_Tapped event and when I click on any other element in the ListViewItem the ItemClick (or SelectionChanged) event of the ListView will be fired. 2 different events. Is that possible? — yalematta, Jun 04 '16 at 09:40
Why don't you have a tapped event handler in the image itself? You can get the datacontext of the tapped image if you require it. — AbsoluteSith, Jun 04 '16 at 09:43
@AbsoluteSith I am using the DataContext of the TappedImage inside the Image_Tapped event but this is not my problem. The ImageTapped event is not being fired when the ItemClick is enabled or SelectionChanged ListView event is set. I want both events to fire. One when I tap the image inside the ListViewItem and one when I tap anything else in the listViewItem. — yalematta, Jun 04 '16 at 09:48
How about you completely remove the listviews ItemClick and assuming you have a grid/stackpanel inside the DataTemplate then you could handle the tapped event handler for the grid/stackpanel. This might be an alternative solution — AbsoluteSith, Jun 04 '16 at 10:15
Or you can try button with content as image instead of image control — Archana, Jun 04 '16 at 14:47

TheSETJ · Answer 1 · 2016-12-28T10:27:38.253

You can use a trick to achieve this purpose. Place a Button on top of your Image to capture Click or Tapped event. First, You need to wrap your Image and Button in a Grid and then set Button's Opacity to "0" and its VerticalAlignment and HorizontalAligment to "Stretch".

<Grid x:Name="ImageWrapper">
  <Image
    x:Name="Image" />
  <Button
    x:Name="ImageTapCaptureButton"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    Opacity="0"
    Tapped="Image_Tapped" />
</Grid>

Note: Button should be after Image in XAML because it needs to be on top of Image.

With this, you don't need to set IsItemClickEnabled to "False" and if you click anywhere out of your Image, it will trigger ItemClick event.

Tapped Image inside a ListViewItem UWP C#

1 Answers1