UWP iがUWPでAutoSuggestBoxコントロールのQuerySubmittedコマンドを呼び出していますMVVM

Question

にAutoSuggestBoxへの結合。 コマンドは、ビューモデルのICommandにバインドされます。 問題は純粋なUIであり、MVVMでは受け入れられないAutoSuggestBoxQuerySubmittedEventArgsを受け入れる必要があることです。

私のコードは以下のようになります。

<AutoSuggestBox Name="SearchAutoSuggestBox" 
       PlaceholderText="Search by keywords" 
       QueryIcon="Find" 
       > 
    <interactivity:Interaction.Behaviors> 
     <core:EventTriggerBehavior EventName="QuerySubmitted"> 
      <core:InvokeCommandAction Command="{x:Bind ViewModel.SearchCommand}" /> 
     </core:EventTriggerBehavior> 
    </interactivity:Interaction.Behaviors> 
</AutoSuggestBox> 

と私の見解モデルは以下のようになります。

public DelegateCommand<AutoSuggestBoxQuerySubmittedEventArgs> SearchCommand { get; } 

public MainPageViewModel() 
{ 
    SearchCommand = new DelegateCommand<AutoSuggestBoxQuerySubmittedEventArgs>(ExecuteMethod); 
} 

private void ExecuteMethod(AutoSuggestBoxQuerySubmittedEventArgs o) 
{ 
    // CODE HERE 
} 

ofcoursのAutoSuggestBoxQuerySubmittedEventArgsビューモデルでは受け入れられません。 代替案を探しています... 提案と同じです。選択...

Answer 1

InvokeCommandActionは、あなたが使用することができますInputConverterという名前のパラメータを持っていますイベント引数をViewModelに渡すことができる他のパラメータに変換します。

まず、このようなあなたのイベント引数から必要なものを抽出するIValueConverterクラスを作成します -

public class AutoSuggestQueryParameterConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
     { 
      // cast value to whatever EventArgs class you are expecting here 
      var args = (AutoSuggestBoxQuerySubmittedEventArgs)value; 
      // return what you need from the args 
      return (string)args.ChosenSuggestion; 
     } 
} 

次に、このようなあなたのXAMLでそのコンバータを使用：あなたのviewmodelで最後に

<Page.Resources> 
    <converters:AutoSuggestQueryParameterConverter x:Key="ArgsConverter" /> 
</Page.Resources> 

<AutoSuggestBox Name="SearchAutoSuggestBox" 
      PlaceholderText="Search by keywords" 
      QueryIcon="Find"> 
    <interactivity:Interaction.Behaviors> 
     <core:EventTriggerBehavior EventName="QuerySubmitted"> 
     <core:InvokeCommandAction 
       Command="{x:Bind ViewModel.SearchCommand}" 
       InputConverter="{StaticResource ArgsConverter}" /> 
     </core:EventTriggerBehavior> 
    </interactivity:Interaction.Behaviors> 
</AutoSuggestBox> 

文字列をパラメータとして受け入れるようにコマンドを変更します。ビューモデルでは

public class DelegateCommand<T> : ICommand 
{ 
    private readonly Action<T> executeAction; 
    Func<object, bool> canExecute; 

    public event EventHandler CanExecuteChanged; 

    public DelegateCommand(Action<T> executeAction) 
     : this(executeAction, null) 
    { 
     //var a = ((Page)(((Func<object, bool>)(executeAction.Target)).Target)).Name; 
     //((ViewModel.VMBranchSelection)(executeAction.Target)).; 

    } 

    public DelegateCommand(Action<T> executeAction, Func<object, bool> canExecute) 
    { 
     this.executeAction = executeAction; 
     this.canExecute = canExecute; 
    } 

    public bool CanExecute(object parameter) 
    { 
     return canExecute == null ? true : canExecute(parameter); 
    } 

    public void Execute(object parameter) 
    { 
     executeAction((T)parameter); 
    } 
    public void RaiseCanExecuteChanged() 
    { 
     EventHandler handler = this.CanExecuteChanged; 
     if (handler != null) 
     { 
      handler(this, new EventArgs()); 
     } 
    } 
} 

をDelegateCommandクラスを作成します

public DelegateCommand<string> SearchCommand { get; } 

public MainPageViewModel() 
{ 
    SearchCommand = new DelegateCommand<string>(ExecuteMethod); 
} 

private void ExecuteMethod(string o) 
{ 
    // CODE HERE 
} 

Answer 2

non pure MVVMの方法です。

MainPage.xaml：

<AutoSuggestBox Name="SearchAutoSuggestBox" 
     PlaceholderText="Search by keywords" 
     QueryIcon="Find" QuerySubmitted="{x:Bind ViewModel.SearchQuerySubmitted}" IsEnabled="{x:Bind ViewModel.CanExecuteSearchCommand, Mode=TwoWay}" 
     > 
