工控 上位机 WPF 跑马灯的实现
工业控制软件中，跑马灯是主界面比不可少的组件。本文基于WPF技术，讲解如何实现高效的跑马灯组件。
跑马灯的效果如下图：
在讲解如何实现之前，我们先看一下，跑马灯组件在主界面上是如何使用的，请看如下代码：
<Border Grid.Row="3">
<local:CellBlockList x:Name="cellBlockList" Margin="4"></local:CellBlockList>
</Border>
CellBlockList 是一个用户控件，代码如下图：
CellBlockList 用户控件中包含了9个 CellBlock 用户控件
<local:CellBlock Grid.Column="0" x:Name="hrl1"></local:CellBlock>
直接上 CellBlock.cs 代码
1 namespace AOI 2 { 3 /// <summary> 4 /// CellBlock.xaml 的交互逻辑 5 /// </summary> 6 public partial class CellBlock : UserControl 7 { 8 /// <summary> 9 /// 设置 质量 10 /// </summary> 11 public string Quality 12 { 13 set 14 { 15 lblQuality.Content = value; 16 } 17 } 18 19 /// <summary> 20 /// 设置 颜色 21 /// </summary> 22 public string Color 23 { 24 set 25 { 26 lblColor.Content = value; 27 } 28 } 29 30 /// <summary> 31 /// 设置 Cell ID 32 /// </summary> 33 public string CellID 34 { 35 set 36 { 37 lblCellID.Content = value; 38 } 39 } 40 41 /// <summary> 42 /// 设置 背景颜色 43 /// </summary> 44 public string BgColor 45 { 46 set 47 { 48 System.Drawing.Color bgColor = System.Drawing.Color.FromName(value); 49 cellBlockBorder.Background = new SolidColorBrush(System.Windows.Media.Color.FromRgb(bgColor.R, bgColor.G, bgColor.B)); 50 } 51 } 52 53 public CellBlock() 54 { 55 InitializeComponent(); 56 } 57 58 public void SetValue(CellBlockViewModel model) 59 { 60 Quality = model.Quality; 61 Color = model.Color; 62 CellID = model.CellID; 63 BgColor = model.BgColor; 64 } 65 } 66 }
CellBlockList.cs 代码
1 namespace AOI 2 { 3 /// <summary> 4 /// CellBlockList.xaml 的交互逻辑 5 /// </summary> 6 public partial class CellBlockList : UserControl 7 { 8 private List<CellBlockViewModel> _cellBlockModels = new List<CellBlockViewModel>(); 9 /// <summary> 10 /// 跑马灯数量最大值 11 /// </summary> 12 private readonly int CellBlockMaxSize = 9; 13 14 private List<CellBlock> _cellBlock = new List<CellBlock>(); 15 16 public CellBlockList() 17 { 18 InitializeComponent(); 19 InitCellBlock(); 20 } 21 22 /// <summary> 23 /// 初始化跑马灯 24 /// </summary> 25 private void InitCellBlock() 26 { 27 _cellBlock.Add(hrl1); 28 _cellBlock.Add(hrl2); 29 _cellBlock.Add(hrl3); 30 _cellBlock.Add(hrl4); 31 _cellBlock.Add(hrl5); 32 _cellBlock.Add(hrl6); 33 _cellBlock.Add(hrl7); 34 _cellBlock.Add(hrl8); 35 _cellBlock.Add(hrl9); 36 37 _cellBlockModels = new List<CellBlockViewModel>(9); 38 for (int i = 0; i < CellBlockMaxSize; i++) 39 { 40 CellBlockViewModel model = new CellBlockViewModel() 41 { 42 Quality = string.Empty, 43 Color = string.Empty, 44 BgColor = "Gray", 45 CellID = string.Empty 46 }; 47 _cellBlockModels.Add(model); 48 _cellBlock[i].SetValue(model); 49 } 50 } 51 52 /// <summary> 53 /// 新增Cell到跑马灯 54 /// </summary> 55 /// <param name="cell"></param> 56 public void AddCellToHorseRaceLamp(Cell cell) 57 { 58 for (int i = _cellBlockModels.Count - 1; i > 0; i--) 59 { 60 _cellBlockModels[i] = _cellBlockModels[i - 1]; 61 } 62 _cellBlockModels[0] = GetCellBlockViewModel(cell); 63 64 for (int i = 0; i < _cellBlockModels.Count; i++) 65 { 66 _cellBlock[i].SetValue(_cellBlockModels[i]); 67 } 68 } 69 70 private CellBlockViewModel GetCellBlockViewModel(Cell cell) 71 { 72 return new CellBlockViewModel 73 { 74 CellID = cell.ID.Replace("\0", ""), 75 Quality = cell.QualityName, 76 Color = cell.Color, 77 BgColor = cell.ColorName 78 }; 79 } 80 } 81 }
主界面如何刷新跑马灯
软件内部在完成一个业务后（一个检测任务），调用如下代码即可：
Dispatcher.Invoke(new Action(() => { cellBlockList.AddCellToHorseRaceLamp(cell); }));