使用模板 10 将 AutoSuggestBox 绑定到 UWP 中的 ViewModel 属性答案

【问题标题】：Bind AutoSuggestBox to ViewModel Property in UWP using Template 10使用模板 10 将 AutoSuggestBox 绑定到 UWP 中的 ViewModel 属性
【发布时间】：2016-11-16 07:12:39
【问题描述】：

在 UWP/Template 10 应用中，我们需要 AutoSuggestBox 来更新 ViewModel 上的 Customer 属性。 AutoSuggestBox 按预期过滤并从客户列表中选择，但 ViewModel 的 Customer 属性保持为空。

AutoSuggestBox 从数据库中填充。我已经省略了该代码，因为它运行良好。

这个演示项目叫做 Redstone。以下是我认为是相关的代码摘录

MainPage.xaml

<Page x:Class="Redstone.Views.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:Behaviors="using:Template10.Behaviors"
  xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
  xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
  xmlns:controls="using:Template10.Controls"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:uc="using:Redstone.UserControls"
  xmlns:local="using:Redstone.Views"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:converters="using:Redstone.Validation" 
  xmlns:behaviors="using:Template10.Behaviors"
  xmlns:vm="using:Redstone.ViewModels" 
  mc:Ignorable="d">

<Page.DataContext>
    <vm:MainPageViewModel x:Name="ViewModel" />
</Page.DataContext>
      <AutoSuggestBox Name="CustomerAutoSuggestBox"
           Width="244" 
           Margin="0,5"
           TextMemberPath="{x:Bind ViewModel.Customer.FileAs, Mode=TwoWay}"
           PlaceholderText="Customer"
           QueryIcon="Find"
           TextChanged="{x:Bind ViewModel.FindCustomer_TextChanged}"
           SuggestionChosen="{x:Bind ViewModel.FindCustomer_SuggestionChosen}">

以及来自MainPageViewModel的相关摘录

public class MainPageViewModel : ViewModelBase
{
    Customer _Customer = default(Customer);
    public Customer Customer { get { return _Customer; } set { Set(ref _Customer, value); } }

    public void FindCustomer_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
    {
        if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
        {
            sender.ItemsSource = CustomerLookupList.Where(cl => cl.Lookup.IndexOf(sender.Text, StringComparison.CurrentCultureIgnoreCase) > -1).OrderBy(cl => cl.FileAs);
        }
    }
    public void FindCustomer_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
    {
        CustomerLookup selectedCustomer = args.SelectedItem as CustomerLookup;
        sender.Text = selectedCustomer.FileAs;
    }

最后是客户类

public class Customer
{
    public Guid CustomerId { get; set; } = Guid.NewGuid();
    public string FileAs { get; set; }
}

AutoSuggestBox 正在按预期过滤和显示。为什么 MainPageViewModel 的 Customer 属性为空？

【问题讨论】：

您已经更改了FindCustomer_SuggestionChosen 事件中的文本，因此您不需要在xaml 中设置TextMemberPath 属性。而且我找不到任何地方可以更改代码中 Customer 的值，因此您可能需要更改 FindCustomer_SuggestionChosen 事件中的 Customer 属性。

标签： xaml mvvm uwp template10

【解决方案1】：

根据@tao 的建议，我已将 ViewModel 修改如下，现在一切都变成了tickety-boo

        public void FindCustomer_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
    {
        CustomerLookup selectedCustomer = args.SelectedItem as CustomerLookup;
        this.Customer = CustomersService.GetCustomer(selectedCustomer.CustomerId);
    }

【讨论】：