question

StefanoM-9408 avatar image
0 Votes"
StefanoM-9408 asked StefanoM-9408 action

Change an image downloaded from the web into a CarouselView when the displayed item changes

I have a CarouselView with an image and a Label inside. Each time I change an element, a new text and a new image are displayed. The text is already inside a List and is retrieved from there, while the image is retrieved from my web space, so every time an element is changed, the CarouselView freezes for an instant to load the new image. I would like to find a way, if there is one, to initially display the image blurry, and then download all the data necessary to display it correctly so that the CarouselView does not freeze. In the DataTemplate of the CarouselView I use the FFImageLoading extension.

c#:

 private void Carousel_CurrentItemChanged (object sender, CurrentItemChanged e)
 {
     string Words = "New Text";
     WebClient web = new WebClient();
     web.Credentials = new NetworkCredential ( "xx", "xxx");
        
     string image = "ftp://.......jpg";
     byte[] ImgByte = web.DownloadData(image);
     MemoryStream stream = new MemoryStream();
     MyImage.Source = ImageSource.FromStrem(()=> stream);
 }

Video Example


dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JessieZhang-2116 commented

Hello,


Welcome to our Microsoft Q&A platform!

Do you want to display the item normally which includes a text and an image when scrolling to the next item ,right?

Then you can init the image url and new text in the constructor of your viewmodel .

You can refer to the sample code CarouselViewDemos.

Take above sample for example, we can init the value in the constructor of viewmodel MonkeysViewModel.cs :

         void CreateMonkeyCollection()
     {
         source.Add(new Monkey
         {
             Name = "Baboon",
             Location = "Africa & Asia",
             Details = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
             ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
         });

         source.Add(new Monkey
         {
             Name = "Capuchin Monkey",
             Location = "Central & South America",
             Details = "The capuchin monkeys are New World monkeys of the subfamily Cebinae. Prior to 2011, the subfamily contained only a single genus, Cebus.",
             ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
         });
      // other code
 } 

And we can also display the image like this VerticalTemplateLayoutPage.xaml :

    <ContentPage.BindingContext>
     <viewmodels:MonkeysViewModel />
 </ContentPage.BindingContext>
 <CarouselView ItemsSource="{Binding Monkeys}">
     <CarouselView.ItemsLayout>
         <LinearItemsLayout Orientation="Vertical" />
     </CarouselView.ItemsLayout>
     <CarouselView.ItemTemplate>
         <DataTemplate>
             <StackLayout>
                 <Frame HasShadow="True"
                        BorderColor="DarkGray"
                        CornerRadius="5"
                        Margin="20"
                        HeightRequest="300"
                        HorizontalOptions="Center"
                        VerticalOptions="CenterAndExpand">
                     <StackLayout>
                         <Label Text="{Binding Name}" 
                                FontAttributes="Bold"
                                FontSize="Large"
                                HorizontalOptions="Center"
                                VerticalOptions="Center" />
                         <Image Source="{Binding ImageUrl}" 
                                Aspect="AspectFill"
                                HeightRequest="150"
                                WidthRequest="150"
                                HorizontalOptions="Center" />
                         <Label Text="{Binding Location}"
                                HorizontalOptions="Center" />
                         <Label Text="{Binding Details}"
                                FontAttributes="Italic"
                                HorizontalOptions="Center"
                                MaxLines="5"
                                LineBreakMode="TailTruncation" />
                     </StackLayout>
                 </Frame>
             </StackLayout>
         </DataTemplate>
     </CarouselView.ItemTemplate>
 </CarouselView>

Note:
1.You can also use nuget Xamarin.FFImageLoading.Forms to improve the image loading performance .
For more details, you can check:https://github.com/luberda-molinet/FFImageLoading .

And there is a sample included in it ,you can check it.
2.I don't understand why you set the text value and the image URL value when switching to the next item of your CarouselView .

Best Regards,


Jessie Zhang


If the response is helpful, please click "Accept Answer" and upvote it.



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.


· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

The image is downloaded from my ftp website every time a different element is displayed, the image is not present in the project. the problem is right there. Each time the image is loaded, as seen from the video, the CarouselView freezes for a moment. Is there any way to prevent this from happening?
I already use FFImageLoading but I don't understand how to fix it.

0 Votes 0 ·

Each time the image is loaded, as seen from the video, the CarouselView freezes for a moment.

You mean every time the image is different even in the same position?
0 Votes 0 ·

In the same position the image does not change. I have a List of objects, which have an isSource property, which goes into Binding with the Source property of an Image contained in the dataTemplate of the CarouselView. The isSource property of the objects initially has no value, so the image is downloaded from the internet and inserted into the isSource property. When I have to download the image from the internet the CarouselView freezes for a moment, while when the isSource property already has a value everything works fine.

0 Votes 0 ·
Show more comments