WPF+MVVM案例实战(一)- 设备状态LED灯变化实现

文章目录

  • 1、项目创建
  • 2、UI界面布局
    • 1. MainWindow.xaml
    • 2、颜色转换器实现
    • 2.MainViewModel.cs 代码实现
  • 3、运行效果
  • 4.源代码下载


1、项目创建

打开 VS2022 ,新建项目 Wpf_Examples,创建各层级文件夹,安装 CommunityToolkit.Mvvm 和 Microsoft.Extensions.DependencyInjectio NuGet包,完成MVVM框架搭建。搭建完成后项目层次如下图所示:
在这里插入图片描述
这里如何实现 MVVM 框架可以参考本人 像 MvvmLight 一样使用 CommunityToolkit.Mvvm 工具包 的文章

2、UI界面布局

1. MainWindow.xaml

<Window x:Class="Wpf_Examples.MainWindow"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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:converter="clr-namespace:Wpf_Examples.Converters"xmlns:local="clr-namespace:Wpf_Examples"DataContext="{Binding Source={StaticResource Locator},Path=Main}"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><converter:StatusToColorConverter x:Key="StatusToColorConverter"/></Window.Resources><Grid><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right"><TextBlock Text="网络" FontSize="16" Foreground="DarkGray" Margin="0 0 20 0"/><Ellipse Width="20" Height="20" Fill="{Binding NetStatusValue, Converter={StaticResource StatusToColorConverter}}"/></StackPanel><StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"><TextBlock Text="PLC" FontSize="16" Foreground="DarkGray" Margin="0 0 20 0"/><Ellipse Width="20" Height="20" Fill="{Binding PLCStatusValue, Converter={StaticResource StatusToColorConverter}}"/></StackPanel><StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"><TextBlock Text="相机" FontSize="16" Foreground="DarkGray" Margin="0 0 20 0"/><Ellipse Width="20" Height="20" Fill="{Binding DevStatusValue, Converter={StaticResource StatusToColorConverter}}"/></StackPanel></Grid></Grid>
</Window>

界面效果如下:
在这里插入图片描述

