Question

我有一个ObservableCollection<Item>，一个Item包含一个文件路径和一个来自磁盘的映像的ImageSource。

public ObservableCollection<Item> Items { get; set; } = new ObservableCollection<MediaListItem>();

public class Item
{
    public string Image { get; set; } // Full path to the image
    public ImageSource ImageSource { get; set; }
}

但是，我无法访问这两个属性中的任何一个，也无法通过XAML显示图像。

<ListView ItemsSource="{Binding MediaList}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Padding="10">
                    <Image Source="{Binding ImageSource}" VerticalOptions="Fill"></Image>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

现在我很困惑，因为我能够通过XAML通过标签输出string Image，但是根本无法显示路径中的图像。

Answer 1

您可以像这样使用ImageSource.FromFile()或ImageSource.FromUri()

在Xaml中

<Image  Source="{Binding  ImageSource}"  Aspect="AspectFit"  ></Image>

使用代码

public ObservableCollection<Item> MediaList { get; set; } = new ObservableCollection<Item>()
        {
            new Item
            {
                ImageSource = ImageSource.FromFile("xamarin.png")
            },
            new Item
            {
                ImageSource = ImageSource.FromUri(new Uri("https://i.stack.imgur.com/4mMod.png"))
            }
        };

结果

更新

取决于Microsoft-Local Images

可以将图像文件添加到每个应用程序项目中，并从Xamarin.Forms共享代码中引用...

要在所有应用程序中使用单个图像，必须在每个平台上使用相同的文件名，并且该文件名应为有效的Android资源名称（即，仅允许使用小写字母，数字，下划线和句点）。

有关更多信息，请查看答案here

现在，如果要显示图像而不将其添加到每个平台，则应使用Converter。

例如：

使用共享代码创建一个名为ImagesFolder的新文件夹，然后将图像添加到其中

在代码中，像这样创建一个名为ByteArrayToImageSourceConverter的新类

public class ByteArrayToImageSourceConverter : IValueConverter 
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {   
    byte[] bytes;
    var assembly = GetType().GetTypeInfo().Assembly; // using System.Reflection;

    var stream = assembly.GetManifestResourceStream((string)value); // value = "App1.ImagesFolder.ninja.png"
    using (var ms = new MemoryStream()) // using System.IO; 
    {
        stream.CopyToAsync(ms);
        bytes = ms.ToArray();
    }
    return ImageSource.FromStream(() => new MemoryStream(bytes));
  }
  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    return null;
  }
}

查看模型

public ObservableCollection<Item> MediaList { get; set; } = new ObservableCollection<Item>()
{
    new Item
    {
       Image  = "App1.ImagesFolder.ninja.png"
    }
};

在Xaml中

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:local="clr-namespace:App1"
     x:Class="App1.MainPage">

  <ContentPage.Resources>
    <ResourceDictionary>
       <local:ByteArrayToImageSourceConverter  x:Key="ByteArrayToImageSourceConverter" />
   </ResourceDictionary>
 </ContentPage.Resources>

 <ListView ItemsSource="{Binding MediaList}" >
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
           <Image Source="{Binding Image, Converter={StaticResource ByteArrayToImageSourceConverter}}" />
        </ViewCell>
      </DataTemplate>
   </ListView.ItemTemplate>
 </ListView>

</ContentPage>

相关链接

ByteArrayToImageSourceConverter

Shared Resources

How to load binary images in Xamarin?

Answer 2

将ImageSource的类型更改为String

public class Item
{
    public string ImageSource { get; set; }
}

用法

List<Item> items = new List<Item>();
items.Add(new Item() { ImageSource = "*THE URL OF IMAGE*" });
ListView.ItemsSource = items;

Xaml-如何使用ViewModel中的ImageSource

2 个答案: