首次加载时CarouselView中未显示图像

Question

方案是，打开带有旋转木马的内容页面，其中显示多个图像。图像被绑定为ImageSource的可观察集合，并且很好显示页面时，我可以看到轮播是空的。

我曾尝试使用两种不同的CarouselView。 xamarin brings by default和CardsView nuget库中的一个。两者的结果相同。

该页面显示的轮播视图中没有图像，但是有适当数量的项目（即：我可以看到可观察的集合有3个项目）。

我怀疑这一定是一种竞争状况，因为在调试时我强制强制视图的热重载（即：我保存了XAML并在设备中重载了视图），我可以看到带有显示图像的轮播正确。

为了复制它，我还在轮播之外单独添加了图像以证明它们在其中。我还添加了两个轮播视图。这是第一次加载的结果：

并且我保存了xaml后（根本不做任何事情）并且视图刷新了，这就是我所看到的，这是正确的。

请注意，在第一次加载时，这3张图像如何正确显示在转盘之外，但未正确显示在任何转盘中，尽管如果我在转盘中添加的是文本，则没有问题。] >>

任何想法可能在哪里？

这是赛车状况吗？还是两个不同的转盘都有问题？

这是我的代码

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

            <CarouselView BackgroundColor="White"
                          x:Name="Carousel"
                          ItemsSource="{Binding Images}">
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout 
                            HorizontalOptions="CenterAndExpand" 
                            VerticalOptions="CenterAndExpand">
                            <Image Source="{Binding .}"></Image>
                            <Label Text="image should be here"></Label>
                        </StackLayout>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>


            <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>
并且集合的边界是：

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

我刚刚编辑了整个问题，因为起初我虽然问题可能与Rg.Plugins.Popup有关，因为它发生在弹出窗口中。但是我已经尝试过使用正常的内容页面进行同样的操作，但是问题仍然存在，因此，这肯定与轮播有关。

---

UPDATE 2

我一直在调查。到目前为止，问题似乎出在传送带中的图像流，无论是Xamarin传送带还是CardView的库传送带（具有不同的机制）。

我尝试将选项和高度和宽度请求添加到访问流没有运气的图像中

<!--in DataTemplate within the carousel-->
<Image Source="{Binding .}" HeightRequest="100"
   WidthRequest="100"
   VerticalOptions="FillAndExpand" 
   HorizontalOptions="FillAndExpand"></Image>
<Label Text="image should be here"></Label>
UPDATE 3：

感谢杰克·华（Jack Hua）的评论和回购，我对其进行了更新，以反映我所遇到的问题，并设法将其复制at this specific commit here

[基本上，我采取了相同的仓库，添加了QRCoder库以在运行时快速生成图像为byte[]，并从流中添加了图像源。

public Model() {

    Images = new ObservableCollection<ImageSource>();

    var imageOne = GetQrImageAsBytes();
    var imageTwo = GetQrImageAsBytes();
    var imageThree = GetQrImageAsBytes();

    // This works
    //Images.Add(ImageSource.FromFile("logo.jpg"));
    //Images.Add(ImageSource.FromFile("sample.jpg"));
    //Images.Add(ImageSource.FromFile("ttt.png"));

    Images.Add(ImageSource.FromStream(() => new MemoryStream(imageOne)));
    Images.Add(ImageSource.FromStream(() => new MemoryStream(imageTwo)));
    Images.Add(ImageSource.FromStream(() => new MemoryStream(imageThree)));
}

private byte[] GetQrImageAsBytes()
{
    var randomText = Guid.NewGuid().ToString();
    var qrGenerator = new QRCodeGenerator();
    var qrCodeData = qrGenerator.CreateQrCode(randomText, QRCodeGenerator.ECCLevel.L);
    var qRCode = new PngByteQRCode(qrCodeData);
    var qrCodeBytes = qRCode.GetGraphic(20);
    return qrCodeBytes;
}
UPDATE 4：

我发现了问题，我不得不尝试几次以确保这确实是问题所在，但肯定是。]

Re-Sharper建议我对ItemsSource="{Binding Images}"进行更改，因为它无法识别Images。因此，我遵循Re-Sharper建议，并在xaml的x:DataType="app265:Model"标签中添加了ContentPage。这导致了问题。我真的不知道为什么，但是今晚我会睡得更好：）

<?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:app265="clr-namespace:App265;assembly=App265"
             mc:Ignorable="d"
             x:Class="App265.MainPage" 
             x:DataType="app265:Model"><!--this line that Re-Sharper adds causes the issue-->
这是Xamarin错误吗？还是对您有意义？
说明为何此x:DataType会破坏事物，但仅在第一次加载时会破坏它，才是正确的答案。

方案是，打开带有旋转木马的内容页面，其中显示多个图像。图像被绑定为ImageSource的可观察集合，并且很好，当显示页面时，我可以...

Answer 1

x:DataType="ImageSource"
将其添加到轮播视图DataTemplate。它应该可以解决您的问题。BindignContext检测似乎存在一些问题，因此您应该“帮助”自己进行检测。