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

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灯变化实现