将基于字符串的 SVG 绑定到 UWP 应用程序

Question

我是 UWP 应用程序开发的新手，正在寻找一种将基于字符串的 SVG 绑定到 UWP（通用 Windows 平台）页面的方法。我想通过使用 UWP 页面的图像标签（XAML 布局）来展示基于字符串的 SVG。 SVG 将以 SVG 标记语言表示，例如：

dataBindedModel.svg = “<svg xmlns="http://www.w3.org/2000/svg"; width="500" height="500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
</svg>”;

为此，我需要在 XAML 中使用 {x:Bind}，但不确定如何绑定它。 潜在的 XAML 代码如下：

<Image x:Name="MyImageView" Source="{x:Bind ...required area...”}>

更新：

我的 MainPage.xaml.cs：

 public sealed partial class MainPage : Page
    {
        SVGModel dataBindedModel = new SVGModel();
        public MainPage()
        {
            this.InitializeComponent();
            dataBindedModel.SVGString = File.ReadAllText("test.xml");
            this.DataContext = dataBindedModel;
        }
    }
    public class SVGModel
    {
        public SVGModel() { }
        public SVGModel(string svg)
        {
            SVGString = svg;
        }
        public string SVGString { get; set; }

    }

我的MainPage.xaml：

<Grid>
        <Grid.Resources>
            <local:SVGImageConverter x:Key="MyConvert" />
        </Grid.Resources>
        <Image x:Name="MyImageView" Source="{x:Bind dataBindedModel.SVGString,Mode=OneWay,Converter={StaticResource MyConvert }}" />
    </Grid>

我的test.xml：

<?xml version="1.0" encoding="utf-8" ?>
<svg  width="500" height="500">
    <circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
</svg>

Answer 1

UWP 不允许直接绑定 SVG 字符串，它只包含 SvgImageSource 类，请保存为 svg 文件并设置为图像控件，如下所示。

<Image Source="Assets/mysvg.svg"/>

另一种方法是使用值转换器将字符串转换为SvgImageSource，例如

public class SVGImageConverter : IValueConverter
{
    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }

    public  object Convert(object value, Type targetType, object parameter, string language)
    {
        var svg = new SvgImageSource();
        try
        {
            var svgBuffer = CryptographicBuffer.ConvertStringToBinary(value.ToString(), BinaryStringEncoding.Utf8);
       
            using (var stream = svgBuffer.AsStream())
            {
                 svg.SetSourceAsync(stream.AsRandomAccessStream()).AsTask().ConfigureAwait(false);                    
            }
        }
        catch (Exception ex)
        {

        }

        return svg;
    }
}

用法

<Image x:Name="MyImageView" Source="{x:Bind dataBindedModel.svg,Mode=OneWay,Converter={StaticResource MyConvert }}" />

请注意：请确保您的 svg 字符串是正确的 svg 类型。