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

進展階段的動態展示和處理

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

其實這部分是根據字典列表進行動態展示的，也就是使用一個用戶控件進行處理即可。

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

為了展示所有階段，并記錄當前階段，我們設置了兩個變量，放在用戶控件里面：

/// <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; }

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

/// <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; }

為了動態展示控件的信息，我們需要使用一個自定義函數來對控件按鈕的位置進行判斷并繪制，這樣可以根據需要進行相關樣式的定義，也可以動態變化階段的列表內容。

/// <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);
}
}

如果是要保存狀態，也交由事件處理。

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

外部窗體使用自定義控件

創建好用戶控件后，在外部窗體使用這個用戶控件的時候，我們把它拖到窗體界面里面，如下設計界面效果所示。

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

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);
}
};

我們在調用窗體使用這個進展階段的控件的時候，需要給它初始化數據，如下是對字典信息的綁定給它。

/// <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;
}

然后在界面顯示的時候，調用Init函數即可，如下代碼所示。

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

實際項目運行的整體效果如下所示。

DevExpress | 下載試用

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

本文轉載自：

DevExpress技術交流群5：742234706      歡迎一起進群討論