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

这篇具有很好参考价值的文章主要介绍了win10 uwp 简单制作一个 Path 路径绘制的图标按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文告诉大家在 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>

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

为了防止大家不知道上文给的代码是写到哪里,下面给出页面的代码,可以拷贝在自己的项目里了解效果文章来源地址https://www.toymoban.com/news/detail-712162.html

<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>

到了这里,关于win10 uwp 简单制作一个 Path 路径绘制的图标按钮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【WIN10更改鼠标指针默认图标】

    选择一张png格式的图片来制作鼠标的格式 通过在线工具: onlineconvertfree将.png格式的图片转换成.ico格式 注:这里不直接转换成.cur格式是因为直接转换的.cur文件不可用 F2将.ico的后缀重命名为.cur WIN键–输入鼠标设置–其他鼠标选项–指针 选择浏览,选择刚才制作的素材,点击

    2024年02月13日
    浏览(62)
  • 修改Win10某种文件类型的默认图标

    Typora收费后,降版本使用0.94版的,却发现这个版本的文件图标是这样的。 看的很难受,于是就开始研究怎么修改文件图标。 首先打开注册表 win + R 输入 regedit,找到以下路径 HKEY_CURRENT_USERSOFTWAREMicrosoftWindowsCurrentVersionExplorerFileExts.mdUserChoice 看到这个文件的值,记下后,

    2024年02月13日
    浏览(37)
  • Win10电脑桌面图标和任务栏图标一直闪烁不停刷新的解决方法

    我原本是用360杀毒软件去进行杀毒的,然后杀完之后,出现任务栏无限闪烁重启, 我搜了一个小时,然后找到了 http://m.lotpc.com/dngz/9176.html?ivk_sa=1024320u 这个帖子,抱着死马当活马医去弄的,本来打算如果还不行就重做系统的,结果发现竟然弄好了. 原文: http://m.lotpc.com/dngz/9176.html?ivk_s

    2024年02月11日
    浏览(59)
  • win10系统电脑声音图标正常,但没有声音

    由于一些原因重装win10系统,重装系统后,笔记本电脑没有声音(重装系统前系统有声音,故先排除硬件问题),系统声音图标显示正常(没有红叉),声音驱动也全部用 驱动精灵 检查更新了,但还是没有声音,插入耳机后,耳机能识别到,但同样没有声音。 网上试过很多

    2024年02月11日
    浏览(53)
  • win10 TortoiseGit 图标不显示的解决方法

    通过win+r快捷键,打开“运行”,输入regedit,打开注册表 注册表中,定位到以下路径: 计算机HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersionExplorerShellIconOverlayIdentifiers 在路径中,可以看到TortoiseGit的名称前,包含别的注册表项。如果TortoiseGit的名称排列顺序在后,则会导致

    2024年02月12日
    浏览(40)
  • 完全隐藏Win 10托盘中自带的安全中心图标

    事情是这样的,每次看到这个图标总是让我不爽,即使收纳到隐藏栏之后,我也受不了。再者,如果我要是在安装第三方安全软件后,这个隐藏栏就有自带和第三方安全软件图标,而且显得冗余,所以我打算把自带的完全隐藏。 下面就是我使用的2种具体方法: 第1步: 打开

    2024年02月06日
    浏览(63)
  • Win10,Office2016及以上图标异常解决方案

    不管怎么说,首先 重新设置一下打开方式 ,有时候问题就直接解决了,可能是因为曾经手动设置将打开方式定位到office安装目录的exe文件,虽然可以顺利打开运行,但图标会出现异常。 去官网 https://otp.landian.vip/zh-cn/ 安装Office Tool Plus工具,这年头难得看到一个免费的非流氓

    2024年02月03日
    浏览(44)
  • win10电脑中音量图标无法打开的详细解决方法

    在win10系统中,我们经常会对音量进行调整,那么就需要通过音量图标来进行设置,可是有时候可能会遇到音量图标无法打开的情况,该如何解决呢,为此小编这就给大家带来win10电脑中音量图标无法打开的具体解决方法。 1、右键任务栏开始菜单,打开运行菜单项; 2、在运

    2024年02月12日
    浏览(40)
  • Flutter笔记:完全基于Flutter绘图技术绘制一个精美的Dash图标(下)

    Flutter笔记 完全基于Flutter绘图技术绘制一个精美的Dart吉祥物Dash 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/134098955 另见: 上上篇文章:《完全基于Flutter绘图技术绘制一个精美的Dart语言吉祥物

    2024年02月07日
    浏览(48)
  • Flutter笔记:完全基于Flutter绘图技术绘制一个精美的Dash图标(上)

    Flutter笔记 完全基于Flutter绘图技术绘制一个精美的Dart语言吉祥物Dash(上) 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/134098877 【介绍】:本文完全基于Flutter绘图技术绘制一个精美的Dash图标(上

    2024年02月07日
    浏览(141)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包