Xamarin 两个 CollectionViews 一起滚动

如何解决Xamarin 两个 CollectionViews 一起滚动

我从服务中获取了一组具有随机纵横比的图像，并尝试以两列格式显示它们。我不想使用信箱或部分图像被剪掉，所以我陷入了不均匀的高度。为了补偿不同的高度，我为每列创建了一个列表，其中每个新图像都添加到提取期间较短的列中。我将两个列表并排绑定到两个 CollectionViews。布局看起来和我想要的完全一样，但麻烦的是两列独立滚动。有没有办法只用一个 CollectionView 来做到这一点，或者以某种方式将它们一起滚动？

<ContentPage.Content>
    <ScrollView>
        <Grid
            HorizontalOptions="FillAndExpand"
            VerticalOptions="StartAndExpand"
            ColumnSpacing="0"
            RowSpacing="3"
            x:Name="mainGrid">
            <Grid.ColumnDeFinitions>
                <ColumnDeFinition Width="3"/>
                <ColumnDeFinition Width="{Binding PictureColumnWidth}"/>
                <ColumnDeFinition Width="3"/>
                <ColumnDeFinition Width="{Binding PictureColumnWidth}"/>
                <ColumnDeFinition Width="*"/>
            </Grid.ColumnDeFinitions>
            <Grid.RowDeFinitions>
                <RowDeFinition Height="Auto"></RowDeFinition>
            </Grid.RowDeFinitions>
            
            <CollectionView ItemsSource="{Binding LeftColumnPhotos}" Grid.Column="1">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Image  
                                Source="{Binding Url}"
                                HeightRequest="{Binding Height}"
                                Aspect="AspectFit"
                                HorizontalOptions="FillAndExpand"
                                Margin="0,3"/>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

            <CollectionView ItemsSource="{Binding RightColumnPhotos}" Grid.Column="3">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Image  
                                Source="{Binding Url}"
                                HeightRequest="{Binding Height}"
                                Aspect="AspectFit"
                                HorizontalOptions="FillAndExpand"
                                Margin="0,3"/>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </Grid>
    </ScrollView>
</ContentPage.Content>

获取：

    public async Task FetchPhotosAsync(string query,int pageNumber,int countPerPage)
    {
        var client = new UnsplasharpClient(UnsplashCredentials.ApplicationId);
        var photos = await client.SearchPhotos(query,pageNumber,countPerPage);

        LeftColumnPhotos = new ObservableCollection<PictureInfo>();
        RightColumnPhotos = new ObservableCollection<PictureInfo>();
        double heightDiff = 0;

        foreach (var photo in photos)
        {
            double aspect = photo.Height == 0 ? 1d : (double)photo.Width / (double)photo.Height;

            PictureInfo picture = new PictureInfo()
            {
                Width = pictureColumnWidthPixels / maindisplayInfo.Density,Height = pictureColumnWidthPixels / aspect / maindisplayInfo.Density,Url = photo.Urls.Thumbnail
            };

            if(heightDiff <= 0)
            {
                LeftColumnPhotos.Add(picture);
                heightDiff += picture.Height;
            }
            else
            {
                RightColumnPhotos.Add(picture);
                heightDiff -= picture.Height;
            }
        }
    }