前端之家

  1. 首页
  2. 问答

Xamarin：从URL列表到使用Image填充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。但是我感到迷lost，无法找到榜样。

更新我的当前版本。它不起作用，显示只是空白。

Gallery.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>

Gallery.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());
aiai0525 回答：Xamarin：从URL列表到使用Image填充CollectionView

首先创建一个Model和ViewModel，然后用一个Model对象列表填充一个ViewModel属性。 

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的{​​{1}}设置为页面的UriCollection

MainPage.Xaml.cs 

BindingContext

使用Xaml 

public MainPage()
{
    InitializeComponent();
    this.BindingContext = new ViewModel();
}
collectionviewimageitemsourcexamarin
本文链接：https://www.f2er.com/2633389.html

大家都在问