如何在 Xamarin Forms 的 ListView 中显示 Base64 图像字符串？

Question

我对 Xamarin、MVVM 和跨平台应用程序开发（Android、iOS、UWP）非常陌生。我正在使用 Realm 以 Base64 格式存储/显示图像。我已成功存储图像 base64 字符串，但 在 ListView 中显示图像时遇到困难。

ImageModel.cs

namespace RealmTest.Models
{
    public class ImageModel : RealmObject
    {
        [PrimaryKey]
        public string ImageId { get; set; } = Guid.NewGuid().ToString();

        public string ImageName { get; set; }

        public string ImageBase64 { get; set; }

        public string ImageCaseHistory { get; set; }

    }
}

BaseViewModel.cs

namespace RealmTest.ViewModels
{
    public class BaseViewModel : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName]string propertyName = "") =>
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

RealmImageViewModel.cs

namespace RealmTest.ViewModels
{
    public class RealmImageViewModel : BaseViewModel
    {
        private ObservableCollection<ImageModel> imagesList;
        public ObservableCollection<ImageModel> ImagesList
        {
            get
            {
                return imagesList;
            }
            set
            {
                imagesList = value;
            }
        }

        public RealmImageViewModel()
        {
            Realm context = Realm.GetInstance();
            ImagesList = new ObservableCollection<ImageModel>(context.All<ImageModel>());

            Debug.WriteLine($"ImagesList ==>" + ImagesList.Count());
        }
    }
}

HomePage.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"
             x:Class="RealmTest.Views.HomePage"
             Title="Home">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add"
                     Icon="ic_add_black.png"/>
    </ContentPage.ToolbarItems>

    <ContentPage.Content>

        <ListView ItemsSource="{Binding ImagesList}"
                  HasUnevenRows="True"
                  BackgroundColor="#f5f5f5">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>

                        <Grid BackgroundColor="White"
                              Margin="4">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>


                            <Label Grid.Row="0"
                                   Text="{Binding ImageName}"
                                   FontSize="Medium"
                                   Margin="4"
                                   FontAttributes="Bold" />

                            <Image Source="{Binding ImageBase64}" 
                                   HeightRequest="150"
                                   Grid.Row="1"
                                   />

                            <StackLayout Orientation="Horizontal"
                                         Grid.Row="2"
                                         Margin="4"
                                         Padding="2">

                                <Label Text="{Binding ImageCaseHistory}"
                                       FontSize="Small" />

                                <Label Text="{Binding ImageName}"
                                       FontSize="Small" />

                            </StackLayout>
                        </Grid>

                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </ContentPage.Content>

</ContentPage>

HomePage.cs

namespace RealmTest.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            BindingContext = new RealmImageViewModel();

            /**
            var image = Xamarin.Forms.ImageSource.FromStream(
                () => new MemoryStream(Convert.FromBase64String(base64)));
            **/
        }
    }
}

到目前为止，我已经了解了关于我的问题/查询的两件事 -

1. 我可以将base64 字符串显示为图像格式，例如 -

   var image = Xamarin.Forms.ImageSource.FromStream( () => new MemoryStream(Convert.FromBase64String(base64)));

2. 我在 SO 上阅读了 this answer 并了解到可以创建一些 ConverterBase64ImageSource，但我无法理解它，如何制作和实现它。

我仍然无法找到在 ListView 中显示所有图像（在我的 Realm 数据库中为 Base64 字符串格式）的方法。

Answer 1

我找到了一些不同的方法来做到这一点，我在我的 localDB (SQLite) 中保存了一个 base64 文件。

这是在模型中：

//这里我们将base64转换为ImageSource

     string foto;
    [JsonProperty(PropertyName = "Foto")]
    public string Foto
    {
        get { return foto; }
        set
        {
            foto = value;
            OnPropertyChanged("Foto");

            FOTO = Xamarin.Forms.ImageSource.FromStream(
                () => new MemoryStream(Convert.FromBase64String(foto)));
        }
    }
    private Xamarin.Forms.ImageSource _foto;
    [Ignore]//The localdb don't support the ImageSource
    public Xamarin.Forms.ImageSource FOTO
    {
        get { return _foto; }
        set
        {
            _foto = value;
            OnPropertyChanged("FOTO");
        }
    }

在我的例子中，我使用这个类来转换文件：

public class FilesHelper
    {
        public static byte[] ReadFully(Stream input)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                input.CopyTo(ms);
                return ms.ToArray();
            }
        }
    }

这里我们将图片转换成base64文件保存在localDB中：

 byte[] imageArray = null;
            String image = "";
            if (this.file != null)
            {
                imageArray = FilesHelper.ReadFully(this.file.GetStream());

                image = Convert.ToBase64String(imageArray);
            }

希望对你有所帮助。