如何在C# WinForm中设计类Lightroom的文件名模板编辑器文本框

针对你需要的「混合固定文本+可下拉选择的标签项」输入框，以下是几种可行的实现方案：

方案一：自定义控件组合（最灵活） #

核心思路是用FlowLayoutPanel作为容器，混合放置普通文本输入框和带下拉菜单的自定义标签控件：

1. 自定义DropDownTag控件
   制作一个带下拉菜单的标签控件，用于选择变量（如日期、序列、原文件名等）：

   • 用Label显示标签文本，Button触发下拉菜单
   • 存储实际变量标识（如{Date}），方便最终生成模板字符串
   • 下拉菜单绑定变量选项，选择后更新标签显示和变量值

2. 容器布局与交互

   • 用FlowLayoutPanel承载所有元素，自动排版文本框和标签
   • 提供按钮/快捷键触发插入新标签，插入后自动在标签后添加新的文本输入框，保证文本输入连贯性
   • 支持删除标签（可给标签添加删除按钮）

3. 模板生成
   遍历FlowLayoutPanel内的所有控件，拼接文本框内容和标签的变量标识，得到最终的文件名模板字符串

关键代码示例 #

自定义DropDownTag控件：

public class DropDownTag : UserControl
{
    private Label _lblTag;
    private Button _btnDropDown;
    private ContextMenuStrip _dropDownMenu;

    // 存储实际用于生成模板的变量标识
    public string VariableValue { get; private set; }

    public DropDownTag(string displayText, string variableValue)
    {
        InitializeComponent();
        _lblTag.Text = displayText;
        VariableValue = variableValue;
        InitDropDownMenu();
    }

    private void InitializeComponent()
    {
        _lblTag = new Label
        {
            AutoSize = true,
            BackColor = Color.LightSkyBlue,
            Padding = new Padding(6, 3, 6, 3),
            Margin = new Padding(2)
        };

        _btnDropDown = new Button
        {
            Size = new Size(18, 18),
            Text = "▼",
            FlatStyle = FlatStyle.Flat,
            Margin = new Padding(0, 2, 2, 2)
        };
        _btnDropDown.Click += (s, e) => _dropDownMenu.Show(_btnDropDown, new Point(0, _btnDropDown.Height));

        _dropDownMenu = new ContextMenuStrip();

        Controls.Add(_lblTag);
        Controls.Add(_btnDropDown);
        AutoSize = true;
        ResumeLayout(false);
        PerformLayout();
    }

    private void InitDropDownMenu()
    {
        // 添加变量选项，可根据需求扩展
        _dropDownMenu.Items.Add("日期 (YYYY-MM-DD)", null, (s, e) => UpdateTag("日期", "{Date:yyyy-MM-dd}"));
        _dropDownMenu.Items.Add("序列 (001)", null, (s, e) => UpdateTag("序列", "{Seq:000}"));
        _dropDownMenu.Items.Add("原文件名", null, (s, e) => UpdateTag("原文件名", "{OriginalName}"));
        _dropDownMenu.Items.Add("-");
        _dropDownMenu.Items.Add("删除标签", null, (s, e) => this.Dispose());
    }

    private void UpdateTag(string displayText, string variableValue)
    {
        _lblTag.Text = displayText;
        VariableValue = variableValue;
        PerformLayout();
        // 通知父容器更新布局
        Parent?.PerformLayout();
    }
}

容器交互与模板生成：

private void btnInsertTag_Click(object sender, EventArgs e)
{
    // 插入新标签
    var newTag = new DropDownTag("选择变量", "{Variable}");
    flowLayoutPanel1.Controls.Add(newTag);

    // 在标签后添加文本输入框
    var newTextBox = new TextBox
    {
        BorderStyle = BorderStyle.None,
        Width = 120,
        Margin = new Padding(2)
    };
    flowLayoutPanel1.Controls.Add(newTextBox);
    newTextBox.Focus();
}

private string GetFinalTemplate()
{
    var templateBuilder = new StringBuilder();
    foreach (Control ctrl in flowLayoutPanel1.Controls)
    {
        if (ctrl is TextBox tb)
            templateBuilder.Append(tb.Text);
        else if (ctrl is DropDownTag tag)
            templateBuilder.Append(tag.VariableValue);
    }
    return templateBuilder.ToString();
}

方案二：扩展RichTextBox实现 #

利用RichTextBox的富文本能力，为标签项设置特殊样式并绑定点击事件：

• 插入标签时，用富文本格式（背景色、边框）标记标签区域，同时在隐藏位置记录变量标识
• 为标签区域添加点击事件，触发下拉菜单选择变量
• 维护一个同步的模板字符串，避免富文本格式影响最终输出

方案三：第三方控件替代 #

如果不想从零开发，可尝试以下第三方控件（支持自定义项模板和下拉交互）：

• Telerik RadAutoCompleteBox：通过自定义项模板添加下拉按钮，实现带菜单的标签项
• Syncfusion MultiSelectComboBox：支持自定义项UI，配置下拉触发逻辑

内容的提问来源于stack exchange，提问作者Ahmet Karatas