How to change background color of WebView on SelectionChanged event of CollectionView

Question

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 change background color of selected item using VisualStateManager.VisualStateGroups

But Even if I tried lot the WebView Background color is not at all changing while all other entire items color change.

Will you have any solution.

<CollectionView>

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

I have tried with

1- changing background color of Parent but in this condition also Entire item color change but Webview color not changed

2-I tried with setting trigger to parent control still its not applied

<Grid.Triggers>


<!-- Apply DataTrigger only to the Grid based on the selection -->

<DataTrigger TargetType="Grid"

    Binding="{Binding IsSelected, Source={RelativeSource AncestorType={x:Type CollectionView}}, Mode=OneWay}"

     Value="True">

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

</DataTrigger>
</Grid.Triggers>

Answer 1

Hello,

How to change background color of WebView on SelectionChanged event of CollectionView

Because each time you tap the item in CollectionView, you can just select the outer Grid which has been defined in DataTemplate. Then webview background color won't change as it doesn't receive a state change.

You can add a style in the current contentpage's Resources.

<ContentPage.Resources>
<Style TargetType="StackLayout">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
 
                         <VisualState Name="Normal">
 
                             <VisualState.Setters>
 
                                 <Setter TargetName="myWebview" Property="WebView.Background" Value="White" />
 
                             </VisualState.Setters>
 
                         </VisualState>
 
                         <VisualState Name="Selected">
 
                             <VisualState.Setters>
 
                             <Setter TargetName="myWebview" Property="WebView.Background" Value="#E1E1E1" />
 
                             </VisualState.Setters>
 
                         </VisualState>
 
                     </VisualStateGroup>
</VisualStateGroupList>
 
 
          
 
         </Setter>
</Style>
</ContentPage.Resources>

Note: In DataTemplate of CollectionView, remember to set the name of the Webview to "myWebview" as we used it in the ContentPage.Resources.

By the way, if you put grid in the DataTemplate directly, when you selected it, the default selected orange color will appear, so I use <StackLayout> to wrap it.

  <CollectionView ItemsSource="{Binding Models}" SelectionMode="Single">
 
                <CollectionView.ItemTemplate>
 
                    <DataTemplate>
<StackLayout BackgroundColor="White">
<Grid>
 
 
                                <Label TextType="Html" FontSize="22" 
Padding="5"  LineHeight="1.5" LineBreakMode="WordWrap" Margin="2"
 
Text="{Binding DisplayForWebView}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  />
 
 
                                <WebView  x:Name="myWebview"   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>
</StackLayout>

 
                    </DataTemplate>
</CollectionView.ItemTemplate>
 
            </CollectionView>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.