Xaml - как использовать ImageSource из ViewModel - PullRequest
Новая
       50

Xaml - как использовать ImageSource из ViewModel

1 голос
/ 26 мая 2019

У меня есть 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>

Теперь я запутался, потому что я могу вывести string Image через XAML через метку, но не могу отобразить изображение изпуть вообще.

Ответы [ 2 ]

1 голос
/ 26 мая 2019

Вы можете использовать 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"))
            }
        };

Результат

enter image description here

Обновление

В зависимости от Microsoft-Local Images

Файлы изображений можно добавлять в каждый проект приложения и ссылаться на них из общего кода Xamarin.Forms ...

Чтобы использовать одно изображение вДля всех приложений одно и то же имя файла должно использоваться на каждой платформе, и оно должно быть действительным именем ресурса Android (т. е. разрешены только строчные буквы, цифры, подчеркивание и точка).

Для получения дополнительной информации посмотрите ответ здесь

Теперь, если вы хотите отобразить изображение, не добавляя его на каждую платформу, вы должны использовать Converter .

Например:

  1. Создайте новую папку с именем ImagesFolder в общем коде и добавьте в нее изображение

    enter image description here

  2. В коде создайте новый класс с именем 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"
    }
};

  3. In 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

Общие ресурсы

Как загрузить двоичные изображения в Xamarin?

0 голосов
/ 26 мая 2019

Изменить 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;
...