问题描述
我从服务中获取了一组具有随机纵横比的图像,并尝试以两列格式显示它们。我不想使用信箱或部分图像被剪掉,所以我陷入了不均匀的高度。为了补偿不同的高度,我为每列创建了一个列表,其中每个新图像都添加到提取期间较短的列中。我将两个列表并排绑定到两个 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;
}
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)