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

本文关键字：XAML 数据 路径 字体 几何 SVG 格式 图标 最佳 | 更新日期: 2023-09-27 18:02:04

我正在尝试在WPF表单上获得FormState图标(或一般图标)的最佳实践的感觉。

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

在查看使用merlott字体后，我找到了关于同一主题的答案。答案是，使用Merlott字体是最佳实践，避免使用路径数据点。答案可以在这里看到:让WPF应用程序看起来像metro风格，即使在Windows 7中?

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

从那里，我能够将混合设计中的图形转换为纯XAML。它使用几何图形呈现形状。

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

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

有些人可能认为这是主观的，可能是肛门。尽管我希望在这个项目(以及未来的项目)中使用最佳实践。

谁能解释一下哪一个是更好的选择，为什么?

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

这个工具似乎很适合你:

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似乎是相同的- Path-Object使用几何。更准确地说，我更喜欢使用图像而不是路径，因为图像有剪辑，可以包含几个颜色的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:我认为那里只有一些图标，不是我喜欢的解决方案，但也许我理解你的想法与字体错误。

相关文章：