首页 > 解决方案 > XAML - Blend 不支持 Base64 ImageSource

问题描述

我必须在 WPF 应用程序中显示 SVG 图像。试图不使用第 3 方库,我手动(通过 Inkscape)将 SVG 图像转换为 XAML。

我现在的问题是 XAML 文件显示不正确。

如果我在 VisualStudio Designer 中查看这些 XAML 文件,我可以看到有一些图像使用 base64 字符串作为“源”。Designer 在“源”上显示警告“Blend 中不支持的文件类型”。

例如

  <Image xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="image4856" Source="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAVCAYAAABVAo5cAAAACXBIWXMAAAsSAAALEgHS3X78AAAB9ElEQVRIS72VW26DQAxFTwiBNI9W3UL3v7dKbRIgEOiHfTtmGvispSseY82xB9tspmniP6306wfwAhyAI7B3VcDO/QrXxiWbXKNrAHqgdV2Bm18bAfcY6Ow6YgFE6Na1BHy4eqADGgykYCdgFPAFOAGvwLvfn5hDI7Ag2cgc2JEyuwTfBzAIeMAAbxjwDYMr0xqLtGQZOLhaLLtvLFj59MBdwMoXD9iRvmLQMylLfcs1YI/BatIx6mhroBJw5y9UOCcS+ODvY/Hk3zAWS+V+CuKCBVwDZQQKumdesTpW+Sxl2Lu0pkqtCdUu4BaLaueLdVBskdgeMrVD6fsoW4GqsFYIqKgLUjUqozLcr2W48WuZSfsVZMCoIrt/9hxtzNaif9TvpJkyjdl9/hztmW98FzUDyjFOjJ5UfTqypW8ovyGT9hsJk0aLd1dHmhjb4LNjuS0UYONqfY87af8ZUCA1auWbK/p8iMvyDBtsrGloC9wTRluEXUmZqL86UtWtNf5ACvgba/oZVMAI2zOHxVmq8n4GfPB3ln6RoB1hljakX9CGdDSCxeZd+z3p07QY5AJ8YuAr0EagNpuwaJRt/B/G/pLFloj/Q0G/sGxvZEDBHjyZgcwbOrfYVmqN+F+8uToBWxJMx6lRFkdTnp0sz1IVq+NV0XQ/ErcAB5MZ6bUAAAAASUVORK5CYII=" Width="27" Height="20">
    <Image.RenderTransform>
      <TranslateTransform X="310" Y="279.5"/>
    </Image.RenderTransform>
  </Image>

如前所述,XAML 文件直接在图形设计软件 (Inkscape - SaveAs XAML) 中进行转换。VisualStudio 是否支持 base64 字符串作为 XAML 中的图像源?有没有人有这个问题的解决方案?

标签: c#wpfxamlimagesource

解决方案


由于 Base64 字符串包含一个编码的图像缓冲区,该缓冲区可以由 WPF 的 BitmapDecoder 之一解码并通过 MarkupExtension 传递给图像对象。

public class Base64Image : MarkupExtension
{
    public string Source { get; set; }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        using (var stream = new MemoryStream(Convert.FromBase64String(Source)))
        {
            return BitmapFrame.Create(stream, BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
        }
    }
}

在 Xaml 中:

<Image Source="{markupExtensions:Base64Image Source='...'}" Width="176.3889" Height="44.097225" Stretch="Fill"/>

推荐阅读