在 UWP 中绑定图像（作为编码字符串）答案

【问题标题】：Binding an Image (as an encoded string) in UWP在 UWP 中绑定图像（作为编码字符串）
【发布时间】：2017-05-10 11:05:07
【问题描述】：

C#/通用 Windows 平台

我有一个对象，该对象包含一个属性，该属性包含一个作为 base64 编码字符串的图像。我如何将此字符串绑定到前端的图像？目前我可以将base64字符串异步转换为BitmapImage，但无法将生成的图像绑定到前端，因为属性不能包含异步函数。到目前为止，我发现的所有解决方案都不适用于 UWP，我该如何做。

感谢您的帮助。

【问题讨论】：

标签： c# data-binding uwp

【解决方案1】：

首先是将base64转换为位数组。

您可以使用Convert.FromBase64String将base64转换为字节[]

var bytes = Convert.FromBase64String(base64);

但是 byte[] 不能是流，你应该将 byte[] 转换为缓冲区

 var buf=bytes.AsBuffer();

您可以将其更改为流式传输。

 var stream=buf.AsStream();

您可以将流用于新的 BitmapDecoder

var image = stream.AsRandomAccessStream();

var decoder = await BitmapDecoder.CreateAsync(image);
image.Seek(0);

您可以使用将其转换为 ImageSource 的 WriteableBitmap。

var output = new WriteableBitmap((int)decoder.PixelHeight, (int)decoder.PixelWidth);
await output.SetSourceAsync(image);
return output;

然后您可以将图像源设置为您要显示的内容。

见convert bitmap WriteableBitmap,convert base64ToImage

如果您想将图像源绑定到 Image.Source，您应该添加一个具有属性的类。

    public ImageSource Source
    {
        get { return _source; }
        set { _source = value; OnPropertyChanged();}
    }

OnPropertyChanged 是 INotifyPropertyChanged，您可以在 github 中使用它

您可以使用将base64转换为图像源并设置Source。

您可以将其绑定到页面并查看显示 base64 的图像。

【讨论】：

这个函数仍然是异步的，因此不能用于通过数据绑定返回值（至少据我所知）。
为什么不能使用bind？
我不明白。你的意思是 x:Bind，如果是，我将如何异步使用它。

【解决方案2】：

这里有一个代码 sn-p 供您参考。您可以在这里下载完整的解决方案：code.msdn。

在视图模型中写入两个属性。当我们将字符串值设置为encodedImage属性时，我们调用一个异步方法将其转换为writeablebitmap类型值，并将转换后的结果设置为另一个属性selectedImage。 Selected Image是xaml Image控件的绑定源。

public class MainViewModel : INotifyPropertyChanged
{

    private string encodedImage;

    public string EncodedImage
    {
        get
        {
            return encodedImage;
        }
        set
        {
            encodedImage = value;
            // Convert source to writeblebitmap and set value to SelectedImage
            ConvertToImage(value);
            NotifyPropertyChanged("EncodedStream");
        }
    }

    private WriteableBitmap selectedImage;

    public WriteableBitmap SelectedImage
    {
        get { return selectedImage; }
        private set { selectedImage = value; NotifyPropertyChanged("SelectedImage"); }
    }


    /// <summary>
    /// Convert encoded string to writeblebitmap
    /// set result value to SelectedImage
    /// </summary>
    /// <param name="base64String"></param>
    public async void ConvertToImage(string base64String)
    {
        byte[] bytes = Convert.FromBase64String(base64String);

        InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream();
        await stream.WriteAsync(bytes.AsBuffer());
        stream.Seek(0);

        BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);       
        WriteableBitmap writebleBitmap = new WriteableBitmap((int)decoder.PixelWidth, (int)decoder.PixelHeight);
        await writebleBitmap.SetSourceAsync(stream);
        // When SelectedImage value is changed, it will notify the front end
        SelectedImage = writebleBitmap;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string propName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}

【讨论】：