Template 10 UWP How to bind to a autoSuggestBox inside a MenuFlyoutItem - mvvm

Question

I am using the MVVM pattern to bind the properties of the AutoSuggestBox in a ViewPage to my ViewModel. This works fine when I am inside a Grid or a stackPanel.
But once I put the AutoSuggestBox inside a MenuFlyout of a Button. I get the following Error at compile time
Error Object reference not set to an instance of an object.
Any guidance on how to bind the properties of AutoSuggestBox inside the MenuFlyoutItem??
Here is the code I am trying to compile.
<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>
Not sure as to the nature of the need for it to be in a MenuFlyout. Why cause yourself so much pain doing it that way when it can be just in a Flyout subtype within the button itself?
As for the binding this has nothing to do with Template10. It's probably related to a collection that wasn't initialized. Verify those collections you are binding to have been created correctly (i.e. new List<yourtype>() for example)

Answer 2

I believe your error is because you are using a ControlTemplate that immediately changes the data context from the page, making your ViewModel out of scope. More importantly is that x:Bind is not supported in ControlTemplates. This means you can't use the handy x:Bind to Events and will need to create commands. You will have to use behaviors to accomplish this most easily.
Something similar to this.
<AutoSuggestBox>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="TextChanged">
<core:InvokeCommandAction Command="{Binding TextChangedCommand}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</AutoSuggestBox>
Or similar to this.
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);
}
}
}
Then this.
<AutoSuggestBox
ex:AutoSuggestBoxAttachedProperties.TextChangedCommand="{Binding TextChangedCommand}" />
Best of luck. /Jerry