Dynamic display and processing stages of progress in Winform system interface

We do Winform interface customer relationship management systems, the need for progress stage of the attributes of a convenient dynamic switching and labeling process, as we show different information depending on the stage of progress, you can also save the current phase information at any time . Is actually a more common feature, we can flatten the dictionary list dynamic display on the control, and then switch to the position selected by the user depending on the stage herein, this essay is to improve the function of the demand on the basis of the customer.

1, dynamic display and processing stages of progress

Let's look at the general situation interface

2551534-0e2ccef33cac308a.png
image

In fact, this is part of the dynamic display of the list according to the dictionary, is to use a user control processing can be.

2551534-254d4de8e5a6a5cf.png
image

To achieve this, we first create a user control, as shown in the following interface, keeps a button, we let it first occupied this position, finally append it to the final position can be.

2551534-9ad150a62059e9f7.png
image

To demonstrate all stages, and record the current stage, we set up two variables, placed inside a user control

        /// <summary>
        /// 阶段列表
        /// </summary>
        public List<CListItem> StageList { get; set; }
        /// <summary>
        /// 当前阶段的值
        /// </summary>
        public double CurrentStage { get; set; }

In order to save and then switch two external trigger event processing, we add two event handlers, as shown below

        /// <summary>
        /// 选中某个阶段的处理事件
        /// </summary>
        public EventHandler OnSelectedStageHandler { get; set; }
        /// <summary>
        /// 设置阶段完成的处理事件
        /// </summary>
        public EventHandler OnSetCompleteStage { get; set; }

In this way the user control looks like something like this code.


    /// <summary>
    /// 阶段控件显示
    /// </summary>
    public partial class StageControl : BaseUserControl
    {
        /// <summary>
        /// 阶段列表
        /// </summary>
        public List<CListItem> StageList { get; set; }
        /// <summary>
        /// 当前阶段的值
        /// </summary>
        public double CurrentStage { get; set; }
        /// <summary>
        /// 选中某个阶段的处理事件
        /// </summary>
        public EventHandler OnSelectedStageHandler { get; set; }
        /// <summary>
        /// 设置阶段完成的处理事件
        /// </summary>
        public EventHandler OnSetCompleteStage { get; set; }

In order to dynamically display information control, we need to use a custom function to judge the position of the control button and draw, which can be defined according to needs related to style, you can also list the contents of the dynamic changes phase.

        /// <summary>
        /// 初始化控件
        /// </summary>
        public void Init()
        {
            this.Controls.Clear();//清空界面

            //根据阶段列表数量计算每个选项的大小
            if (StageList != null && StageList.Count > 0)
            {
                var count = StageList.Count;
                //计算每项的宽度、高度
                var width = (this.Width-150) * 0.8 / (count * 1.0);
                var height = this.Height * 0.8;

                //计算间隔位置,默认为0,最大不超过20宽度
                double space = 0;
                if ((count - 1) > 0)
                {
                    space = (this.Width * 0.2) / ((count - 1) * 1.0);
                }
                space = (space > 20) ? 20 : space; //限定最大间隔20

                //根据列表项目,动态构建按钮显示项目
                int i = 0;
                foreach (CListItem item in StageList)
                {
                    double value = Convert.ToDouble(item.Value);
                    SimpleButton button = new SimpleButton();
                    button.Text = value.ToString("P0");//显示百分比
                    button.ToolTip = item.Text;
                    button.Tag = value;
                    button.ButtonStyle = BorderStyles.HotFlat;
                    button.Appearance.Options.UseBackColor = true;
                    //根据所处阶段设置背景色
                    if(CurrentStage >= value)
                    {
                        button.Appearance.BackColor = Color.SkyBlue;
                    }
                    else
                    {
                        button.Appearance.BackColor = Color.Transparent;
                    }

                    //按钮的单击事件,触发对外部的处理
                    button.Click += (s,e)=>
                    {
                        var currentStep = (SimpleButton)s;
                        CurrentStage = Convert.ToDouble(currentStep.Tag);
                        if(OnSelectedStageHandler != null)
                        {
                            OnSelectedStageHandler(s, e);
                        }
                        Init();

                    };
                    //根据计算好的信息,设置按钮大小和位置
                    button.Size = new Size((int)width, (int)height);
                    button.Location = new Point(i * (int)(width + space), 0);
                    this.Controls.Add(button);

                    i++;
                }

                this.btnSetComplete.Location = new Point(this.Width-145, 4);
                this.Controls.Add(btnSetComplete);
            }
        }

If you want to save the state, also referred event processing

       /// <summary>
        /// 完成操作,触发外部对状态的保存
        /// </summary>
        private void btnSetComplete_Click(object sender, EventArgs e)
        {
            if(OnSetCompleteStage != null)
            {
                OnSetCompleteStage(sender, e);
            }
        }

2, the external form using custom

After creating the user control, when external form using the user control, we put it onto the form inside interface, interface design effects are shown below.

2551534-379e22d6e3f90f33.png
image

In this form the inside, event initialization process control, process used to make changes and save the state of the selection process.

            this.stageControl1.OnSelectedStageHandler += (s, e) =>
            {
                this.txtStage.SetComboBoxItem(string.Concat(this.stageControl1.CurrentStage));
            };
            this.stageControl1.OnSetCompleteStage += (s, e) =>
            {
                if (!string.IsNullOrEmpty(ID))
                {
                    this.txtStage.SetComboBoxItem(string.Concat(this.stageControl1.CurrentStage));
                    var result = CallerFactory<ISaleChanceService>.Instance.UpdateStage(tempInfo.ID, this.stageControl1.CurrentStage);
                    ShowMessageAutoHide(result.Success ? "设置成功" : "设置失败");
                    ProcessDataSaved(null, null);
                }
            };

We call this form using the advanced stage of control when it needs to initialize data, the following information is binding on the dictionary to it.

        /// <summary>
        /// 初始化数据字典
        /// </summary>
        private void InitDictItem()
        {
            //初始化代码
            this.txtStatus.BindDictItems("机会状态");
            this.txtSource.BindDictItems("机会来源");
            this.txtChanceType.BindDictItems("机会类别");

            this.txtCompetitiveIndex.BindDictItems("机会竞争指数");
            this.txtConfidenceIndex.BindDictItems("机会信心指数");
            this.txtStage.BindDictItems("机会进展阶段");

            var listItem = DictItemUtil.GetDictByDictType("机会进展阶段");
            this.stageControl1.StageList = listItem;
        }   

Then, when the display screen, to call the Init function, as shown in the following code.

            //初始化显示控件
            this.stageControl1.Init();

The overall effect shown below the actual operation of the project.

2551534-1d0c15c7e6f24bcd.png
image

Guess you like

Origin blog.csdn.net/weixin_34268579/article/details/90969625