WINUI——Trigger(触发器)使用小结

news2024/11/23 17:06:18

背景

WINUI不提供原生的Trigger支持,推荐使用VisualStateManager进行操作;然对于从WPF转WINUI的开发人员而言,经常会想用Trigger解决问题,鉴于此社区推出了CommunityToolkit.WinUI.Triggers以支持Trigger的使用。

使用方法

1.项目中引入CommunityToolkit.WinUI.Triggers Nuget包。

当前最新稳定版本为8.0.240109,具体见下图:

2. 在Page中引入CommunityToolkit.WinUI

xmlns:triggers="using:CommunityToolkit.WinUI"

3. 在需要的地方编写相应的Trigger

如编写一个校验是否为邮箱的校验,以下为示例截图:

xml中代码如下:

<Page x:Class="TriggersExperiment.Samples.RegexStateTriggerSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TriggersExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:triggers="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="validEmail">
                    <VisualState.StateTriggers>
                        <!--  Note: Simple example RegEx, see our IsEmail string extension using emailregex.com for official RFC 5322 support  -->
                        <triggers:RegexStateTrigger Expression="^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$"
                                                    Options="IgnoreCase"
                                                    Value="{Binding Text, ElementName=emailTextBox, Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="emailStatus.Text" Value="This is a valid email" />
                        <Setter Target="emailStatus.Foreground" Value="{ThemeResource SystemFillColorSuccessBrush}" />
                        <Setter Target="submitButton.IsEnabled" Value="true" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel MaxWidth="400">
            <TextBox x:Name="emailTextBox"
                     HorizontalAlignment="Stretch"
                     Header="Enter an email" />
            <TextBlock x:Name="emailStatus"
                       Margin="0,4,0,24"
                       Foreground="{ThemeResource SystemFillColorCriticalBrush}"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Text="Not a valid email" />
            <Button x:Name="submitButton"
                    Content="Submit"
                    IsEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

后台代码如下:

using CommunityToolkit.WinUI;

namespace TriggersExperiment.Samples;

[ToolkitSample(id: nameof(RegexStateTriggerSample), "RegexStateTrigger", description: $"A sample for showing how to create and use a {nameof(RegexStateTrigger)}.")]
public sealed partial class RegexStateTriggerSample : Page
{
    public RegexStateTriggerSample()
    {
        this.InitializeComponent();
    }
}

注:以上示例来源于Github。

实现原理

可以看到Trigger的实现还是借助于VisualState实现,只是自定义了一些相应的校验规则而已。以后再做相应介绍。

参考链接:

GitHub - CommunityToolkit/Windows: Collection of controls for WinUI 2, WinUI 3, and Uno Platform developers. Simplifies and demonstrates common developer tasks building experiences for Windows with .NET.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1828228.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Properties与xml知识点总结

文章目录 一、Properties1.1 构造方法1.2 从Properties文件中获取1.3 向Properties文件中存储 二、xml2.1 XML2.2 特点2.3 规则2.3 抬头声明2.4 特殊字符2.5 **CDATA区段**2.4 作用和应用场景 三、区别 一、Properties 定义&#xff1a;properties是一个双列集合集合&#xff…

双链表——AcWing.827双链表

双链表 定义 双链表是链表的一种&#xff0c;它的每个节点有两个指针&#xff0c;一个指向前一个节点&#xff0c;一个指向后一个节点。这样使得链表可以双向遍历。 运用情况 频繁进行前后双向遍历操作时非常有用&#xff0c;比如在一些需要来回移动处理数据的场景。可以方…

【Linux系列】深入理解 CURL 命令及其在网络请求中的应用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

用宝塔部署vue+springboot上线公网详细步骤

首先自己在腾讯云中按照教程安装好宝塔。这是宝塔面板&#xff0c;获取登录宝塔的网址和账号密码。 1.在navicat新建数据库 如果出现权限问题&#xff0c;可以在宝塔数据库面板phpMyAdmin中进行权限设置 navicat可以修改用户权限 2.在宝塔面板新建数据库 3.将前端打包的dist文件…

k8s部署短视频网站(后台+web前端+web管理)

一、系统环境 系统centos7k8sv1.24containerdv1.7.16etcdv3.5.0 二、镜像生成工具准备 nerdctlv1.7.6buildkitv0.13.2 1 nerdctl安装 下载&#xff1a; wget -c https://github.com/containerd/nerdctl/releases/download/v1.7.6/nerdctl-full-1.7.6-linux-amd64.tar.gz …

【电路笔记】-共基极放大器

共基极放大器 文章目录 共基极放大器1、概述2、等效电路3、电流增益4、输入阻抗5、输出阻抗6、电压增益7、示例:电压、电流和功率增益8、总结1、概述 在本文中,我们将介绍双极晶体管放大器的最后一种拓扑,称为共基极放大器 (CBA)。 下面的图 1 显示了 CBA 的电气图,此处没…

