UWP中如何实现动态表单的程序化数据绑定？

要实现和标准输入项一致的自定义字段绑定，我们可以分ViewModel层和视图层两步来处理，完美适配你现有的模型结构：

一、ViewModel层：封装自定义字段的可绑定访问 #

首先，在你的ViewModel类里，添加一个用于处理自定义字段值的绑定逻辑。我们可以利用现有的BaseModel.customFieldValues列表，通过索引器来统一处理不同类型字段的读写，同时触发PropertyChanged通知，保持和标准字段一致的更新逻辑：

public class ViewModel : ViewModelBase
{
    private BaseModel cModel;
    private bool _customFieldsModified;
    public bool IsModified => isModified || _customFieldsModified;

    // 自定义字段值的索引器，用于绑定
    public object this[Guid fieldUid]
    {
        get
        {
            if (!isLoaded) return null;
            var fieldValue = Model.customFieldValues.FirstOrDefault(v => v.uid == fieldUid);
            if (fieldValue == null) return null;
            
            // 根据字段类型返回对应的值
            return fieldValue.type switch
            {
                CustomFieldType.TEXT => fieldValue.textValue,
                CustomFieldType.MULTI_LINE => fieldValue.textValue,
                CustomFieldType.DATETIME => fieldValue.dateValue,
                // 其他类型自行补充
                _ => null
            };
        }
        set
        {
            var fieldValue = Model.customFieldValues.FirstOrDefault(v => v.uid == fieldUid);
            if (fieldValue == null) return;

            bool valueChanged = false;
            // 根据类型更新对应的值
            switch (fieldValue.type)
            {
                case CustomFieldType.TEXT:
                case CustomFieldType.MULTI_LINE:
                    if (fieldValue.textValue != value as string)
                    {
                        fieldValue.textValue = value as string;
                        valueChanged = true;
                    }
                    break;
                case CustomFieldType.DATETIME:
                    if (fieldValue.dateValue != (DateTime)value)
                    {
                        fieldValue.dateValue = (DateTime)value;
                        valueChanged = true;
                    }
                    break;
                // 其他类型补充
            }

            if (valueChanged)
            {
                _customFieldsModified = true;
                // 触发对应字段的属性变更通知
                OnPropertyChanged($"Item[{fieldUid}]");
            }
        }
    }

    // 你的现有标准字段绑定逻辑...
    public string name { get; set; } // 省略原有实现
    public BaseModel Model { get; set; } // 省略原有实现
}

这里的核心是用索引器统一适配不同类型的自定义字段，确保值变化时视图能同步更新，和标准字段的绑定逻辑保持一致。

二、视图层：程序化生成控件并绑定 #

接下来，在视图的代码后台（比如MainPage.xaml.cs）里，根据CustomField的列表动态生成对应的输入控件，并设置数据绑定到ViewModel的索引器上：

private void LoadCustomFields(List<CustomField> customFields)
{
    // 假设你有一个StackPanel作为自定义字段的容器
    var customFieldsContainer = this.FindName("customFieldsPanel") as StackPanel;
    if (customFieldsContainer == null || customFields == null) return;

    customFieldsContainer.Children.Clear();

    foreach (var field in customFields)
    {
        FrameworkElement inputControl = null;
        Binding binding = new Binding
        {
            Path = new PropertyPath($"[{field.uid}]"),
            Source = ViewModel,
            Mode = BindingMode.TwoWay,
            UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
        };

        // 根据字段类型创建对应的控件
        switch (field.type)
        {
            case CustomFieldType.TEXT:
                var textBox = new TextBox
                {
                    Style = (Style)Resources["entryDefault"],
                    Header = $"{field.name}*",
                    PlaceholderText = $"Enter {field.name}",
                    Margin = new Thickness(0, 10, 0, 0),
                    Width = 800,
                    HorizontalAlignment = HorizontalAlignment.Left
                };
                textBox.SetBinding(TextBox.TextProperty, binding);
                inputControl = textBox;
                break;
            case CustomFieldType.MULTI_LINE:
                var multiLineTextBox = new TextBox
                {
                    Style = (Style)Resources["entryDefault"],
                    Header = $"{field.name}",
                    PlaceholderText = $"Enter {field.name}",
                    Margin = new Thickness(0, 10, 0, 0),
                    Width = 800,
                    HorizontalAlignment = HorizontalAlignment.Left,
                    AcceptsReturn = true,
                    MinHeight = 100
                };
                multiLineTextBox.SetBinding(TextBox.TextProperty, binding);
                inputControl = multiLineTextBox;
                break;
            case CustomFieldType.DATETIME:
                var datePicker = new DatePicker
                {
                    Header = $"{field.name}",
                    Margin = new Thickness(0, 10, 0, 0),
                    Width = 800,
                    HorizontalAlignment = HorizontalAlignment.Left
                };
                datePicker.SetBinding(DatePicker.DateProperty, binding);
                inputControl = datePicker;
                break;
            // 其他类型的控件（如下拉框、复选框）自行补充
        }

        if (inputControl != null)
        {
            customFieldsContainer.Children.Add(inputControl);
        }
    }
}

关键细节： #

1. 绑定路径：使用[$field.uid]作为绑定路径，直接对应ViewModel里的索引器，确保每个自定义字段绑定到正确的数据源。
2. 控件匹配：根据CustomFieldType生成对应的输入控件，保证用户输入类型和模型存储类型一致。
3. 样式复用：和标准字段复用entryDefault样式，保持UI风格统一。

三、触发自定义字段加载 #

你可以在ViewModel加载BaseModel之后，调用LoadCustomFields方法传入自定义字段列表：

比如在ViewModel的Model属性setter中：

public BaseModel Model
{
    get { return cModel; }
    set
    {
        cModel = value;
        OnPropertyChanged();
        OnPropertyChanged(nameof(name));
        // 替换成你获取自定义字段定义的逻辑
        var customFields = GetCustomFieldDefinitions();
        // 调用视图层的加载方法
        LoadCustomFields(customFields);
    }
}

这样就能实现和标准输入项完全一致的双向绑定效果，自定义字段的修改会同步到BaseModel.customFieldValues，同时触发修改标记。

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