ASP.NET 彩色下拉選單開發：系統已知色彩綁定與項目樣式化

專案目標

建立一個下拉選單，列出 .NET System.Drawing.KnownColor 列舉中的所有顏色（排除系統環境色），每個選項背景顯示對應顏色，選中時右側區塊同步顯示該顏色色塊。

核心技術點

1. Enum.GetNames(typeof(KnownColor)) 取得所有顏色名稱陣列
2. 透過反射 SystemColors 屬性取得系統環境色名稱，進行排除
3. 為 ListItem 設定 style="background-color:..." 實現選項著色
4. SelectedIndexChanged 事件更新下拉框背景與右側預覽區

前端頁面

<table>
  <tr>
    <td>
      <asp:DropDownList ID="ddlMultiColor" runat="server" 
          AutoPostBack="true" 
          OnSelectedIndexChanged="ddlMultiColor_SelectedIndexChanged">
      </asp:DropDownList>
    </td>
    <td>
      <div id="divPreview" runat="server" style="width:30px;height:25px;border:1px solid #ccc;"></div>
    </td>
  </tr>
</table>

後端程式碼

命名空間

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Reflection;
using System.Web.UI.WebControls;

Page_Load 綁定資料

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        PopulateColorList();
        ApplyItemStyles();
    }
}

取得過濾後的顏色清單

private List GetFilteredColorNames()
{
    // 1. 所有 KnownColor 名稱
    string[] allColors = Enum.GetNames(typeof(KnownColor));

    // 2. 系統環境色名稱（透過反射取得 SystemColors 所有屬性名）
    var sysColorProps = typeof(SystemColors).GetProperties(BindingFlags.Static | BindingFlags.Public);
    var sysColorNames = new HashSet(sysColorProps.Select(p => p.Name));

    // 3. 排除系統色
    return allColors.Where(c => !sysColorNames.Contains(c)).ToList();
}

綁定下拉選單

private void PopulateColorList()
{
    var colors = GetFilteredColorNames();
    ddlMultiColor.DataSource = colors;
    ddlMultiColor.DataBind();
}

為每個 ListItem 設定背景色樣式

private void ApplyItemStyles()
{
    foreach (ListItem item in ddlMultiColor.Items)
    {
        // 項目 Value 即顏色名稱，直接用於 CSS background-color
        item.Attributes["style"] = $"background-color:{item.Value}; color:{(IsDarkColor(item.Value) ? "white" : "black")}";
    }
    // 同步設定下拉框本身背景
    ddlMultiColor.BackColor = Color.FromName(ddlMultiColor.SelectedItem.Text);
}

判斷顏色深淺（決定文字顏色）

private bool IsDarkColor(string colorName)
{
    try
    {
        Color c = Color.FromName(colorName);
        // 亮度公式：0.299*R + 0.587*G + 0.114*B
        double luminance = 0.299 * c.R + 0.587 * c.G + 0.114 * c.B;
        return luminance < 128;
    }
    catch { return false; }
}

選項變更事件

protected void ddlMultiColor_SelectedIndexChanged(object sender, EventArgs e)
{
    // 1. 更新下拉框背景
    ddlMultiColor.BackColor = Color.FromName(ddlMultiColor.SelectedItem.Text);

    // 2. 重新套用項目樣式（確保當前選項可見）
    ApplyItemStyles();

    // 3. 更新右側預覽區
    divPreview.Attributes["style"] = 
        $"background:{ddlMultiColor.SelectedItem.Value};width:30px;height:25px;border:1px solid #ccc;";
}

執行效果

下拉選單展開時，每個項目呈現對應顏色背景；選中項目時，下拉框本身與右側 div 同步顯示該顏色。

技術總結

擴充應用建議

• 加入「自訂顏色」選項，彈出 ColorPicker 對話框
• 將顏色清單快取於 Application 或 MemoryCache，避免每次反射
• 支援 RGBA/HEX 直接輸入驗證
• 整合至 CMS 版面編輯器，提供區塊背景色快速選擇

結語

善用 .NET 內建 KnownColor 列舉與反射機制，配合 ListItem.Attributes 注入樣式，即可零第三方依賴實現專業級彩色下拉選單。關鍵在於：排除系統環境色避免干擾、動態計算對比色確保可讀性、事件同步更新預覽區。此技術廣泛適用於 CMS 樣式設定、報表圖表配色、設計工具等場景。