Question

有没有办法直接在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加载到Image Control中的东西，而不必在磁盘上保存临时文件。

我知道我可以在WebView控件中加载svg，但这也不如使用Image控件渲染svg那么高效。

有没有办法做到这一点？

Answer 1

您可以使用HttpClient从网络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。请检查。

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

1 个答案: