如何像图像一样在 C# WPF 窗口中添加 svg/xaml 文件？答案

【问题标题】：How to add a svg/xaml file in C# WPF windows just like image?如何像图像一样在 C# WPF 窗口中添加 svg/xaml 文件？
【发布时间】：2021-03-18 04:37:59
【问题描述】：

如何在 C# 的 WPF 窗口中将.svg 文件添加为图像 (,png || ,jpg)？

我用代码

<Image HorizontalAlignment="Left" Height="53" Margin="34,39,0,0"
           VerticalAlignment="Top" Width="71" 
           Source="Test.svg" Name="MyImage"/>

但我得到一个错误：

Blend 不支持 svg 格式。

我发现我可以将.svg 文件更改为.xaml 文件。但我仍然不知道如何将 xaml 添加为图像。

根据一个答案，我改变了我的代码：

<Window x:Class="NIA_UI_Demo_CSharp.ShareDocumentsWin"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ShareDocumentsWin" Height="350" Width="569">

<ResourceDictionary>
    <Style x:Key="TheAwesomeXAMLimage" TargetType="ContentControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    my code
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

<Grid Margin="0,0,2,3">
    <ContentControl Style="{StaticResource TheAwesomeXAMLimage}"/>
</Grid>
</Window>

但我得到一个错误：

内容设置不止一次；

【问题讨论】：

就个人而言，对于 SVG，我只是将它们导出到 XAML，但它不再是 Image，它通常是在画布或其他东西中的矢量数据，但您仍然可以通过将它们重新使用等ContentControl 或类似内容中的数据
@ChrisW。如何将 xml 添加为画布 ||内容控制？我在这两个里面找不到Source？仅 SourceUpdate
只需从 .svg 中获取导出的 XAML，然后您可以使用 old answer here 并将其粘贴到“只需将您的 xaml 粘贴到此处”的位置，然后按照其余部分进行操作，没问题.不过，我不确定您所说的“来源”是什么意思。
@ChrisW。非常感谢。我改变了我的代码，就像我在上面编辑的问题一样。我得到一个错误：内容设置不止一次；你知道为什么吗？
@ChrisW。我发现哪里错了，谢谢。

标签： c# wpf xaml svg

【解决方案1】：

据我所知，您不能直接包含 svg 文件。两种选择：

使用可以在运行时处理 svg 文件的库：https://sharpvectors.codeplex.com/（移至 https://github.com/ElinamLLC/SharpVectors）
将 svg 转换为 xaml 并将它们与本机 wpf 对象（路径、图像..）一起使用

我更喜欢第二个选项，所以我写了一个工具，可以将单个 svg 转换为 xaml，也可以批量转换一堆 svg 文件。工作流程是：只需将 svg 文件放入您的图像文件夹，调用批处理转换器并找到使用新图标/图像更新的 images.xaml 文件（资源字典）。

见https://github.com/BerndK/SvgToXaml

【讨论】：

我真的可以推荐 BerndK 的工具。它就像一个魅力，易于使用。我在运行问题时遇到了一些尖锐向量没有查看图像的问题，我无法解决问题。然而，BerndKs 工具使得将我的 svg 文件转换为几何图形变得非常简单！
刚刚下载并且对 BerndK 的 SvgToXaml 感到满意。虽然我错过了几个 feOffset 和 feColorMatrix、feGaussianBlur、feComposit 等值，但仍然......它给了我一个很好的开始，只需将其输出作为<Image><Image.Source></Image.Source></Image>
嘿@BerndK 我正在使用图书馆，但它只显示黑白图像。我集成了 SVGXAML 项目，所以我正在动态加载图像，但它们以黑白显示
@Joseph：该库旨在将 SVG 转换为 .NET Path 对象。这个设计不是彩色的，所以你可以（并且必须）设置你喜欢的颜色。这对于现代设计使用的单色图标很有用。如果你想要多色图标，你可以组合几个路径（如 SvgToXaml 的演示所示），但我会考虑使用 png 文件。这样做可能会失去路径/几何形状的优势：可扩展而不会损失质量。

【解决方案2】：

我很幸运有 DevExpress，您可以在其中使用 WpfSvgRenderer.CreateImageSource。不想在这里做广告，但由于它是一个广泛使用的库，可能有些人很高兴知道。

不幸的是，svg 中的文本元素尚不支持。

【讨论】：