Template 10 UWP MenuFlyoutItem内のautoSuggestBoxにバインドする方法

Question

MVVMパターンを使用して、ViewPage内のAutoSuggestBoxのプロパティをViewModelにバインドしています。これは、私がGridまたはstackPanelの中​​にいるときにうまく動作します。

しかし、いったんAutoSuggestBoxをボタンのMenuFlyoutの中に置くと、コンパイル時に次のエラーが発生する

エラーオブジェクト参照がオブジェクトのインスタンスに設定されていません。

MenuFlyoutItem内のAutoSuggestBoxのプロパティをバインドする方法に関するガイダンスはありますか？

ここに私がコンパイルしようとしているコードがあります。

<Button> 
    <Button.Flyout> 
    <MenuFlyoutItem > 
      <MenuFlyoutItem.Template> 
      <ControlTemplate TargetType="MenuFlyoutItem"> 
       <AutoSuggestBox Header="What's your name?" 
        TextChanged="{x:Bind ViewModel.FilterUsuals}" 
        QuerySubmitted="{x:Bind ViewModel.ProcessQuery}" 
        SuggestionChosen="{x:Bind ViewModel.ProcessChoice}" 
        ItemsSource="{Binding Elements}" 
        Text="{x:Bind ViewModel.SearchText, Mode=TwoWay}" 
        QueryIcon="Find" /> 
      </ControlTemplate> 
      </MenuFlyoutItem.Template> 
    </MenuFlyoutItem> 
</Button.Flyout> 
</Button > 

Answer 1

あなたのエラーは、ページからデータコンテキストをすぐに変更してViewModelを有効範囲外にするControlTemplateを使用しているためです。もっと重要なのは、x：BindはControlTemplatesでサポートされていないということです。つまり、便利なx：Bind to Eventsを使用することはできず、コマンドを作成する必要があります。これを最も簡単に実行するには、動作を使用する必要があります。

これと似たようなものです。

<AutoSuggestBox> 
    <interactivity:Interaction.Behaviors> 
     <core:EventTriggerBehavior EventName="TextChanged"> 
     <core:InvokeCommandAction Command="{Binding TextChangedCommand}" /> 
     </core:EventTriggerBehavior> 
    </interactivity:Interaction.Behaviors> 
</AutoSuggestBox> 

またはこれに類するもの。

public class AutoSuggestBoxAttachedProperties : Windows.UI.Xaml.DependencyObject 
{ 
    public static ICommand GetTextChangedCommand(Windows.UI.Xaml.Controls.AutoSuggestBox obj) 
     => (ICommand)obj.GetValue(TextChangedCommandProperty); 
    public static void SetTextChangedCommand(Windows.UI.Xaml.Controls.AutoSuggestBox obj, ICommand value) 
     => obj.SetValue(TextChangedCommandProperty, value); 
    public static readonly DependencyProperty TextChangedCommandProperty = 
     DependencyProperty.RegisterAttached("TextChangedCommand", typeof(ICommand), 
      typeof(AutoSuggestBoxAttachedProperties), new PropertyMetadata(null, TextChangedCommandChanged)); 

    public static object GetTextChangedCommandParameter(Windows.UI.Xaml.Controls.AutoSuggestBox obj) 
     => (object)obj.GetValue(TextChangedCommandParameterProperty); 
    public static void SetTextChangedCommandParameter(Windows.UI.Xaml.Controls.AutoSuggestBox obj, object value) 
     => obj.SetValue(TextChangedCommandParameterProperty, value); 
    public static readonly DependencyProperty TextChangedCommandParameterProperty = 
     DependencyProperty.RegisterAttached("TextChangedCommandParameter", typeof(object), 
      typeof(AutoSuggestBoxAttachedProperties), new PropertyMetadata(null)); 

    private static void TextChangedCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
    { 
     var box = d as Windows.UI.Xaml.Controls.AutoSuggestBox; 
     box.TextChanged -= Box_TextChanged; 
     if (e.NewValue != null) 
     { 
      box.TextChanged += Box_TextChanged; 
     } 
    } 

    private static void Box_TextChanged(Windows.UI.Xaml.Controls.AutoSuggestBox sender, Windows.UI.Xaml.Controls.AutoSuggestBoxTextChangedEventArgs args) 
    { 
     var command = GetTextChangedCommand(sender); 
     if (command != null) 
     { 
      var parameter = GetTextChangedCommandParameter(sender); 
      command.Execute(parameter); 
     } 
    } 
} 

これです。

<AutoSuggestBox 
    ex:AutoSuggestBoxAttachedProperties.TextChangedCommand="{Binding TextChangedCommand}" /> 

最高の運があります。/Jerry

Answer 2

<Button Content="Button" Margin="10,0" > 
    <Button.Flyout> 
     <Flyout Placement="Top"> 
       <AutoSuggestBox ... /> 
     </Flyout> 
    </Button.Flyout> 
    </Button> 

それはMenuFlyoutにあるようにする必要性の性質に関してわかりません。ボタン自体の中のフライアウトのサブタイプになってしまうと、そんなに苦痛がかかるのはなぜですか？

バインディングに関しては、これはTemplate10とは関係ありません。おそらく、初期化されていないコレクションに関係しています。バインドしているコレクションが正しく作成されていることを確認してください（例：new List<yourtype>()）