使用DataGridView来实现的工步跳转

新建窗体应用程序ShowImageColumnDemo,将默认的Form1修改为FormShowImageColumn

窗体FormShowImageColumn设计如下:

窗体FormShowImageColumn设计器代码如下:

部分类文件:FormShowImageColumn.Designer.cs

namespace ShowImageColumnDemo
{
    partial class FormShowImageColumn
    {
        /// <summary>
        /// 必需的设计器变量。
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// 清理所有正在使用的资源。
        /// </summary>
        /// <param name="disposing">如果应释放托管资源，为 true；否则为 false。</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows 窗体设计器生成的代码

        /// <summary>
        /// 设计器支持所需的方法 - 不要修改
        /// 使用代码编辑器修改此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {
            this.dgvSOP = new System.Windows.Forms.DataGridView();
            this.btnNextStep = new System.Windows.Forms.Button();
            this.dgvcStepImage = new System.Windows.Forms.DataGridViewImageColumn();
            this.dgvcStepIndex = new System.Windows.Forms.DataGridViewTextBoxColumn();
            this.dgvcStepName = new System.Windows.Forms.DataGridViewTextBoxColumn();
            this.dgvcStepValues = new System.Windows.Forms.DataGridViewTextBoxColumn();
            ((System.ComponentModel.ISupportInitialize)(this.dgvSOP)).BeginInit();
            this.SuspendLayout();
            // 
            // dgvSOP
            // 
            this.dgvSOP.AllowUserToAddRows = false;
            this.dgvSOP.AllowUserToDeleteRows = false;
            this.dgvSOP.ColumnHeadersHeightSizeMode = System.Windows.Forms.DataGridViewColumnHeadersHeightSizeMode.AutoSize;
            this.dgvSOP.Columns.AddRange(new System.Windows.Forms.DataGridViewColumn[] {
            this.dgvcStepImage,
            this.dgvcStepIndex,
            this.dgvcStepName,
            this.dgvcStepValues});
            this.dgvSOP.Location = new System.Drawing.Point(24, 66);
            this.dgvSOP.MultiSelect = false;
            this.dgvSOP.Name = "dgvSOP";
            this.dgvSOP.ReadOnly = true;
            this.dgvSOP.RowHeadersWidth = 25;
            this.dgvSOP.RowTemplate.Height = 27;
            this.dgvSOP.SelectionMode = System.Windows.Forms.DataGridViewSelectionMode.FullRowSelect;
            this.dgvSOP.Size = new System.Drawing.Size(721, 372);
            this.dgvSOP.TabIndex = 53;
            // 
            // btnNextStep
            // 
            this.btnNextStep.Location = new System.Drawing.Point(321, 12);
            this.btnNextStep.Name = "btnNextStep";
            this.btnNextStep.Size = new System.Drawing.Size(104, 41);
            this.btnNextStep.TabIndex = 54;
            this.btnNextStep.Text = "跳到下一步";
            this.btnNextStep.UseVisualStyleBackColor = true;
            this.btnNextStep.Click += new System.EventHandler(this.btnNextStep_Click);
            // 
            // dgvcStepImage
            // 
            this.dgvcStepImage.HeaderText = "结果";
            this.dgvcStepImage.ImageLayout = System.Windows.Forms.DataGridViewImageCellLayout.Zoom;
            this.dgvcStepImage.MinimumWidth = 6;
            this.dgvcStepImage.Name = "dgvcStepImage";
            this.dgvcStepImage.ReadOnly = true;
            this.dgvcStepImage.Width = 70;
            // 
            // dgvcStepIndex
            // 
            this.dgvcStepIndex.HeaderText = "工步编号";
            this.dgvcStepIndex.MinimumWidth = 6;
            this.dgvcStepIndex.Name = "dgvcStepIndex";
            this.dgvcStepIndex.ReadOnly = true;
            this.dgvcStepIndex.SortMode = System.Windows.Forms.DataGridViewColumnSortMode.NotSortable;
            // 
            // dgvcStepName
            // 
            this.dgvcStepName.HeaderText = "工步名称";
            this.dgvcStepName.MinimumWidth = 6;
            this.dgvcStepName.Name = "dgvcStepName";
            this.dgvcStepName.ReadOnly = true;
            this.dgvcStepName.SortMode = System.Windows.Forms.DataGridViewColumnSortMode.NotSortable;
            this.dgvcStepName.Width = 360;
            // 
            // dgvcStepValues
            // 
            this.dgvcStepValues.HeaderText = "工步数据";
            this.dgvcStepValues.MinimumWidth = 6;
            this.dgvcStepValues.Name = "dgvcStepValues";
            this.dgvcStepValues.ReadOnly = true;
            this.dgvcStepValues.SortMode = System.Windows.Forms.DataGridViewColumnSortMode.NotSortable;
            this.dgvcStepValues.Width = 150;
            // 
            // FormShowImageColumn
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 12F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(800, 450);
            this.Controls.Add(this.btnNextStep);
            this.Controls.Add(this.dgvSOP);
            this.Name = "FormShowImageColumn";
            this.Text = "使用DataGridView来实现的工步跳转";
            this.Load += new System.EventHandler(this.FormShowImageColumn_Load);
            ((System.ComponentModel.ISupportInitialize)(this.dgvSOP)).EndInit();
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.DataGridView dgvSOP;
        private System.Windows.Forms.Button btnNextStep;
        private System.Windows.Forms.DataGridViewImageColumn dgvcStepImage;
        private System.Windows.Forms.DataGridViewTextBoxColumn dgvcStepIndex;
        private System.Windows.Forms.DataGridViewTextBoxColumn dgvcStepName;
        private System.Windows.Forms.DataGridViewTextBoxColumn dgvcStepValues;
    }
}

