Image stream not being displayed in carousel

I am having an issue, hopefully someone has the answer and lets me know if I’m doing anything wrong or it’s a limitation of the carousel.

The idea is that I have several images being generated at runtime (qr barcodes), and I want to display those images along with some text in a carouselview.

The problem

This is what I see on the first load

As you can see the text is displayed, the items within the collection are there, and the same images outside the carousel exist.

The funny thing is that when I save the XAML again (while debugging) forcing a hot reload, it refreshes the page and I can see it working as expected.

I suspect there must be some kind of race condition here, but why isn’t the carousel displaying the images?

My code

For example, my view model has the observable collection of ImageSource that I feed when the view model is instantiated:

private readonly IQrGeneratorService _qrGeneratorService;
private ObservableCollection<ImageSource> _images = new ObservableCollection<ImageSource>();

public ObservableCollection<ImageSource> Images
{
    get => _images;
    set
    {
        _images = value;
        OnPropertyChanged();
    }
}

public MainViewModel(IQrGeneratorService qrGeneratorService)
{
    _qrGeneratorService = qrGeneratorService;
    _qrGeneratorService = qrGeneratorService;
    var oneBytes = _qrGeneratorService.GetQrCode("foo");
    var twoBytes = _qrGeneratorService.GetQrCode("bar");
    var threeBytes = _qrGeneratorService.GetQrCode("tor");

    var one = ImageSource.FromStream(() => new MemoryStream(oneBytes));
    var two = ImageSource.FromStream(() => new MemoryStream(twoBytes));
    var three = ImageSource.FromStream(() => new MemoryStream(threeBytes));
    Images.Add(one);
    Images.Add(two);
    Images.Add(three);
}

Now my Xaml bound to this view model with the following code behind

public partial class MainPage : ContentPage
    {
        private readonly MainViewModel _mainViewModel = AppContainer.Resolve<MainViewModel>();
        public MainPage()
        {
            InitializeComponent();
            BindingContext = _mainViewModel;
        }
    }

has the following XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:viewModels="clr-namespace:Sasw.AforoPass.ViewModels;assembly=Sasw.AforoPass"
             xmlns:panCardView="clr-namespace:PanCardView;assembly=PanCardView"
             xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView"
             mc:Ignorable="d"
             x:Class="Sasw.AforoPass.Views.MainPage" 
             x:DataType="viewModels:MainViewModel">
    <ContentPage.Content>
        <StackLayout>
            <StackLayout.Resources>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="/Styles/Styles.xaml" />
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </StackLayout.Resources>

            <panCardView:CarouselView 
                ItemsSource="{Binding Images}"
                BackgroundColor="{StaticResource ColorPrimary}"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">
                <panCardView:CarouselView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout 
                            HorizontalOptions="CenterAndExpand" 
                            VerticalOptions="CenterAndExpand">
                            <Image Source="{Binding .}"></Image>
                            <Label Text="image should be here"></Label>
                        </StackLayout>
                    </DataTemplate>
                </panCardView:CarouselView.ItemTemplate>

                <controls:LeftArrowControl />
                <controls:RightArrowControl />
                <controls:IndicatorsControl ToFadeDuration="1500"/>
            </panCardView:CarouselView>
            <Image WidthRequest="20" HeightRequest="20" Source ="{Binding Images[0]}"></Image>
            <Image WidthRequest="20" HeightRequest="20"  Source ="{Binding Images[1]}"></Image>
            <Image WidthRequest="20" HeightRequest="20"  Source ="{Binding Images[2]}"></Image>
   
            <Button Text="Close"></Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Some things to notice

It could be due to the fact that the image is an ImageSourceStream and that the stream is not ready by the time the carousel is rendered. Maybe the image source itself should be observable? But I can see the images outside the carousel, so I’m not sure.,

[AndreiMisiukevich]

I added this comment to StackOverflow as well. Perhaps it would be helpful for others

[diegosasw]

yes it does. Thanks!