RabbitMQ揭秘:轻量级消息队列的优缺点全解析

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! 亲爱的读者朋友们,大家好!我是小米,一个热爱技术、喜欢分享的大哥哥。今天我们来聊聊一个在消息队列领域非常重要的工具——RabbitMQ。作为一个在通信…

python简单练习案例-石头剪刀布小游戏

&#x1f308;所属专栏&#xff1a;【python】 ✨作者主页&#xff1a; Mr.Zwq ✔️个人简介&#xff1a;一个正在努力学技术的Python领域创作者&#xff0c;擅长爬虫&#xff0c;逆向&#xff0c;全栈方向&#xff0c;专注基础和实战分享&#xff0c;欢迎咨询&#xff01;…

L53--- 144. 二叉树的后序遍历(深搜)---Java版

1.题目描述 2.思路 &#xff08;1&#xff09;比如 1/ \2 3从根节点开始&#xff1a; 初始时&#xff0c;currentSum 为 0。 根节点的值为 1。 更新后的 currentSum 0 * 10 1 1。 处理左子节点&#xff1a; 当前 currentSum 为 1&#xff08;即路径 “1”&#xff09;。…

AI预测体彩排3采取888=3策略+和值012路或胆码测试6月16日升级新模型预测第1弹

根据前面的预测效果&#xff0c;我对模型进行了重新优化&#xff0c;因为前面的模型效果不是很好。熟悉我的彩友比较清楚&#xff0c;我之前的主要精力是对福彩3D进行各种模型的开发和预测&#xff0c;排三的预测也就是最近1个月才开始搞的。3D的预测&#xff0c;经过对模型的多…

【Emacs Verilog mode保姆级的使用指南】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

FreeBSD jail虚拟容器里装ubuntu系统没有apt命令怎么办?

问题 在FreeBSD jail里使用linux兼容创建了ubuntu环境&#xff0c;但是没有apt命令&#xff0c;该怎么办呢&#xff1f; jail的介绍&#xff1a;FreeBSD jail 容器手册_freebsd虚拟化-CSDN博客 系统是这样进去的&#xff1a; jexec focal chroot /compat/ubuntu /bin/bash …

38、基于卷积神经网络(CNN)的车牌自动识别系统(matlab)

1、原理及流程 1&#xff09;原理 CNN&#xff08;卷积神经网络&#xff09;是一种深度学习模型&#xff0c;可以用于图像识别和分类任务。车牌自动识别系统的原理基本上就是使用CNN模型对车牌图像进行处理和识别。 首先&#xff1a;系统需要收集大量的含有车牌的图像数据作…

异常封装类统一后端响应的数据格式

异常封装类 如何统一后端响应的数据格式 1. 背景 后端作为数据的处理和响应&#xff0c;如何才能和前端配合好&#xff0c;能够高效的完成任务&#xff0c;其中一个比较重要的点就是后端返回的数据格式。 没有统一的响应格式&#xff1a; // 第一种&#xff1a; {"dat…

UniApp+Vue3使用Vant-微信小程序组件

第一步&#xff1a;打开创建好的UniappVue3的项目 第二步&#xff1a;下载Vant-Weapp npm i vant/weapp -S --production 第三步&#xff1a;修改目录名称 wxcomponents 必须是wxcomponents 第四步&#xff1a;将下载好的vant中的dist目录剪切到当前wxcomponents目录下 第五…

贪心算法学习五

例题一 解法&#xff08;贪⼼&#xff09;&#xff1a; 贪⼼策略&#xff1a; 我们的任何选择&#xff0c;应该让这个数尽可能快的变成 1 。 对于偶数&#xff1a;只能执⾏除 2 操作&#xff0c;没有什么分析的&#xff1b; 对于奇数&#xff1a; i. 当 n 1 的时候…

低代码开发MES系统,一周实现数字化

随着工业4.0和智能制造的兴起&#xff0c;企业对于生产过程的数字化、智能化需求日益迫切。制造执行系统&#xff08;MES&#xff09;作为连接计划层与控制层的关键信息系统&#xff0c;在提升生产效率、优化资源配置、保障产品质量等方面发挥着重要作用。然而&#xff0c;传统…

不可不知的Java SE技巧:如何使用for each循环遍历数组

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

LVGL刷屏优化(基于ESP32)

主要参考资料&#xff1a; 乐鑫ESP-IDF官方手册SPI Flash and External SPI RAM Configuration: https://docs.espressif.com/projects/esp-idf/zh_CN/release-v5.0/esp32s3/api-guides/flash_psram_config.html 目录 驱动和端口优化RAM与PSRAMFLASH SPI与PSRAM SPI LVGL优化修…

使用Vue中的<TransitionGroup/>进入动画不生效不显示问题

Vue中有两个过渡动画组件分别是&#xff1a;<TransitionGroup/> <TransitionGroup/>进入动画不生效不显示问题 &#xff0c;在渲染列表上加上v-if&#xff0c;看代码&#xff0c;让他每次渲染都重新渲染 加上v-if即可 <template> <TransitionGroup nam…