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

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

不确定它在MenuFlyout中的性质。当它可以只是在按钮本身的Flyout子类型中时，为什么会让自己如此痛苦呢？

至于绑定，这与Template10无关。它可能与尚未初始化的集合有关。验证您正在绑定的那些集合是否已正确创建（例如new List<yourtype>()）

Answer 2

我相信您的错误是因为您正在使用ControlTemplate立即更改页面中的数据上下文，使您的ViewModel超出范围。更重要的是，ControlTmplates不支持x：Bind。这意味着您无法使用方便的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}" />

祝你好运。 /杰里

Template 10 UWP如何绑定到MenuFlyoutItem内的autoSuggestBox

2 个答案: