템플릿 10 UWP MenuFlyoutItem 내 autoSuggestBox에 바인딩하는 방법

Question

MVVM 패턴을 사용하여 ViewPage의 AutoSuggestBox 속성을 ViewModel에 바인딩합니다. Grid 나 stackPanel 안에있을 때 잘 작동합니다.

그러나 일단 AutoSuggestBox를 Button의 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>()