UWP 绑定到属性答案

【问题标题】：UWP Binding to a propertyUWP 绑定到属性
【发布时间】：2017-11-08 10:13:58
【问题描述】：

我正在制作 UWP，无法正确掌握 DataBinding 和 INotifyPropertyChanged 我正在尝试将ContentDialog 中的一些TextBox 绑定到我的代码隐藏cs 文件中的属性。

这是我的视图模型：

class UserViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    public string _fname { get; set; }
    public string _lname { get; set; }    

    public string Fname
    {
        get { return _fname; }
        set
        {
            _fname = value;
            this.OnPropertyChanged();
        }
    }

    public string Lname
    {
        get { return _lname; }
        set
        {
            _lname = value;
            this.OnPropertyChanged();
        }
    }

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {            
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

后面的代码：

public sealed partial class MainPage : Page
{    
    UserViewModel User { get; set; }

    public MainPage()
    {
        this.InitializeComponent();     
        User = new UserViewModel();
    }
    ....
    ....
    private void SomeButton_Click(object sender, TappedRoutedEventArgs e)
    {
        //GetUserDetails is a static method that returns UserViewModel
        User = UserStore.GetUserDetails();

        //show the content dialog
        ContentDialogResult result = await UpdateUserDialog.ShowAsync();
    }
}

这是ContentDialog 的 XAML：

<ContentDialog Name="UpdateUserDialog">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>                               
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <TextBox Grid.Row="0"
        Grid.Column="0"
        Grid.ColumnSpan="2"
        Name="tbFirstNameUpdate"
        Text="{x:Bind Path=User.Fname, Mode=OneWay}"                           
        Style="{StaticResource SignUpTextBox}"/>

    <TextBox Grid.Row="1"
        Grid.Column="0"
        Grid.ColumnSpan="2"
        Name="tbLastNameUpdate"
        Text="{x:Bind Path=User.Lname, Mode=OneWay}"
        Style="{StaticResource SignUpTextBox}"/>
</ContentDialog>

注意：当我像这样在 MainPage 构造函数本身中初始化视图模型时，绑定效果很好：

User = new UserViewModel { Fname = "name", Lname = "name" };

【问题讨论】：

标签： xaml data-binding uwp inotifypropertychanged

【解决方案1】：

当您将 User 属性的值替换为新的视图模型实例时，您不会触发 PropertyChanged 事件。

你可以简单地替换

User = UserStore.GetUserDetails();

通过

var user = UserStore.GetUserDetails();
User.Fname = user.Fname;
User.Lname = user.Lname;

并因此更新视图模型的现有实例。

【讨论】：

这绝对有效。但是当引用一个新的 ViewModel 实例时，有什么方法可以触发 PropertyChanged 事件？因为我在视图模型中有更多属性。
为 User 属性实现 INotifyPropertyChanged。但是，我不确定x:Bind 是否会做出反应。试一试。无论如何，从架构的角度来看，我建议在单个 VM 实例上运行。将 GetUserDetails 设为 VM 类的实例方法，或将 VM 实例作为参数传递给它。

【解决方案2】：

您应该将DataContext 属性设置为视图模型实例：

public MainPage()
{
    this.InitializeComponent();     
    User = new UserViewModel();
    DataContext = User;
}

见：https://docs.microsoft.com/en-us/windows/uwp/data-binding/data-binding-in-depth

【讨论】：

请注意，这只对{Binding ...}是必需的，而不是{x:Bind ...}。