2、颜色转换器实现

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;
using System.Windows.Media;namespace Wpf_Examples.Converters
{public class StatusToColorConverter : IValueConverter{public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture){if (value is int statusValue){switch (statusValue){case 0:return Brushes.Red;case 1:return "#E5D21C";case 2:return Brushes.Green;default:return Brushes.Green; // 默认颜色}}return Brushes.Gray;}public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture){throw new NotImplementedException();}}
}

2.MainViewModel.cs 代码实现

代码如下(示例):

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Threading;namespace Wpf_Examples.ViewModels
{public class MainViewModel:ObservableObject{/// <summary>/// 网络状态按钮名称/// </summary>private int netStatusValue = 2;public int NetStatusValue{get { return netStatusValue; }set { SetProperty(ref netStatusValue, value); }}/// <summary>/// PLC状态按钮名称/// </summary>private int plcStatusValue = 1;public int PLCStatusValue{get { return plcStatusValue; }set { SetProperty(ref plcStatusValue, value); }}/// <summary>/// 设备状态/// </summary>private int devStatusValue = 0;public int DevStatusValue{get { return devStatusValue; }set { SetProperty(ref devStatusValue, value); }}public MainViewModel(){CreateTimer();}private void CreateTimer(){#region 每秒定时器服务DispatcherTimer cpuTimer = new DispatcherTimer{Interval = new TimeSpan(0, 0, 0, 3, 0)};cpuTimer.Tick += DispatcherTimer_Tick;cpuTimer.Start();#endregion}private void DispatcherTimer_Tick(object sender, EventArgs e){DevStatusValue=StatusChange(DevStatusValue);NetStatusValue=StatusChange(NetStatusValue);PLCStatusValue=StatusChange(PLCStatusValue);}private int StatusChange(int value){int outVal = 0;//状态变化if (value == 0){outVal = 1;}else if (value == 1){outVal = 2;}else{outVal = 0;}return outVal;}}
}

3、运行效果

在这里插入图片描述

4.源代码下载

CSDN下载链接WPF+MVVM案例实战-设备状态LED灯变化实现

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

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

相关文章

react18中react-thunk实现公共数据仓库的异步操作

redux及react-redux都只能实现数据的同步修改更新&#xff0c;有点类似于vue中的mutation&#xff0c;只能做同步操作&#xff0c;异步的话不用actions来实现。由于在项目始终不可避免要实现的异步数据的更新&#xff0c;这明显不够用了。是时候引入我们的异步中间件redux-thun…

长思维PRM

思维链 除了常见的连接词如 “and” 和 “so” 之外。还出现了"wait", Alternatively" 等特殊的关键词&#xff0c;"像 “wait” (表示反思)和 “Alternatively”(表示探索不同路径) 这样的关键词是模型能够进行反思和自我纠正的重要指标 迭代式问题解决&…

【PLC编程】GX Works报未能正常执行RUN中写入解决办法

在PLC编程中按F4转换时报未正常执行RUN中写入&#xff0c;可能是程序不一致。 选择工具->选项 选择RUN中写入。去除转换&#xff08;编译&#xff09;中执行RUN中写入 点击确定后&#xff0c;就不会再报此问题。F4转换也能正常转换了。

Java Lock CountDownLatch 总结

前言 相关系列 《Java & Lock & 目录》&#xff08;持续更新&#xff09;《Java & Lock & CountDownLatch & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Java & Lock & CountDownLatch & 总结》&#xff08;学习总…

Selenium4自动化测试常用函数总结,各种场景操作实战

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 seleninum作为自动化测试的工具&#xff0c;自然是提供了很多自动化操作的函数&#xff0c;下面列举下比较常用的函数&#xff0c;更多可见官方文档&#xff1a;…

网络安全的重要性及实践指南

网络安全的重要性及实践指南 前言 随着信息技术的快速发展&#xff0c;网络安全问题日益突出。无论是个人用户还是企业组织&#xff0c;网络安全都成为了必须重视的问题。本文将深入探讨网络安全的重要性、常见威胁、以及如何有效地保护网络安全。 一、网络安全的重要性 1.…

丝氨酸/苏氨酸激酶(STKs):前列腺癌治疗的新兴靶点

引言 前列腺癌&#xff08;PCa&#xff09;是男性癌症相关死亡的第五大原因&#xff0c;全球约有140万患者&#xff0c;2020年超37.5万死亡病例。 靶向治疗是潜力巨大的领域&#xff0c;PARP、PSMA、STEAP1、DLL3等是前列腺癌治疗的明星靶点。 除此之外&#xff0c;还有哪些…

深度学习之降维和聚类

1 降维和聚类 1.1 图解为什么会产生维数灾难 ​ 假如数据集包含10张照片&#xff0c;照片中包含三角形和圆两种形状。现在来设计一个分类器进行训练&#xff0c;让这个分类器对其他的照片进行正确分类&#xff08;假设三角形和圆的总数是无限大&#xff09;&#xff0c;简单的…

SMT(表面贴装技术)

一、什么是SMT SMT&#xff0c;即表面贴装技术&#xff08;Surface Mounted Technology&#xff09;&#xff0c;是一种将元器件直接安装到印刷电路板&#xff08;PCB&#xff09;表面的制造方法。这种技术极大地提高了电子产品的密度和性能&#xff0c;是现代电子制造中的关键…

国外白帽故事 | 通过OSINT入侵了1000多辆特斯拉

我撰写这篇文章的目的是为了提高特斯拉车主的安全意识&#xff0c;值得注意的是&#xff0c;这并不是特斯拉车辆或其基础设施的漏洞。 在这篇文章中&#xff0c;我将分享我是如何通过OSINT技术入侵特斯拉汽车的&#xff0c;以及我向特斯拉报告后得到的回应&#xff0c;最后我也…

logdata-anomaly-miner:一款安全日志解析与异常检测工具

关于logdata-anomaly-miner logdata-anomaly-miner是一款安全日志解析与异常检测工具&#xff0c;该工具旨在以有限的资源和尽可能低的权限运行分析&#xff0c;以使其适合生产服务器使用。 为了确保 logdata-anomaly-miner的正常运行&#xff0c;推荐安装了python > 3.6的…

【Vue】word / excel / ppt / pdf / 视频(mp4,mov) 预览

文件预览 Vue3一. word二. excel三. ppt四. pdf4.1 vue-pdf-embed4.2 iframe 五. 视频六&#xff1a;扩展——kkFileView Vue3 一. word 安装&#xff1a;npm install docx-preview父页面 <template><div><DocPreviewv-if"filePath.includes(docx)"…

react 总结+复习+应用加深

文章目录 一、React生命周期1. 挂载阶段&#xff08;Mounting&#xff09;补充2. 更新阶段&#xff08;Updating&#xff09;补充 static getDerivedStateFromProps 更新阶段应用补充 getSnapshotBeforeUpdate3. 卸载阶段&#xff08;Unmounting&#xff09; 二、React组件间的…

基于.NET 8.0,C#中Microsoft.Office.Interop.Excel来操作office365的excel

开发环境&#xff1a; Visual Studio 2022 office365 项目模板&#xff1a;WPF应用程序 框架&#xff1a;.NET 8.0 依赖&#xff1a;Microsoft.Office.Interop.Excel 注意&#xff1a; 1.使用Microsoft.Office.Interop.Excel库时&#xff0c;服务器或电脑里面必须安装得…

NLP--一起学习Word Vector【实践】

纸上得来终觉浅&#xff0c;绝知此事要躬行。 《冬夜读书示子聿》 值此1024的程序员节&#xff0c;我们一起学习 Word Vector。 本章一起学习文本向量化&#xff0c;掌握文本向量的相关概念&#xff0c;了解各个文本向量&#xff0c;实现文本向量的算法 我开启了一个NLP共学坊…

Pytest 插件的种类

引言 Pytest是一个功能强大且扩展性强的测试框架&#xff0c;支持丰富的插件体系。通过插件&#xff0c;Pytest的功能可以得到极大扩展&#xff0c;满足各种测试需求。本文将介绍几类常用的Pytest插件&#xff0c;并简要说明其功能和使用场景。 Pytest 插件的分类 报告和输出…

代码+编译环境一并保存Git仓库,Jenkins使用docker编译

大家好&#xff0c;欢迎来到停止重构的频道。 上期介绍了Jenkins的基本用法&#xff0c;本期补充介绍Jenkins使用docker进行软件编译。 如果对docker不太熟悉&#xff0c;可以先翻看往期《docker详解》。 我们按这样的顺序展开讨论&#xff1a; 1、为什么使用docker编译软件…

网址访问小工具(模拟浏览器)

网址访问小工具&#xff08;模拟浏览器&#xff09; 文章说明核心代码运行截图源码下载 文章说明 本篇文章主要是我写的一个小demo&#xff0c;感觉效果还蛮不错的&#xff0c;作为一个记录新想法的实现思路&#xff1b;介绍了模拟浏览器页面的一些页面实现的小细节。 采用vue3…

文理学院数据库应用技术实验报告0

文理学院数据库应用技术实验报告0 实验内容 打开cmd,利用MySQL命令连接MySQL服务器。 mysql -u root -p查看当前MySQL服务实例使用的字符集(character)。 SHOW VARIABLES LIKE character_set_server;查看当前MySQL服务实例支持的字符序(collation)。 SHOW VARIABLES LIKE c…

ReactOS系统中平衡二叉树按从左到右的顺序找到下一个结点

ReactOS系统中平衡二叉树按从左到右的顺序找到下一个结点MmIterateNextNode()按从左到右的顺序找到下一个结点 文章目录 ReactOS系统中平衡二叉树按从左到右的顺序找到下一个结点MmIterateNextNode()按从左到右的顺序找到下一个结点MmIterateNextNode() MmIterateNextNode() /*…