如何在UWP中使用Path绘制清晰搜索箭头以替代模糊的FontIcon

实现方案 #

结论 #

不需要裁剪透明图片，使用矢量Path即可实现高清无模糊的箭头效果，完全可以匹配你预期的专业显示效果。

替换步骤 #

直接将原代码中的<FontIcon>节点替换为以下Path代码即可：

<Path x:Name="GlyphElement" 
      Data="M 0 1.5 L 7 4 L 0 6.5 L 1.5 4 Z" 
      Fill="#BFBFBF" 
      Stretch="Uniform"
      Width="30"
      Height="30"
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      UseLayoutRounding="True"/>

自定义调整说明 #

• 如果当前形状不符合你的预期，可以修改Data属性的路径数值调整箭头的粗细、比例：
  • 你可以用Blend for Visual Studio可视化绘制所需的箭头形状，工具会自动生成对应的Path路径数据
  • 如果你需要线框风格的箭头，可以将Fill设为Transparent，新增Stroke="#BFBFBF"、StrokeThickness="1"属性，即可实现纯线框的效果
• Path是矢量图形，无论怎么缩放都会适配当前设备的分辨率渲染，不会出现字体图标因为字体渲染机制导致的边缘模糊问题，是这类图标实现的最优方案。

内容的提问来源于stack exchange，提问作者Sujith