Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Why isn't Xamarin CarouselView displaying images when I bind the it to ImageSources?

I have been able to use CarouselView to display images by binding the CarouselView to an ObservableCollection of strings representing image URLs, and referencing those URLs directly with the Source property of the Image tag in XAML files:

<CarouselView x:Name="carouselView" ItemsSource="{Binding CarImages}">
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Frame>
                            <StackLayout>
                                <Label Text="{Binding FileName}"/>
                                <Image Source="{Binding FileName}"/>
                            </StackLayout>
                        </Frame>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>

This displays both the image and the filename as I'd like it to.

But now I am trying to create a CarouselView of images by binding the CarouselView to ImageSource objects instead of binding them to strings. The ObservableCollection of ImageSource objects is defined in my ViewModel:

public ObservableCollection<ImageSource> ImageSources { get; set; }

The ImageSource objects are created by passing the file paths into the ImageSource.FromFile method:

foreach(MediaFile photoFile in photoFiles)
            {
                CarViewModel.ImageSources.Add(ImageSource.FromFile(photoFile.Path));
            }

Now I try to display these in my xaml file:

                <CarouselView ItemsSource="{Binding ImageSources}" HeightRequest="500">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout>
                                <Image Source="{Binding}"/>
                            </StackLayout>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

but the image is not displayed.

I am able to display one image at a time, though:

CarViewModel.SampleImage.Source = CarViewModel.ImageSources[0];

<Image Source="{Binding SampleImage.Source}"/>

This does display a single image.

Why is it that images are not being displayed by the CarouselView?

```

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    Could this photoFile.Path be loaded successfully by the image source?
    I tried to test it like:

    BtnCommand = new Command(async () =>
    {
        HttpClient client = new HttpClient();
        var response = await client.GetAsync("https://file-examples-com.github.io/uploads/2017/10/file_example_PNG_500kB.png");
        var bytes = await response.Content.ReadAsByteArrayAsync();
    
        var folderPath = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
        var filePath = Path.Combine(folderPath, "sample.png");
        File.WriteAllBytes(filePath, bytes);
    
        // add some test here
        ImageSources.Add(ImageSource.FromFile(filePath));
        ImageSources.Add(ImageSource.FromFile(filePath));
        ImageSources.Add(ImageSource.FromFile(filePath));
        ImageSources.Add(ImageSource.FromFile(filePath));
        ImageSources.Add(ImageSource.FromFile(filePath));
    });
    

    Download an image from the internet and store it on the local path. Finally, add this path to the collection. The image loads successfully:

    Here is my sample for your reference.
    If the issue persists on your side, could you please share your sample here to help me reproduce it?

Sign In or Register to comment.