带有 Template10 的 AutoSuggestBox 没有任何建议

Question

我目前正在学习 C# 和 XAML 编程以及使用 MVVM。我已经检查了来自 Microsoft 的官方 AutoSuggestBox 示例。我查看了代码并尝试使用模板 10 实现相同的目标，但没有运气。没有建议弹出。

MainPage.XML：

<AutoSuggestBox RelativePanel.Below="stateTextBox"
                x:Name="asb"
                PlaceholderText="Type a name (e.g. John)"
                DisplayMemberPath="DisplayName"
                TextMemberPath="DisplayName"
                QueryIcon="Find"
                Margin="0,24,0,24"
                MinWidth="296"
                HorizontalAlignment="Left"
                TextChanged="{x:Bind ViewModel.FilterUsuals}"
                QuerySubmitted="{x:Bind ViewModel.ProcessQuery}"
                SuggestionChosen="{x:Bind ViewModel.ProcessChoice}"
                ItemsSource="{Binding Elements}"
                />

MainPageViewModel.cs：

Contact _Contact = default(Contact);
public Contact Contact { get { return _Contact; } set { Set(ref _Contact, value); } }

public void FilterUsuals(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    // We only want to get results when it was a user typing,
    // otherwise we assume the value got filled in by TextMemberPath
    // or the handler for SuggestionChosen
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        var matchingContacts = ContactSampleDataSource.GetMatchingContacts(sender.Text);

        sender.ItemsSource = matchingContacts.ToList();
    }
}

public void ProcessQuery(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
    if (args.ChosenSuggestion != null)
    {
    }
    else
    {
    }
}

public void ProcessChoice(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
    var contact = (Contact)args.SelectedItem;
}

Answer 1

我建议在页面的代码隐藏中处理 UI 事件，以使 UI 与视图模型分开。

这是一个示例，为了简单起见，删除了一些额外内容：

MainPage.xaml：

<AutoSuggestBox x:Name="FruitsSuggestion"
                ItemsSource="{x:Bind ViewModel.FruitSuggestions, Mode=OneWay}"                    PlaceholderText="Search"
                QueryIcon="Find"
                QuerySubmitted="FruitsSuggestion_QuerySubmitted"
                Text="{x:Bind ViewModel.Query, Mode=TwoWay}" />

MainPage.xaml.cs：

private void FruitsSuggestion_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
    ViewModel.Filter();
}

MainPageViewModel.cs：

private string _query = default(string);
public string Query { get => _query; set => Set(ref _query, value); }

private List<string> _allFruits = new List<string>
{
    "Apple",
    "Banana",
    "Orange",
    "Plum",
    "Peach",
    "Pineapple"
};
private ObservableCollection<string> _fruitSuggestions = new ObservableCollection<string>();
public ObservableCollection<string> FruitSuggestions => _fruitSuggestions;

public void Filter()
{
    FruitSuggestions.Clear();
    FruitSuggestions.AddRange(from fruit in _allFruits
                              where fruit.Contains(Query)
                              select fruit);
}

当您运行Filter 方法时，它会更新ObservableCollection，进而更新您的AutoSuggestBox 中的建议项目。