ToB企服应用市场:ToB评测及商务社交产业平台

标题: win10 uwp 简单制作一个 Path 路径绘制的图标按钮 [打印本页]
作者: 去皮卡多    时间: 2023-9-28 00:01
标题: win10 uwp 简单制作一个 Path 路径绘制的图标按钮
本文告诉大家在 UWP 或 WinUI 3 里面如何简单制作一个由 Path 几何路径图形绘制的图标按钮
先在资源里面定义按钮的样式，重写 Template 属性，通过在 Template 里面放入 Path 绑定 Data 到内容从而实现让 Path 显示集合路径图形，代码如下
  1.         <Button  Content="{StaticResource Geometry.Close}"></Button>
复制代码
接下来有路径资源可以先在资源字典里面定义，定义的是字符串即可，如以下代码
  1.         <Button  Content="{StaticResource Geometry.Close}"></Button><x:String x:Key="Geometry.Close">M18.363961,5.63603897 C18.7544853,6.02656326 18.7544853,6.65972824 18.363961,7.05025253 L13.4142136,12 L18.363961,16.9497475 C18.7544853,17.3402718 18.7544853,17.9734367 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 L12,13.4142136 L7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C5.24551468,17.9734367 5.24551468,17.3402718 5.63603897,16.9497475 L10.5857864,12 L5.63603897,7.05025253 C5.24551468,6.65972824 5.24551468,6.02656326 5.63603897,5.63603897 C6.02656326,5.24551468 6.65972824,5.24551468 7.05025253,5.63603897 L12,10.5857864 L16.9497475,5.63603897 C17.3402718,5.24551468 17.9734367,5.24551468 18.363961,5.63603897 Z</x:String>
复制代码
这里有一个细节点是在 UWP 或 WinUI 3 里，字符串类型应该使用 x:String 而不是使用 system:String 的方式，如以下错误的代码例子
  1.         <Button  Content="{StaticResource Geometry.Close}"></Button>    <x:String x:Key="Geometry.Close">M18.363961,5.63603897 C18.7544853,6.02656326 18.7544853,6.65972824 18.363961,7.05025253 L13.4142136,12 L18.363961,16.9497475 C18.7544853,17.3402718 18.7544853,17.9734367 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 L12,13.4142136 L7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C5.24551468,17.9734367 5.24551468,17.3402718 5.63603897,16.9497475 L10.5857864,12 L5.63603897,7.05025253 C5.24551468,6.65972824 5.24551468,6.02656326 5.63603897,5.63603897 C6.02656326,5.24551468 6.65972824,5.24551468 7.05025253,5.63603897 L12,10.5857864 L16.9497475,5.63603897 C17.3402718,5.24551468 17.9734367,5.24551468 18.363961,5.63603897 Z</x:String>        <Button  Content="{StaticResource Geometry.Close}"></Button>   
复制代码
以上的代码可能抛出的是 Microsoft.UI.Xaml.Markup.ReflectionHelperException Error in reflection helper.  Please add 'false' to your project file..  Created Xaml type 'String' has a different name than requested type 'System.String' 错误，也可能抛出的是 Windows.UI.Xaml.Markup.XamlParseException: XAML parsing failed. 异常。这几个异常这么奇怪，其实是微软从 2015 开始就毫无长进的 WinUI 异常提示机制，由于经过了 COM 的 WinUI 底层，导致了上层抛出的不是本质的异常，也不知道是哪一行，只能依靠逐步静态阅读代码和不断运行尝试才能知道是哪里写错了
回到使用代码里面，图标按钮的使用方法特别简单，只需要将以上的 x:String 的几何路径设置到按钮的内容，然后设置按钮的样式就完成
  1.         <Button  Content="{StaticResource Geometry.Close}"></Button>
复制代码
如此简单即可完成图标按钮
为了防止大家不知道上文给的代码是写到哪里，下面给出页面的代码，可以拷贝在自己的项目里了解效果
  1.         <Button  Content="{StaticResource Geometry.Close}"></Button>    <x:String x:Key="Geometry.Close">M18.363961,5.63603897 C18.7544853,6.02656326 18.7544853,6.65972824 18.363961,7.05025253 L13.4142136,12 L18.363961,16.9497475 C18.7544853,17.3402718 18.7544853,17.9734367 18.363961,18.363961 C17.9734367,18.7544853 17.3402718,18.7544853 16.9497475,18.363961 L12,13.4142136 L7.05025253,18.363961 C6.65972824,18.7544853 6.02656326,18.7544853 5.63603897,18.363961 C5.24551468,17.9734367 5.24551468,17.3402718 5.63603897,16.9497475 L10.5857864,12 L5.63603897,7.05025253 C5.24551468,6.65972824 5.24551468,6.02656326 5.63603897,5.63603897 C6.02656326,5.24551468 6.65972824,5.24551468 7.05025253,5.63603897 L12,10.5857864 L16.9497475,5.63603897 C17.3402718,5.24551468 17.9734367,5.24551468 18.363961,5.63603897 Z</x:String>        <Button  Content="{StaticResource Geometry.Close}"></Button>        <Button  Content="{StaticResource Geometry.Close}"></Button>        <Button  Content="{StaticResource Geometry.Close}"></Button>   
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4