image - Xamarin:从 url 列表到使用图像填充 CollectionView
问题描述
我无法弄清楚这是如何完成的。我在每个单元格内都有一个带有集合视图和图像的页面。我也有一个 URL 列表,每个 URL 都指向一个 jpg。我想做的是在其中一个单元格中显示每个 jpg。
<StackLayout Margin="20">
<CollectionView ItemsSource="{Binding UrlCollection}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImageUrl}"
Aspect="AspectFill" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
到目前为止,在我看来,我必须创建一个名为 UrlCollection 的类,并且该类中的一个项目是 ImageUrl。但我感到迷茫,找不到可以效仿的例子。
更新我当前的版本。它不工作,显示只是空白。
图库.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:vm="clr-namespace:GalShare.ViewModel"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="GalShare.Views.Gallery">
<ContentPage.BindingContext>
<vm:GalleryViewModel/>
</ContentPage.BindingContext>
<StackLayout>
<CollectionView ItemsSource="{Binding Gallery}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImageUrl}"
Aspect="AspectFit" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
图库.cs
using System;
using System.Collections.Generic;
using System.Text;
namespace GalShare.Model
{
class Gallery
{
public string ImageName { get; set; }
public string ImageUrl { get; set; }
}
}
GalleryService.cs
using GalShare.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
namespace GalShare.Service
{
class GalleryService
{
public ObservableCollection<Gallery> GetImageList()
{
return new ObservableCollection<Gallery>()
{
new Gallery() { ImageName="Image1", ImageUrl="https://www.igormasin.it/fileuploads/tanja_23a6id/IMG_0992-Edit_a.jpg"},
new Gallery() { ImageName="Image2", ImageUrl="https://www.igormasin.it/fileuploads/tanja_23a6id/IMG_1024-Edit_a.jpg"},
new Gallery() { ImageName="Image3", ImageUrl="https://www.igormasin.it/fileuploads/tanja_23a6id/IMG_1074-Edit_a.jpg"}
};
}
}
}
GalleryViewModel.cs
using GalShare.Model;
using GalShare.Service;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
namespace GalShare.ViewModel
{
class GalleryViewModel
{
public ObservableCollection<Gallery> Images { get; set; }
public GalleryViewModel()
{
Images = new GalleryService().GetImageList();
}
}
}
主页调用:
MainPage = new NavigationPage(new Gallery());
解决方案
首先创建一个模型和视图模型,并使用模型对象列表填充视图模型属性。
public class ViewModel
{
public ObservableCollection<ImageData> UriCollection { get; set; }
public ViewModel()
{
UriCollection = new ObservableCollection<ImageData>();
for(var i=0; i<10; i++)
{
UriCollection.Add(new ImageData()
{
ImgeUri = "https://i.stack.imgur.com/di65V.jpg?s=328&g=1"
};
}
}
}
public class ImageData
{
public string ImgeUri { get; set; }
}
将ViewModel
包含UriCollection
as设置BindingContext
为 Page
主页.Xaml.cs
public MainPage()
{
InitializeComponent();
this.BindingContext = new ViewModel();
}
Xaml 中的用法
<CollectionView ItemsSource="{Binding UriCollection}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Image Aspect="AspectFit" Source="{Binding ImgeUri}" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
推荐阅读
- eclipse - 将 gradle 项目与工作空间同步
- c++ - SQLite C++ Qt更新查询执行但不写入数据库文件
- javascript - 通过javascript显示图像
- rxjs - 在整个长管道中传递/保持值的合理方法
- angular - Angular CLI 错误无法读取未定义的属性“写入”
- javascript - 带有 riot 的谷歌地图 API
- ios - CMSampleBuffer 的翻转/镜像方向
- php - PHP数组引用不一致
- reactjs - 动态表单增删改查,数据用new,UI不新antd用React
- javascript - 使用动态内容附加 localStorage