将 svg 数据直接绑定到 Image 或 SvgImageSource答案

【问题标题】：Bind svg data directly to Image or SvgImageSource将 svg 数据直接绑定到 Image 或 SvgImageSource
【发布时间】：2017-05-19 16:01:45
【问题描述】：

有没有办法直接在 Image 控件中加载 svg，而不保存应作为 Image 控件源加载的文件？

我需要在我的 UWP 应用程序中显示从某个 web api 接收到的 svg。目前我保存了一个使用 SvgImageSource 加载的临时文件，如下所示：

在 Xaml 中：

<Image Name="image"/>

在代码后面：

var newFile = await ApplicationData.Current.LocalFolder.CreateFileAsync(Guid.NewGuid().ToString() + ".svg");
var writeStream = await newFile.OpenStreamForWriteAsync();

await writeStream.WriteAsync(Encoding.ASCII.GetBytes(someCustomSvg), 0, someCustomSvg.Length);

writeStream.Dispose();

image.Source = new SvgImageSource(new Uri(newFile.Path));

这可行，但效率不高。

我需要一些东西来将 svg 加载到图像控件中，而不必在磁盘上保存临时文件。

我知道我可以在 WebView 控件中加载 svg，但这也没有使用 Image 控件渲染 svg 的效率。

有没有办法做到这一点？

【问题讨论】：

标签： c# xaml uwp

【解决方案1】：

您可以使用HttpClient 从 web api 获取流。然后将流转换为SvgImageSource。更多细节请参考以下代码。

 private async void MyBtn_Click(object sender, RoutedEventArgs e)
 {
     using (HttpClient client = new HttpClient())
     {
         var svg = new SvgImageSource();
         try
         {
             var response = await client.GetAsync(new Uri("http://www.iconsvg.com/Home/downloadPicture?route=1333158662629220352&name=%E5%9C%86%E5%BD%A2%E7%9A%84_circular164"));

             if (response != null && response.StatusCode == HttpStatusCode.OK)
             {
                 using (var stream = await response.Content.ReadAsStreamAsync())
                 {
                     using (var memStream = new MemoryStream())
                     {
                         await stream.CopyToAsync(memStream);
                         memStream.Position = 0;
                         await svg.SetSourceAsync(memStream.AsRandomAccessStream());
                         MyImageView.Source = svg;
                     }
                 }
             }
         }
         catch (Exception ex)
         {

         }
     }
 }

<Image x:Name="MyImageView" Source="{Binding imageSource ,Mode=OneWay,Converter={StaticResource MyConvert }}" />

我已将code sample 上传到github。请检查。

【讨论】：