AutoSuggestBox with Template10は何も示唆していません

Question

私は現在、C＃とXAMLでプログラミングを学習しており、MVVMも使用しています。 Microsoftの公式AutoSuggestBoxサンプルを確認しました。私はコードを見て、Template 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の推奨項目が更新されます。