Webサービスからの製品のコレクションがあり、この製品をグリッドビューでプレビューしますが、製品の画像をBase64文字列として取得します。どうすれば画像に変換してグリッドビューの画像にバインドできますか?
この問題で私を助けるコードの一部。
Webサービスからの製品のコレクションがあり、この製品をグリッドビューでプレビューしますが、製品の画像をBase64文字列として取得します。どうすれば画像に変換してグリッドビューの画像にバインドできますか?
この問題で私を助けるコードの一部。
これは私にとってはうまくいくようです:
public static BitmapImage Base64StringToBitmap(string source)
{
var ims = new InMemoryRandomAccessStream();
var bytes = Convert.FromBase64String(source);
var dataWriter = new DataWriter(ims);
dataWriter.WriteBytes(bytes);
dataWriter.StoreAsync();
ims.Seek(0);
var img = new BitmapImage();
img.SetSource(ims);
return img;
}
私は何も待っていないことに注意してください.img.SetSourceは遅延ロードを処理する必要があります。
Base64String
以下は、 aをImage
コントロールにバインドするメソッドです
次のように文字列を byte[] に変換します
byte[] bytes = System.Convert.FromBase64String(thebase64string);
イメージをバインドするイメージ コントロールと byte[] を渡します。
public async void SetImageFromByteArray(byte[] data, Windows.UI.Xaml.Controls.Image image)
{
InMemoryRandomAccessStream raStream =
new InMemoryRandomAccessStream();
DataWriter writer = new DataWriter(raStream);
// Write the bytes to the stream
writer.WriteBytes(data);
// Store the bytes to the MemoryStream
await writer.StoreAsync();
await writer.FlushAsync();
// Detach from the Memory stream so we don't close it
writer.DetachStream();
raStream.Seek(0);
BitmapImage bitMapImage = new BitmapImage();
bitMapImage.SetSource(raStream);
image.Source = bitMapImage;
}
WPF/Metro/Silverlight では、Image は UI コントロールです。そのソースは BitmapSource に設定されます。BitmapSource は、画像データを保持するためのデータ構造です。
以下は、バイト配列から BitmapImage を取得するコードです。
public BitmapImage ImageFromBuffer(Byte[] bytes)
{
MemoryStream stream = new MemoryStream(bytes);
BitmapImage image = new BitmapImage();
image.SetSource ( stream.AsRandomAccessStream());
return image;
}
stream.AsRandomAccessStream は API では使用できないことに注意してください。これは拡張メソッドです。このSOの質問に対するIDWMasterの応答から見つけました
以下は拡張メソッドのコードです
public static class MicrosoftStreamExtensions
{
public static IRandomAccessStream AsRandomAccessStream(this Stream stream)
{
return new RandomStream(stream);
}
}
class RandomStream : IRandomAccessStream
{
Stream internstream;
public RandomStream(Stream underlyingstream)
{
internstream = underlyingstream;
}
public IInputStream GetInputStreamAt(ulong position)
{
internstream.Position = (long)position;
return internstream.AsInputStream();
}
public IOutputStream GetOutputStreamAt(ulong position)
{
internstream.Position = (long)position;
return internstream.AsOutputStream();
}
public ulong Size
{
get
{
return (ulong)internstream.Length;
}
set
{
internstream.SetLength((long)value);
}
}
public bool CanRead
{
get { return internstream.CanRead; }
}
public bool CanWrite
{
get { return internstream.CanWrite; }
}
public IRandomAccessStream CloneStream()
{
//HACK, this is not clone, proper implementation is required, returned object will share same internal stream
return new RandomStream(this.internstream);
}
public ulong Position
{
get { return (ulong)internstream.Position; }
}
public void Seek(ulong position)
{
internstream.Seek((long)position, SeekOrigin.Current);
}
public void Dispose()
{
internstream.Dispose();
}
public Windows.Foundation.IAsyncOperationWithProgress<IBuffer, uint> ReadAsync(IBuffer buffer, uint count, InputStreamOptions options)
{
throw new NotImplementedException();
}
public Windows.Foundation.IAsyncOperation<bool> FlushAsync()
{
throw new NotImplementedException();
}
public Windows.Foundation.IAsyncOperationWithProgress<uint, uint> WriteAsync(IBuffer buffer)
{
throw new NotImplementedException();
}
}
最後の 3 つのメソッドは実装されていません
私はテストしていませんが、上記は原則として機能するはずです(何らかの改良が行われた後かもしれません)。
次のようなことを試してください:
byte[] encodedDataAsBytes = System.Convert.FromBase64String(encodedData);
MemoryStream stream = new MemoryStream(encodedDataAsBytes.Length);
stream.Write(encodedDataAsBytes, 0, encodedDataAsBytes.Length);
Image img = Image.FromStream(stream);
私はメトロで働いたことがないので、グリッドへのバインドを手伝うことはできません..よろしくお願いします。