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