XAML 中图标格式的最佳实践（SVG、路径数据点、几何/XAML 或字体）

Question

我试图了解 WPF 表单上 FormState 图标（或一般图标）的最佳实践。

我问的原因是因为当我最初创建最小/最大/恢复/关闭按钮时，我创建了一些不同的实现，认为完成后其中一个会很明显。我首先使用与 MahApps 的现代 UI 相同的方法创建它们。使用 xaml 中的数据点来绘制它们。然后，我通过从 Visual Studio 2012 跟踪它们，在 illustrator 中创建了我自己的，然后将它们保存为 SVG。我的第三种方法是在另一个人提到他们在内部使用 Merlott 字体之后。

在研究使用 merlott 字体后，我找到了同一主题的答案。答案说使用 Merlott 字体是最佳实践，并避免使用路径数据点。答案可以在这里看到：让 WPF 应用程序看起来像 Metro 风格，即使在 Windows 7 中也是如此？

所以这让我更加质疑它。我决定使用可缩放矢量图形（SVG 格式）。

从那里我能够将 Blend Design 中的图形转换为纯 XAML。它使用几何图形来渲染形状。

所以目前我有4 种不同的方法来完成这个任务。每个都围绕相同的难度。

1. 可缩放矢量图形- 在 illustrator 中重新绘制形状并导出为纯可缩放矢量图形，并使用 .svg 作为资源。
2. Geometry/XAML - 将 SVG 直接转换为 XAML。该实现使用几何图形来渲染形状。
3. 路径数据点- 使用另一种 XAML 方法来绘制图标。
4. Windows Font(Merlott) - 这已经存在很长时间了，有些人认为这是最佳实践。通常我认为这不是一个可行的选择，除非在项目中包含字体，但 Merlott 默认安装在 Windows 上。

所以这让我很困惑。我有这 4 个实现，都很容易实现，但不知道哪一个是最佳实践。

有些人可能认为这是主观的，而且可能是肛门的。尽管我想在这个项目（以及未来的项目）上使用最佳实践。

有人能解释一下哪一个是更好的选择吗？为什么？

Answer 1

看来这个工具非常适合您：

https://github.com/BerndK/SvgToXaml

它可以浏览 svg 文件并转换它们（无需使用 inkscape 或 illustrator 等其他工具）。它还可以为文件夹中的所有 svgs 创建单个 xaml 文件（批量）。你只需要像这样引用创建的对象就可以了：

<Button>
  <Image Source="{StaticResource cloud_3_iconDrawingImage}"/>
</Button>

包含示例应用程序。

回答你的问题（4个选项？）

选项 1 不可能开箱即用（解决方案可能是https://sharpvectors.codeplex.com/）

选项 2 和选项 3 似乎是相同的 - 路径对象使用几何图形。更准确地说，我更喜欢使用图像而不是路径，因为图像具有裁剪并且可以包含多个具有多种颜色的 PathGeometries。图像比路径可以更好地处理鼠标点击。结果可能如下所示：

<DrawingImage x:Key="cloud_3_iconDrawingImage">
  <DrawingImage.Drawing>
    <DrawingGroup ClipGeometry="M0,0 V512 H512 V0 H0 Z">
      <GeometryDrawing Brush="#FF000000" Geometry="F1 M512,512z M0,0z M409.338,216.254C398.922,161.293 350.672,120.477 293.557,120.477 258.459,120.477 225.926,135.762 203.686,162.061 166.538,152.155 127.607,173.842 116.753,210.84 78.16,222.176 50.6,257.895 50.6,299.303 50.6,350.155 91.97,391.524 143.822,391.524L369.18,391.524C420.03,391.524 461.401,350.155 461.401,299.303 461.4,263.389 440.941,231.457 409.338,216.254z M369.18,351.523L143.821,351.523C114.026,351.523 90.599,328.097 90.599,299.302 90.599,265.224 118.249,239.224 152.785,245.486 141.249,205.89 196.916,183.556 217.426,213.138 222.583,198.556 243.249,160.476 293.557,160.476 331.584,160.476 370.918,186.556 372.221,245.458 397.584,245.556 421.401,263.89 421.401,299.302 421.4,328.098 397.975,351.523 369.18,351.523z" />
    </DrawingGroup>
  </DrawingImage.Drawing>
</DrawingImage>

请注意，这是要存储在资源中某处的“图像/图标”的定义。要显示它，请将其用作带有图像的 ImageSource，如上所示。

选项4：我认为那里只给出了一些图标，不是我首选的解决方案，但也许我对字体的理解是错误的。