首页 > 其他分享 >win10 uwp 简单制作一个 Path 路径绘制的图标按钮

win10 uwp 简单制作一个 Path 路径绘制的图标按钮

时间:2023-09-21 09:05:16浏览次数:61  
标签:6.65972824 5.24551468 uwp 6.02656326 18.7544853 5.63603897 win10 Path 18.363961

本文告诉大家在 UWP 或 WinUI 3 里面如何简单制作一个由 Path 几何路径图形绘制的图标按钮

先在资源里面定义按钮的样式,重写 Template 属性,通过在 Template 里面放入 Path 绑定 Data 到内容从而实现让 Path 显示集合路径图形,代码如下

        <Style x:Key="Style.TitlebarButton" TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="#808080" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="Width" Value="24"/>
            <Setter Property="Height" Value="24"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ButtonBase">
                        <Grid Background="{TemplateBinding Background}">
                            <Path Fill="{TemplateBinding Foreground}" Data="{TemplateBinding Content}"></Path>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

接下来有路径资源可以先在资源字典里面定义,定义的是字符串即可,如以下代码

        <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 的方式,如以下错误的代码例子

<Page
    x:Class="LefernochihairWhemfawqarkemche.MainPage"
    ...
    xmlns:system="using:System">

    <Page.Resources>
        <system: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</system:String>
    </Page.Resources>
    <Grid>
    </Grid>
</Page>

以上的代码可能抛出的是 Microsoft.UI.Xaml.Markup.ReflectionHelperException Error in reflection helper. Please add '<PropertyGroup><EnableTypeInfoReflection>false</EnableTypeInfoReflection></PropertyGroup>' 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 的几何路径设置到按钮的内容,然后设置按钮的样式就完成

        <Button Style="{StaticResource Style.TitlebarButton}" Content="{StaticResource Geometry.Close}"></Button>

如此简单即可完成图标按钮

为了防止大家不知道上文给的代码是写到哪里,下面给出页面的代码,可以拷贝在自己的项目里了解效果

<Page
    x:Class="LefernochihairWhemfawqarkemche.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LefernochihairWhemfawqarkemche"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="using:System"
    xmlns:helpers="using:LefernochihairWhemfawqarkemche.Helpers"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <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>

        <Style x:Key="Style.TitlebarButton" TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="#808080" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Top" />
            <Setter Property="Width" Value="24"/>
            <Setter Property="Height" Value="24"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ButtonBase">
                        <Grid Background="{TemplateBinding Background}">
                            <Path Fill="{TemplateBinding Foreground}" Data="{TemplateBinding Content}"></Path>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid>
        <Button Style="{StaticResource Style.TitlebarButton}" Content="{StaticResource Geometry.Close}" Click="Button_OnClick"></Button>
    </Grid>
</Page>

标签:6.65972824,5.24551468,uwp,6.02656326,18.7544853,5.63603897,win10,Path,18.363961
From: https://www.cnblogs.com/lindexi/p/17719024.html

相关文章

  • systemd path:实时监控文件和目录的变动
    回到Systemd系列文章大纲systemdpath:实时监控文件和目录的变动systemdpath工具提供了监控文件、目录变化并触发执行指定操作的功能。有时候这种监控功能是非常实用的,比如监控到/etc/nginx/nginx.conf或/etc/nginx/conf.d/发生变化后,立即reloadnginx。虽然,用户也可以使用in......
  • class path resource [.xml] cannot be opened because it does not exist
    classpathresource[bean1.xml]cannotbeopenedbecauseitdoesnotexist错误重现bug:Exceptioninthread"main"org.springframework.beans.factory.BeanDefinitionStoreException:IOExceptionparsingXMLdocumentfromclasspathresource[bean1.xml]......
  • java 运行 jar classpath配置
    按照developrworks上说的: http://www.ibm.com/developerworks/cn/java/j-jar/index.html 创建可执行JAR创建一个可执行JAR很容易。首先将所有应用程序代码放到一个目录中。假设应用程序中的主类是 com.mycompany.myapp.Sample。您要创建一个包含应用程序代码的JAR文件并标......
  • Win10除了应用软件都打不开了怎么办?
    解决方法:Windows+X或者开始键右键选择命令提示符(WindowsPowershell)选则那个带管理员权限的然后输入====  netshwinsockreset回车等一会会它会提示你重启重启电脑完成修复#可能是因为是你下载的软件是非正规渠道下的,破坏了注册表......
  • C:\Keil_v5\ARM\ARMCC\include\stdint.h contains an incorrect path.
    1.问题在使用Keiluvison5打开例程代码进行学习时,发现部分.h文件无法读取2.解决方法1.找到如图的设置按钮(小锤子)2.根据自己所用的是C/C++还是ARM选择(我这里是C/C++)3.在includepath这里加入内容4.找到你自己安装目录下的如图目录5.将其中的include目录绝对路径加入in......
  • RPF(reverse path forwarding)
    RPF(反向路径转发)路由器收到组播数据报文后,只有确定这个数据报文是从自身连接到组播源的接口上收到的,才进行转发,否则丢弃RPF检查在大伯路由表中查找到组播报文源地址的路由如果该路由的出接口就是组播报文的入接口,RPF检查成功,否则RPF检查失败,报文丢弃注意:该路由的出接口就是组播报文......
  • win10 mysql
    windows10下安装配置mysql8.0(保姆级教程)news2023/9/1910:53:13 文章目录一、MySQL8.0的基本信息二、MySQL8.0的系统要求三、MySQL8.0的安装步骤3.1.下载MySQL8.03.2.运行MySQL安装文件3.3.选择安装类型3.4.配置MySQLServer3.5mysqlshell的使......
  • win10 按键盘偶尔会出现一个光圈when pressing ctrl, randomly a white circle thing
    whenpressingctrl,randomlyawhitecirclethingappearsaroundmymousecurser.SolutionTwo:Thisonlyappliesifyouhave"Powertoys"installed. OpenPowertoysNavigateto'Mouseutilities'onthesidepanel.Turnoff'......
  • analyze和collectFirstUIP函数使用pathCs和seen注意事项
    analyze和collectFirstUIP函数都非常巧妙地使用pathCs和seen进行遍历冲突生成的传播路径注意:相关修改和借用,需要确保reason中的c0为BCP蕴含文字。 由于传播函数在处理观察时未对watches_bin的观察元对应子句做相应的文字调整处理,所以最为直接的方法是在传播阶段确保二元子句......
  • iOS开发Swift-UITableView-func tableView(_ tableView: UITableView, cellForRowAt i
    functableView(_tableView:UITableView,cellForRowAtindexPath:IndexPath)->UITableViewCell{letcellid="testCellID"//cell的IDvarcell=tableView.dequeueReusableCell(withIdentifier:cellid)//对cell赋值ifcel......