窗体FormShowImageColumn相关逻辑程序如下:

文件FormShowImageColumn.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace ShowImageColumnDemo
{
    public partial class FormShowImageColumn : Form
    {
        public FormShowImageColumn()
        {
            InitializeComponent();
            //不允许自动生成列
            dgvSOP.AutoGenerateColumns = false;
            //图片列的的值是一个Image对象
            dgvcStepImage.DataPropertyName = "StepImage";
            dgvcStepIndex.DataPropertyName = "StepIndex";
            dgvcStepName.DataPropertyName = "StepName";
            dgvcStepValues.DataPropertyName = "StepValues";
        }

        private async void FormShowImageColumn_Load(object sender, EventArgs e)
        {
            await InitGridView();
        }

        private async Task InitGridView() 
        {
            DataTable dataTable = new DataTable("SOP");
            dataTable.Columns.Add("CompleteStatus", typeof(int));
            dataTable.Columns.Add("StepIndex", typeof(int));
            dataTable.Columns.Add("StepName", typeof(string));
            dataTable.Columns.Add("StepValues", typeof(string));
            dataTable.Columns.Add("StepImage", typeof(Image));
            dataTable.Rows.Add(0, 1, "扫码", "ABCD1234", Properties.Resources.yellow);
            dataTable.Rows.Add(1, 2, "自动进站", "OK", Properties.Resources.ball_green);
            dataTable.Rows.Add(2, 3, "螺栓紧固1", "7.11", Properties.Resources.ball_red);
            dataTable.Rows.Add(1, 4, "螺栓紧固2", "8.22", Properties.Resources.ball_green);
            dataTable.Rows.Add(2, 5, "自动出站", "NG", Properties.Resources.ball_red);
            dgvSOP.DataSource = dataTable;
            await Task.Run(() =>
            {
                this.BeginInvoke(new Action(() =>
                {
                    for (int i = 0; i < dataTable.Rows.Count; i++)
                    {
                        int completeStatus = Convert.ToInt32(dataTable.Rows[i]["CompleteStatus"]);
                        dgvSOP["dgvcStepImage", i].Tag = completeStatus;
                    }
                    dgvSOP.Rows[0].Selected = true;
                }));
            });
        }

        private void RefreshStepShow(int completeStatus, int stepIndex, string stepValues)
        {
            if (!IsHandleCreated)
                return;
            this.BeginInvoke(new Action(() =>
            {
                Bitmap bitmap = Properties.Resources.yellow;
                if (completeStatus == 1)
                {
                    bitmap = Properties.Resources.ball_green;
                }
                else if (completeStatus == 2)
                {
                    bitmap = Properties.Resources.ball_red;
                }
                //先清空选中行
                for (int i = 0; i < dgvSOP.Rows.Count; i++)
                {
                    dgvSOP.Rows[i].Selected = false;
                }
                for (int i = 0; i < dgvSOP.Rows.Count; i++)
                {
                    if (Convert.ToInt32(dgvSOP["dgvcStepIndex", i].Value) == stepIndex)
                    {
                        dgvSOP["dgvcStepImage", i].Value = bitmap;//显示结果图片
                        dgvSOP["dgvcStepValues", i].Value = stepValues;
                        dgvSOP.FirstDisplayedScrollingRowIndex = i;
                        dgvSOP.Rows[i].Selected = true;
                        break;
                    }
                }
            }));
        }

        private async void SendNextStep(string stepDBValues)
        {
            //完成当前步，并自动流转到下一步，如果下一步是最后一步则自动流转到第一步【复位】
            if (dgvSOP.SelectedRows.Count == 0) 
            {
                return;
            }
            int currentStepIndex = Convert.ToInt32(dgvSOP.SelectedRows[0].Cells["dgvcStepIndex"].Value);
            RefreshStepShow(new Random().Next(1, 3), currentStepIndex, stepDBValues);
            //找出第一个大于当前工步序号的工步 即为 下一工步
            int nextStepIndex = -1;
            for (int i = 0; i < dgvSOP.Rows.Count; i++)
            {
                int currentIndex = Convert.ToInt32(dgvSOP.Rows[i].Cells["dgvcStepIndex"].Value);
                if (currentIndex > currentStepIndex) 
                {
                    nextStepIndex = currentIndex;
                    break;
                }
            }
            if (nextStepIndex == -1)
            {
                //如果没有下一工步，则复位到第一步骤【新的轮回开始】
                await InitGridView();
            }
            else
            {
                //将下一工步设置为未完成
                RefreshStepShow(0, nextStepIndex, "");
            }
        }

        private void btnNextStep_Click(object sender, EventArgs e)
        {
            SendNextStep(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff"));
        }
    }
}

程序运行如图: