WinUI3 ComboBox如何取消已选中项？

当ComboBox设置IsEditable="True"时，确实会出现清空输入框Text后选中项仍保留、再次点击已选中项无法取消选中的情况，以下是几种可行的解决方法：

方法一：监听输入框Text变化，清空时同步取消选中 #

先给ComboBox添加Name和TextChanged事件：

<ComboBox
    Name="MyComboBox"
    MinWidth="120"
    IsEditable="True"
    PlaceholderText="please select"
    TextChanged="MyComboBox_TextChanged">
    <ComboBoxItem>A</ComboBoxItem>
    <ComboBoxItem>B</ComboBoxItem>
    <ComboBoxItem>C</ComboBoxItem>
</ComboBox>

然后在后台C#代码中实现事件逻辑：

private void MyComboBox_TextChanged(object sender, TextChangedEventArgs e)
{
    var comboBox = sender as ComboBox;
    if (comboBox != null && string.IsNullOrEmpty(comboBox.Text))
    {
        comboBox.SelectedItem = null;
    }
}

方法二：允许点击已选中项取消选中 #

给ComboBox添加PreviewMouseLeftButtonDown事件：

<ComboBox
    Name="MyComboBox"
    MinWidth="120"
    IsEditable="True"
    PlaceholderText="please select"
    PreviewMouseLeftButtonDown="MyComboBox_PreviewMouseLeftButtonDown">
    <ComboBoxItem>A</ComboBoxItem>
    <ComboBoxItem>B</ComboBoxItem>
    <ComboBoxItem>C</ComboBoxItem>
</ComboBox>

后台代码实现点击判断逻辑：

private void MyComboBox_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var comboBox = sender as ComboBox;
    if (comboBox == null) return;

    var clickedItem = FindVisualParent<ComboBoxItem>(e.OriginalSource as DependencyObject);
    if (clickedItem != null && clickedItem == comboBox.SelectedItem)
    {
        comboBox.SelectedItem = null;
        e.Handled = true;
    }
}

// 辅助方法：向上查找父级ComboBoxItem
private T FindVisualParent<T>(DependencyObject child) where T : DependencyObject
{
    var parent = VisualTreeHelper.GetParent(child);
    if (parent == null) return null;
    return parent is T ? (T)parent : FindVisualParent<T>(parent);
}

方法三：MVVM模式下的绑定处理 #

如果采用MVVM架构，可以将ComboBox的SelectedItem和Text绑定到ViewModel属性，在属性逻辑中联动处理：

ViewModel示例：

private string _selectedItem;
public string SelectedItem
{
    get => _selectedItem;
    set => SetProperty(ref _selectedItem, value);
}

private string _comboBoxText;
public string ComboBoxText
{
    get => _comboBoxText;
    set
    {
        if (SetProperty(ref _comboBoxText, value) && string.IsNullOrEmpty(value))
        {
            SelectedItem = null;
        }
    }
}

XAML绑定代码：

<ComboBox
    MinWidth="120"
    IsEditable="True"
    PlaceholderText="please select"
    SelectedItem="{Binding SelectedItem}"
    Text="{Binding ComboBoxText, UpdateSourceTrigger=PropertyChanged}">
    <ComboBoxItem>A</ComboBoxItem>
    <ComboBoxItem>B</ComboBoxItem>
    <ComboBoxItem>C</ComboBoxItem>
</ComboBox>

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