当 UWP ComboBox 中的“IsEditable”为真时，如何将输入的文本显示为 Combobox 选定项？

Question

我想创建一个 ComboBox + TextBox，为此我尝试在 ComboBox 中设置“IsEditable”为真。 我正在使用一组对象作为 ComboBox 的 ItemSource，它工作正常。但是当我输入任何文本时，它会显示这个错误。

错误：BindingExpression 路径错误：在“Windows.Foundation.IReference`1”上找不到“ComboBoxOption”属性。抛出异常：CBExample2.exe 中的“System.NullReferenceException”

我认为这个错误是因为当我在组合框中输入文本时，它会将它作为一个未转换回对象的字符串。

这是我的完整代码。

MainPage.xaml

<Page.Resources>
    <local:ComboBoxItemConvert x:Key="ComboBoxItemConvert" />
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <ComboBox Name="ComboBox"
                  DisplayMemberPath="ComboBoxHumanReadableOption"
                  Header="ComboBox"
                  IsEditable="True"
                  IsTextSearchEnabled="True"
                  ItemsSource="{x:Bind ComboBoxOptions}"
                  SelectedItem="{x:Bind SelectedComboBoxOption, Mode=TwoWay, Converter={StaticResource ComboBoxItemConvert}}"
                  SelectedValuePath="ComboBoxOption" />
        <TextBlock Name="BoundTextblock" Text="{x:Bind SelectedComboBoxOption.ComboBoxHumanReadableOption, Mode=OneWay}" />
    </StackPanel>
</Grid>

背后的代码

public sealed partial class MainPage : Page, INotifyPropertyChanged
{

    private ObservableCollection<ComboBoxItem> ComboBoxOptions;
    public event PropertyChangedEventHandler PropertyChanged;
    public MainPage()
    {
        this.InitializeComponent();
        ComboBoxOptions = new ObservableCollection<ComboBoxItem>();
        ComboBoxOptionsManager.GetComboBoxList(ComboBoxOptions);
        SelectedComboBoxOption = ComboBoxOptions[0];
    }

    public class ComboBoxItem
    {
        public string ComboBoxOption { get; set; }
        public string ComboBoxHumanReadableOption { get; set; }
    }

    public class ComboBoxOptionsManager
    {
        public static void GetComboBoxList(ObservableCollection<ComboBoxItem> ComboBoxItems)
        {
            var allItems = getComboBoxItems();
            ComboBoxItems.Clear();
            allItems.ForEach(p => ComboBoxItems.Add(p));
        }

        private static List<ComboBoxItem> getComboBoxItems()
        {
            var items = new List<ComboBoxItem>();

            items.Add(new ComboBoxItem() { ComboBoxOption = "Option1", ComboBoxHumanReadableOption = "Option 1" });
            items.Add(new ComboBoxItem() { ComboBoxOption = "Option2", ComboBoxHumanReadableOption = "Option 2" });
            items.Add(new ComboBoxItem() { ComboBoxOption = "Option3", ComboBoxHumanReadableOption = "Option 3" });

            return items;
        }
    }

    ComboBoxItem _SelectedComboBoxOption ;
    public ComboBoxItem SelectedComboBoxOption
    {
        get
        {
            return _SelectedComboBoxOption;
        }
        set
        {
            if (_SelectedComboBoxOption != value)
            {
                _SelectedComboBoxOption = value;
                RaisePropertyChanged("SelectedComboBoxOption");
            }
        }
    }

    void RaisePropertyChanged(string prop)
    {
        if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(prop)); }
    }
}

还有转换器类

public class ComboBoxItemConvert : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value.GetType().Equals(typeof(ComboBoxItem)))
        {
            return value;
        }
        return new ComboBoxItem() { ComboBoxOption = "new", ComboBoxHumanReadableOption = "new" }; 

    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value as MainPage.ComboBoxItem;
    }
}

我想要的是将输入的文本添加为​​组合框中的新选项，输入时应将其视为已选中。 请帮忙。在过去的 4 天里，我一直停留在这一点上。提前致谢。

Answer 1

错误原因是转换器没有考虑null的情况。

请按照以下步骤操作：

1. 从MainPage 中删除了ComboBoxItem 和ComboBoxOptionsManager 类的定义，分别定义。

2. 重写ComboBoxItem的Equal方法来处理后续的项目添加

public class ComboBoxItem
{
    public string ComboBoxOption { get; set; }
    public string ComboBoxHumanReadableOption { get; set; }

    public override bool Equals(object obj)
    {
        return obj is ComboBoxItem item &&
               ComboBoxOption == item.ComboBoxOption;
    }
}

1. 修改ComboBoxItemConvert的结构，添加数据集

public class ComboBoxItemConvert : IValueConverter
{
    public ObservableCollection<ComboBoxItem> Options { get; set; }
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value !=null && value.GetType().Equals(typeof(ComboBoxItem)))
        {
            return value;
        }
        var newItem = new ComboBoxItem() { ComboBoxOption = "new", ComboBoxHumanReadableOption = "new" };
        if(Options!=null && !Options.Contains(newItem))
        {
            Options.Add(newItem);
        }
        return newItem;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value as ComboBoxItem;
    }
}

用法

<local:ComboBoxItemConvert x:Key="ComboBoxItemConvert" Options="{x:Bind ComboBoxOptions}" />

当您输入不在默认数据集 (ComboBoxOptions) 中的项目并按 Enter 时，新的 ComboBoxItem 将作为选定项目添加到数据集中。

---

如果您需要输入自定义文本并相应地生成新条目，则需要添加新内容。

MainPage.xaml.cs

private string _editText;
public string EditText
{
    get => _editText;
    set { _editText = value; RaisePropertyChanged("EditText"); }
}

转换器

...
public string ComboBoxEditText { get; set; }
...
public object Convert(object value, Type targetType, object parameter, string language)
{
    ...
    var newItem = new ComboBoxItem() { ComboBoxOption = ComboBoxEditText ?? "new", ComboBoxHumanReadableOption = ComboBoxEditText ?? "new" };
    if (Options != null && !Options.Contains(newItem))
    {
        Options.Add(newItem);
    }
    return newItem;
}

MainPage.xaml

<Page.Resources>
    <local:ComboBoxItemConvert x:Key="ComboBoxItemConvert" Options="{x:Bind ComboBoxOptions}" ComboBoxEditText="{x:Bind EditText,Mode=OneWay}"/>
</Page.Resources>

...
<ComboBox Name="ComboBox"
      ...
      IsEditable="True"
      IsTextSearchEnabled="True"
      Text="{x:Bind EditText,Mode=TwoWay}"
      ...
      />
...

这将满足您的要求。

最好的问候。