How to determine which child element of a ListView Item was clicked?

Question

I'm developing a windows phone 8.1 app in XAML and C#. I have a ListView getting its Items from a bound list and displaying them through a DataTemplate. Now, in this DataTemplate there are multiple child elements, and when the user taps on an item in the list, I want to be able to determine what child element he actually touched. Depending on that, the app should either expand a view with more details inside the Item, or navigate to another page.

The ItemClick event handler of the ListView is ListView_ItemClick(object sender, ItemClickEventArgs e), and I thought e.OriginalSource would maybe give me the answer, but this just gave me the clicked ListItem.

I have yet to try if encapsulating the children with buttons and intercepting their click events would work, but I'm happy to try any alternative there might be for this.

Answer 1

I just found the solution myself. I set the ListView to SelectionMode="None" and IsItemClickEnabled="False", and then I added Tapped handlers for the individual child elements. Works just as I wanted.

Answer 2

I've got a TextBlock and an Image in one ListViewItem and have just used the Image_PointerPressed event. Doing that also fires the ItemClick event for the ListView so I disable it first, do the stuff I want, then re-enable the ItemClick event so that still fires when the TextBlock is pressed.

Code behind:

private async void imgDone_PointerPressed(object sender, PointerRoutedEventArgs e)
    {

        // disable click event so it won't fire as well
        lvwCouncils.IsItemClickEnabled = false;

        // do stuff
        MessageDialog m = new MessageDialog("User Details");
        await m.ShowAsync();

        // Re-enable the click event
        lvwCouncils.IsItemClickEnabled = true;
    }

Xaml:

 <ListView x:Name="lvwCouncils" ItemClick="lvwCouncils_ItemClicked"  IsItemClickEnabled="true" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock
                    Grid.Column="1"
                    Text="{Binding council_name}"
                    FontSize="24"
                    Margin="10,10,30,10"
                                    />
                        <Border Height="20" Width="20" Margin="10,10,0,10" >
                            <Image x:Name="imgDone" 
                                   Source="Assets/user_earth.png" Stretch="UniformToFill" PointerPressed="imgDone_PointerPressed"/>
                        </Border>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Answer 3

Use the SelectionChanged event.

Cast the sender object to ListView type and then retrieve the item from the SelectedItem property.

Similar question here but for a different control :

Get the index of the selected item in longlistselector