在我們做客戶關(guān)系管理系統(tǒng)的Winform界面的時(shí)候，需要對進(jìn)展階段這個(gè)屬性進(jìn)行一個(gè)方便的動(dòng)態(tài)切換和標(biāo)記處理，如我們根據(jù)不同的進(jìn)展階段顯示不同的相關(guān)信息，也可以隨時(shí)保存當(dāng)前的階段信息。其實(shí)也是一個(gè)比較常見的功能，我們可以把字典列表扁平化動(dòng)態(tài)展示在控件上，然后根據(jù)用戶選擇的階段位置進(jìn)行切換即可，本文就是在客戶的需求基礎(chǔ)上完善這個(gè)功能。

進(jìn)展階段的動(dòng)態(tài)展示和處理

我們來看看界面的大致情況：

其實(shí)這部分是根據(jù)字典列表進(jìn)行動(dòng)態(tài)展示的，也就是使用一個(gè)用戶控件進(jìn)行處理即可。

為了實(shí)現(xiàn)這個(gè)功能，我們先創(chuàng)建一個(gè)用戶控件，如下界面所示，保留一個(gè)按鈕，這個(gè)我們讓它先占著位置，最后還是把它追加到最后的位置上即可。

為了展示所有階段，并記錄當(dāng)前階段，我們設(shè)置了兩個(gè)變量，放在用戶控件里面：

/// <summary>
/// 階段列表
/// </summary>
public List<CListItem> StageList { get; set; }
/// <summary>
/// 當(dāng)前階段的值
/// </summary>
public double CurrentStage { get; set; }

然后為了在切換和保存兩個(gè)事件觸發(fā)外部處理，我們添加兩個(gè)事件處理，如下所示：

/// <summary>
/// 選中某個(gè)階段的處理事件
/// </summary>
public EventHandler OnSelectedStageHandler { get; set; }
/// <summary>
/// 設(shè)置階段完成的處理事件
/// </summary>
public EventHandler OnSetCompleteStage { get; set; }

這樣用戶控件看起來就像是這樣子的代碼了。

/// <summary>
/// 階段控件顯示
/// </summary>
public partial class StageControl : BaseUserControl
{
/// <summary>
/// 階段列表
/// </summary>
public List<CListItem> StageList { get; set; }
/// <summary>
/// 當(dāng)前階段的值
/// </summary>
public double CurrentStage { get; set; }
/// <summary>
/// 選中某個(gè)階段的處理事件
/// </summary>
public EventHandler OnSelectedStageHandler { get; set; }
/// <summary>
/// 設(shè)置階段完成的處理事件
/// </summary>
public EventHandler OnSetCompleteStage { get; set; }

 為了動(dòng)態(tài)展示控件的信息，我們需要使用一個(gè)自定義函數(shù)來對控件按鈕的位置進(jìn)行判斷并繪制，這樣可以根據(jù)需要進(jìn)行相關(guān)樣式的定義，也可以動(dòng)態(tài)變化階段的列表內(nèi)容。

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

//根據(jù)階段列表數(shù)量計(jì)算每個(gè)選項(xiàng)的大小
if (StageList != null && StageList.Count > 0)
{
var count = StageList.Count;
//計(jì)算每項(xiàng)的寬度、高度
var width = (this.Width-150) * 0.8 / (count * 1.0);
var height = this.Height * 0.8;

//計(jì)算間隔位置，默認(rèn)為0，最大不超過20寬度
double space = 0;
if ((count - 1) > 0)
{
space = (this.Width * 0.2) / ((count - 1) * 1.0);
}
space = (space > 20) ? 20 : space; //限定最大間隔20

//根據(jù)列表項(xiàng)目，動(dòng)態(tài)構(gòu)建按鈕顯示項(xiàng)目
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;
//根據(jù)所處階段設(shè)置背景色
if(CurrentStage >= value)
{
button.Appearance.BackColor = Color.SkyBlue;
}
else
{
button.Appearance.BackColor = Color.Transparent;
}

//按鈕的單擊事件，觸發(fā)對外部的處理
button.Click += (s,e)=>
{
var currentStep = (SimpleButton)s;
CurrentStage = Convert.ToDouble(currentStep.Tag);
if(OnSelectedStageHandler != null)
{
OnSelectedStageHandler(s, e);
}
Init();

};
//根據(jù)計(jì)算好的信息，設(shè)置按鈕大小和位置
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);
}
}

如果是要保存狀態(tài)，也交由事件處理。

/// <summary>
/// 完成操作，觸發(fā)外部對狀態(tài)的保存
/// </summary>
private void btnSetComplete_Click(object sender, EventArgs e)
{
if(OnSetCompleteStage != null)
{
OnSetCompleteStage(sender, e);
}
}

外部窗體使用自定義控件

創(chuàng)建好用戶控件后，在外部窗體使用這個(gè)用戶控件的時(shí)候，我們把它拖到窗體界面里面，如下設(shè)計(jì)界面效果所示。

在這個(gè)窗體里面，初始化控件的事件處理，用來做選擇的變化處理和保存狀態(tài)處理。

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 ? "設(shè)置成功" : "設(shè)置失敗");
ProcessDataSaved(null, null);
}
};

我們在調(diào)用窗體使用這個(gè)進(jìn)展階段的控件的時(shí)候，需要給它初始化數(shù)據(jù)，如下是對字典信息的綁定給它。

/// <summary>
/// 初始化數(shù)據(jù)字典
/// </summary>
private void InitDictItem()
{
//初始化代碼
this.txtStatus.BindDictItems("機(jī)會(huì)狀態(tài)");
this.txtSource.BindDictItems("機(jī)會(huì)來源");
this.txtChanceType.BindDictItems("機(jī)會(huì)類別");

this.txtCompetitiveIndex.BindDictItems("機(jī)會(huì)競爭指數(shù)");
this.txtConfidenceIndex.BindDictItems("機(jī)會(huì)信心指數(shù)");
this.txtStage.BindDictItems("機(jī)會(huì)進(jìn)展階段");

var listItem = DictItemUtil.GetDictByDictType("機(jī)會(huì)進(jìn)展階段");
this.stageControl1.StageList = listItem;
}

然后在界面顯示的時(shí)候，調(diào)用Init函數(shù)即可，如下代碼所示。

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

實(shí)際項(xiàng)目運(yùn)行的整體效果如下所示。

DevExpress | 下載試用

DevExpress Universal 10月正式發(fā)布今年第二個(gè)重大版本——v21.2，此版本正式官宣支持Visual Studio 2022 & .NET6，同時(shí)與微軟最新發(fā)布的Windows 11完美兼容，全面解決用戶各種使用場景問題。 與時(shí)俱進(jìn)，從未止步！

本文轉(zhuǎn)載自：

DevExpress技術(shù)交流群5：742234706      歡迎一起進(jìn)群討論