c# - XAML 中图标格式的最佳实践(SVG、路径数据点、几何/XAML 或字体)

Question

我正在尝试了解 WPF 表单上 FormState 图标(或一般图标)的最佳实践。

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

在研究使用 merlott 字体后，我找到了关于同一主题的答案。答案说使用 Merlott 字体是最佳实践，并避免使用路径数据点。答案可以在这里看到:Making WPF applications look Metro-styled, even in Windows 7?

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

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

所以此时我有 4 种不同的方法来完成这项任务。每一个都围绕着相同的难度。

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

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

有些人可能认为这是主观的，并且可能是肛门的。尽管我想在此项目(以及 future 的项目)中使用最佳实践。

谁能解释一下哪个更好，为什么？

Answer 1

看来这个工具很适合你:

https://github.com/BerndK/SvgToXaml

它可以浏览 svg 文件并转换它们(无需使用其他工具，如 inkscape 或 illustrator)。它还可以为文件夹(批处理)中的所有 svg 创建单个 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:我认为那里只给出了一些图标，不是我的首选解决方案，但也许我理解你的想法是字体错误。