How to visit the views of carouselview different item ?

Fei Xu 490

webview will display embed youtube video

I need user webview.EvaluateJavaScriptAsync to control the video.

Then, how can i visit the webview of different items ?


<CarouselView Grid.Row="2" x:Name="cView" ItemsSource="{Binding Monkeys}" PositionChanged="cView_PositionChanged"  CurrentItemChanged="cView_CurrentItemChanged">


  <CarouselView.ItemsLayout>

      <LinearItemsLayout SnapPointsType="MandatorySingle"  Orientation="Vertical"/>          

  </CarouselView.ItemsLayout>

  <CarouselView.ItemTemplate>

      <DataTemplate>           

              <Grid RowDefinitions="*,30,40,30">

              <WebView x:Name="webView" Grid.Row="0" Source="{Binding YouTubeVideoUrl}" Loaded="webView_Loaded" Focused="webView_Focused" Unfocused="webView_Unfocused">                    

              </WebView>

            <Label Grid.Row="1" Text="{Binding Name}" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Start"></Label>

                <Label Grid.Row="2" Text="{Binding Details}"/>

                <Label Grid.Row="3" Text="8m ago" TextColor="Gray"/>

            </Grid>            

    </DataTemplate>

</CarouselView.ItemTemplate>
```</CarouselView>

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,306 Reputation points Microsoft Vendor

2024-04-29T07:46:24.34+00:00
I need user webview.EvaluateJavaScriptAsync to control the video.

We cannot control the youtobe video by JS. For android, you can use webview.OnPause to stop the webview, to re-start the video by webview.OnResume() with handler like following code.

Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) => { #if ANDROID // you can stop the video. handler.PlatformView.OnPause(); // you can re-play the video by handler.PlatformView.OnResume() #endif });

how can i visit the webview of different items ?

Do you want to change the displayed item in the CarouselView at the runtime?
Fei Xu 490 Reputation points

2024-04-29T09:10:17.7866667+00:00

Do you want to change the displayed item in the CarouselView at the runtime?

I think so , change the webview of displayed item .

I mean i can't get the webview object of CarouselView items .

I only can modify the data of itemsource, but that not enough .

By the way , Iframe youtube api of google can be used to control play , If webview can run js , why it can't control play ?
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,306 Reputation points Microsoft Vendor

2024-04-29T09:50:29.38+00:00

Yes, you cannot get the webview object of CarouselView items. Based on your xaml code, you can change the source of webview.

I only can modify the data of itemsource, but that not enough

Could you share more information about your needs?

Iframe youtube api of google can be used to control play , If webview can run js , why it can't control play ?

Do you use this kind of url in the webview? I check the HTML page of the url, I cannot find the javascript:playVideo() or javascript:stopVideo(), it is hidded.
Fei Xu 490 Reputation points

2024-04-29T12:56:38.06+00:00
Yes, you cannot get the webview object of CarouselView items. Based on your xaml code, you can change the source of webview.

I know i can change the source of webview, but i need execute webview.EvaluateJavaScriptAsync function. How can i do it?

what about CarouselView.VisibleViews ?

VisibleViews, of type ObservableCollection<View>, which is a read-only property that contains the objects for the items that are currently visible.

I can get webview object, using the following code

var itemgrid = cView.VisibleViews[0] as Grid;

var itemwebview = itemgrid.Children[0] as WebView;

but VisibleViews sometimes have one value or more values.

If it is item that are currently visible , should be one value only.

Could you share more information about your needs?

https://developers.google.com/youtube/iframe_api_reference

This API can control playback through JavaScript
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,306 Reputation points Microsoft Vendor

2024-04-30T07:46:25.4233333+00:00
but VisibleViews sometimes have one value or more values.

Can you add a button in the layout, then get the VisibleViews count by var views=cView.VisibleViews.Count; in the background button click event code. I make a test with following code. It always shows 1 record in the var views=cView.VisibleViews.Count;

private void Button_Clicked(object sender, EventArgs e) { var views=cView.VisibleViews.Count; DisplayAlert("info",views.ToString(),"Ok"); }

https://developers.google.com/youtube/iframe_api_reference

Did you create a web page with above API and add the JS code in the web page?
Fei Xu 490 Reputation points

2024-04-30T15:22:42.6066667+00:00

In event CurrentItemChanged I got two visibleviews.

Otherwise, I can correspond the item and the view

Did you create a web page with above API and add the JS code in the web page?

yes i have solved this problem, use webview can execute the js .
Fei Xu 490 Reputation points

2024-04-30T15:33:51.7133333+00:00

I got two.

otherwise i can correlation item and view.

Did you create a web page with above API and add the JS code in the web page? Yes
Fei Xu 490 Reputation points

2024-05-06T09:41:32.15+00:00

Leon Lu , are you still there ?
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,306 Reputation points Microsoft Vendor

2024-05-07T06:38:01.6666667+00:00

Yes, I can reproduce this issue now, you get same result in the CurrentItemChanged , VisibleViews will contains two layout, the first one is previous item layout, the second one is current item layout.

But if I get VisibleViews in the button click event, I always get only one item.

1 answer

Digital Iflextech 0 Reputation points

2024-05-01T08:12:35.9666667+00:00

To explore the various views of a CarouselView, akin to exploring different items in a carousel, you can follow these steps using organic cosmetics as an analogy:

Start with a Selection: Just as you would begin by selecting a carousel to explore, choose your starting point among the organic cosmetics available. This could be a natural face wash, a herbal shampoo, or an organic moisturizer.

Swipe or Navigate: Similar to swiping or navigating through a carousel to view different items, you can explore various organic cosmetic products by swiping through the options available. Move from one product to another to see their unique features and benefits.

Pay Attention to Details: As you swipe through each organic cosmetic item, pay attention to its details, just like examining the different views in a carousel. Note the ingredients, scent, texture, and any special properties or benefits it offers for your skin or hair.

Evaluate Each Option: Take the time to evaluate each organic cosmetic product you encounter. Consider factors such as your skin type, preferences, and specific needs to determine if a particular item aligns with your requirements.

Compare and Contrast: Just as you might compare different views in a carousel to decide which one you prefer, compare and contrast the organic cosmetics you've explored. Assess their effectiveness, quality, and overall appeal to find the best fit for your skincare or haircare routine.

Make Informed Choices: Finally, based on your exploration and evaluation, make informed choices about the organic cosmetics you wish to try or purchase. Select the ones that resonate with you and align with your values of using natural, chemical-free products for beauty and wellness.

By following these steps, you can effectively visit the views of a CarouselView, or explore different organic cosmetic items, and make informed decisions to enhance your skincare and beauty regimen.
Please sign in to rate this answer.
Fei Xu 490 Reputation points

2024-05-06T09:40:58.93+00:00

What are you talking about ? for AD ?
Sign in to comment

Share via

How to visit the views of carouselview different item ?

1 answer