Blazor中如何动态修改System.Drawing.Color后的颜色字符串？

核心思路 #

你需要通过用户输入解析颜色名称，再将解析后的System.Drawing.Color对象绑定到组件属性上——因为System.Drawing.Color.Red这类是静态属性，无法直接通过字符串变量拼接调用，必须用Color.FromName()方法动态解析颜色名称。

具体实现步骤 #

1. 页面层处理用户输入与颜色解析

在你的Blazor页面/组件中，声明变量存储用户输入和解析后的颜色，再通过按钮点击事件完成解析逻辑：

<div>
    <input type="text" @bind="_colorInput" placeholder="输入颜色名称（如Pink/Orange）" />
    <button @onclick="UpdateColor">确认</button>
</div>

<!-- 动态绑定解析后的Color对象到组件属性 -->
<ComponentName Color="@_selectedColor" />

@code {
    private string _colorInput;
    // 默认初始颜色设为Red
    private System.Drawing.Color _selectedColor = System.Drawing.Color.Red;

    private void UpdateColor()
    {
        if (string.IsNullOrWhiteSpace(_colorInput)) return;

        try
        {
            // 从用户输入的字符串解析Color对象
            _selectedColor = System.Drawing.Color.FromName(_colorInput.Trim());
        }
        catch (ArgumentException)
        {
            // 处理无效颜色名称的情况，比如保留原颜色或提示用户
            // 可添加提示逻辑，如：_errorMsg = "输入的颜色名称无效";
        }
    }
}

2. 确保目标组件支持Color参数

如果ComponentName是你自定义的组件，需要在组件中声明对应的[Parameter]：

// ComponentName.razor.cs 或直接在ComponentName.razor的@code块中
public partial class ComponentName
{
    [Parameter]
    public System.Drawing.Color Color { get; set; } = System.Drawing.Color.Black; // 设置默认值
}

注意事项 #

• 如果ComponentName的Color属性接受的是CSS颜色字符串（而非System.Drawing.Color类型），可以直接绑定用户输入的字符串，但这种场景下建议做颜色格式校验。
• Color.FromName()仅支持.NET内置的颜色名称（如Red、Pink、Orange等），如果用户输入自定义颜色值（如#FF0000），需要改用ColorTranslator.FromHtml()方法解析。

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