</AutoSuggestBox> 

MainPageViewModel.cs：

public class MainPageViewModel : INotifyPropertyChanged 
{ 
    private bool _canExecuteSearchCommand; 

    public MainPageViewModel() 
    { 
     this.CanExecuteSearchCommand = true; 
    } 

    public bool CanExecuteSearchCommand 
    { 
     get { return _canExecuteSearchCommand; } 
     set 
     { 
      bool changed = _canExecuteSearchCommand != value; 
      _canExecuteSearchCommand = value; 

      if(changed) 
       this.OnPropertyChanged(); 
     } 
    } 

    public void SearchQuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args) 
    { 
     // Just example disabling SearchBox 
     this.CanExecuteSearchCommand = false; 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) 
    { 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 
    } 
} 

MainPage.cs：

MainPageViewModel ViewModel = new MainPageViewModel(); 

Answer 3

あなたはビューモデルのプロパティに検索文字列（Textプロパティ）やイベントをバインドすることができますパラメータのないメソッド。この方法では、ビューモデルは文句を言わないUIオブジェクトに対処する必要があります：

XAML：

<AutoSuggestBox Header="What's your name?" 
       TextChanged="{x:Bind ViewModel.FilterUsuals}" 
       QuerySubmitted="{x:Bind ViewModel.ProcessQuery}" 
       SuggestionChosen="{x:Bind ViewModel.ProcessChoice}" 
       ItemsSource="{x:Bind ViewModel.Usuals, Mode=OneWay}" 
       Text="{x:Bind ViewModel.SearchText, Mode=TwoWay}" 
       QueryIcon="Find" /> 

コードの背後にある：

public class MainPageViewModel : SomeViewModelBaseClass 
{ 
    /* Boilerplate code and constructor not included */ 

    private string _SearchText; 
    public string SearchText {/* getter and setter INotyfyPropertyChange compliant */ } 

    private List<string> _Usuals; // Initialized on constructor 
    public string Usuals {/* getter and setter INotyfyPropertyChange compliant */ } 


    public void FilterUsuals() 
    { 
     // the search string is in SearchText Example: 
     Usuals = _UsualsStore.Where(u => u.Contains(_SearchText.ToLower())).ToList(); 
    } 

    public void ProcessQuery() { /* TODO - search string is in SearchText */ } 

    public void ProcessChoice() { /* TODO - search string is in SearchText */ } 
} 

Answer 4

UWPがUWPモバイルアプリケーション

についてMVVM

にAutoSuggestBoxにCommand/Delegateをバインド：だから、あなたのVMで、次のを持っているでしょう

自己暗示のTextBoxのItemsSourceのためのXAMLコードで

<AutoSuggestBox Grid.Column="1" x:Name="SuggessionSelectCity" 
      PlaceholderText="Search by keywords" QueryIcon="Find" 
      ItemsSource="{Binding PApplicantCityList}" 

      HorizontalAlignment="Center" VerticalAlignment="Center" DisplayMemberPath="Description" Width="250" Height="45"> 

       <Interactivity:Interaction.Behaviors> 
        <Core:EventTriggerBehavior EventName="TextChanged"> 
         <Core:EventTriggerBehavior.Actions> 
          <Core:InvokeCommandAction Command="{Binding SuggessionSelectCityTextChange}"/> 
         </Core:EventTriggerBehavior.Actions> 
        </Core:EventTriggerBehavior> 

        <Core:EventTriggerBehavior EventName="QuerySubmitted"> 
         <Core:EventTriggerBehavior.Actions> 
          <Core:InvokeCommandAction Command="{Binding SuggessionSelectCity_QuerySubmitted}"/> 
         </Core:EventTriggerBehavior.Actions> 
        </Core:EventTriggerBehavior> 

        <Core:EventTriggerBehavior EventName="SuggestionChosen"> 
         <Core:EventTriggerBehavior.Actions> 
          <Core:InvokeCommandAction Command="{Binding SuggessionSelectCitySuggestionChosen}"/> 
         </Core:EventTriggerBehavior.Actions> 
        </Core:EventTriggerBehavior> 


       </Interactivity:Interaction.Behaviors> 
      </AutoSuggestBox> 
     </Grid> 

ビューモデルでリストを作成します

private ObservableCollection<ResultMasterModel> ApplicantCityList; 
    public ObservableCollection<ResultMasterModel> PApplicantCityList 
    { 
     get { return ApplicantCityList; } 
     set { this.SetProperty(ref this.ApplicantCityList, value); } 
    } 

モデルフォルダでモデルを作成し、上記のリストに

をいくつかのハードコード値を追加します

public class ResultMasterModel 
{ 
    public string Code { get; set; } 
    public string Description { get; set; } 
}