How to fire SelectionChanged event of CollectionView on WebView click

The issue you’re facing occurs because the WebView control typically intercepts touch events, which prevents the CollectionView‘s SelectionChanged event from firing when the WebView is clicked. Since WebView is a more interactive element (handling gestures, scrolling, etc.), it captures the input and doesn’t propagate it to the CollectionView.

To solve this, you can make WebView non-interactive for selection purposes while keeping it functional for displaying the content. This can be achieved by disabling interaction within the WebView for the selection context.

Solution 1: Use a TapGestureRecognizer or Wrapper

You can use a TapGestureRecognizer on the parent container or a wrapper around the WebView and handle selection manually. This way, the user can select the item even when interacting with the WebView content.

Here is an example of how to wrap the WebView and add a TapGestureRecognizer to trigger the selection event:

<CollectionView SelectionMode="Single" SelectionChanged="ListOfContents_SelectionChanged">

<CollectionView.ItemTemplate>

    <DataTemplate>

        <Grid>

            <Label TextType="Html" FontSize="22"

                   Padding="5" LineHeight="1.5" LineBreakMode="WordWrap" Margin="2"

                   Text="{Binding DisplayForWebView}" 

                   HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

            

            <Grid>

                <Grid.GestureRecognizers>

                    <TapGestureRecognizer Command="{Binding Source={x:Reference MyCollectionView}, Path=BindingContext.ItemSelectedCommand}" 

                                          CommandParameter="{Binding}" />

                </Grid.GestureRecognizers>

                <WebView Margin="0" VerticalOptions="StartAndExpand">

                    <WebView.Source>

                        <HtmlWebViewSource Html="{Binding DisplayForWebView}" />

                    </WebView.Source>

                </WebView>

            </Grid>

            <VisualStateManager.VisualStateGroups>

                <VisualStateGroup>

                    <VisualState Name="Normal">

                        <VisualState.Setters>

                            <Setter Property="BackgroundColor" Value="White" />

                        </VisualState.Setters>

                    </VisualState>

                    <VisualState Name="Selected">

                        <VisualState.Setters>

                            <Setter Property="BackgroundColor" Value="#E1E1E1" />

                        </VisualState.Setters>

                    </VisualState>

                </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>

        </Grid>

    </DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

Explanation:

1.	TapGestureRecognizer: A TapGestureRecognizer is added around the WebView using a Grid. This captures the tap event and can invoke the selection manually by using a command.

2.	CommandParameter: The CommandParameter passes the selected item (the Binding context) to your command handler in the view model or code-behind.

You can then handle the selection in the view model or code-behind.

Solution 2: Disable Interaction on WebView (if needed)

If you only want the WebView for displaying content and don’t need users to interact with it (e.g., clicking links or scrolling), you can make the WebView non-interactive by disabling input gestures. However, this would make the WebView static and unresponsive to user interaction.

<WebView Margin="0" VerticalOptions="StartAndExpand" IsHitTestVisible="False">

<WebView.Source>

    <HtmlWebViewSource Html="{Binding DisplayForWebView}" />

</WebView.Source>

</WebView>

•	IsHitTestVisible="False": This property ensures that the WebView does not intercept any input events, allowing the SelectionChanged event of the CollectionView to fire properly. However, this makes the WebView completely non-interactive.

Conclusion:

•	If you want the WebView to remain interactive, using a TapGestureRecognizer is a good solution to handle selection.

•	If the WebView doesn’t need to handle interaction, you can set IsHitTestVisible to False to ensure the SelectionChanged event works correctly when the WebView is clicked.

Let me know if you need further clarifications or adjustments!

If my answer is helpful to you, you can adopt it, thank you！