How to fire SelectionChanged event of CollectionView on WebView click

Faiz Quraishi 145 Reputation points
2024-09-26T09:27:39.1533333+00:00

I am using Visual Studio 2022 and maui 8.0 and API level 33

I have collectionView and inside it I have Label and WebView .

I have written SelectionChanged Event as well.

When I am trying to click Data at WebView SelectionChanged does not fire

but when clicking data at Label or other than Webview content its fire properly.

Will you have any solution.

<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" />

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

<WebView.Source>

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

</WebView.Source>

</WebView>

<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>

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,528 questions
{count} votes

1 answer

Sort by: Most helpful
  1. youzeliang 735 Reputation points
    2024-09-27T06:48:35.9666667+00:00

    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!

    1 person found this answer helpful.
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.