wpf 应用程序中的简单数据绑定

Question

您好，我正在尝试研究 wpf 中的简单数据绑定。我试过了，没成功。。求指教。。

<Window x:Class="WpfTestApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="350">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="70"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>

        <Label Content="First Name" Grid.Row="0" Grid.Column="0" Height="25" HorizontalAlignment="Stretch"/>
        <Label Content="Last Name" Grid.Row="1" Grid.Column="0" Height="25" HorizontalAlignment="Stretch"/>
        <Label Content="Full Name" Grid.Row="2" Grid.Column="0" Height="25" HorizontalAlignment="Stretch"/>

        <TextBox x:Name="fName" Text="{Binding FirstName, UpdateSourceTrigger=PropertyChanged}" Grid.Row="0" Grid.Column="1" Height="25" HorizontalAlignment="Stretch"/>
        <TextBox x:Name="lName" Text="{Binding LastName, UpdateSourceTrigger=PropertyChanged}" Grid.Row="1" Grid.Column="1"  Height="25" HorizontalAlignment="Stretch"/>
        <Label x:Name="lblFullName" Content="{Binding FirstName}" Grid.Row="2" Grid.Column="1" Height="25" HorizontalAlignment="Stretch"/>
        <Button x:Name="cmdCommand" Content="Command" Grid.Row="3" Grid.Column="1" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Click="cmdCommand_Click"/>
    </Grid>
</Window>

现在你明白了，我希望在文本框中键入名称后立即自动更新标签 lblFullName。

现在我的代码隐藏文件如下所示：

  public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private string _firstName;
        public string FirstName
        {
            get { return _firstName; }
            set
            {
                if (value != _firstName)
                {
                    _firstName = value;
                    OnPropertyChanged("FirstName");
                }
            }
        }

        private string _lastName;
        public string LastName
        {
            get { return _lastName; }
            set
            {
                if (value != _lastName)
                {
                    _lastName = value;
                    OnPropertyChanged("LastName");
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// Notifies objects registered to receive this event that a property value has changed.
        /// </summary>
        /// <param name="propertyName">The name of the property that was changed.</param>
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public MainWindow()
        {
            InitializeComponent();
        }

        private void cmdCommand_Click(object sender, RoutedEventArgs e)
        {
            lblFullName.Content = FirstName + " " + LastName;
        }

    }

不用说了，连点击命令按钮都不行...

有什么建议吗？

Answer 1

将 DataContext 设置为指向 window 本身将解决眼前的问题：

public MainWindow()
{
    InitializeComponent();
    this.DataContext = this;
}

Xaml中的Binding表达式中的路径都是相对于控件的DataContext的，因此必须设置DataContext。

但是，我强烈建议您将名字和姓氏放在单独的 class 中（例如 PersonViewModel），这将使代码更易于阅读和维护。

public class PersonViewModel : INotifyPropertyChanged
{
    private string _firstName;
    public string FirstName
    {
        get { return _firstName; }
        set
        {
            if (value != _firstName)
            {
                _firstName = value;
                OnPropertyChanged("FirstName");
            }
        }
    }

    private string _lastName;
    public string LastName
    {
        get { return _lastName; }
        set
        {
            if (value != _lastName)
            {
                _lastName = value;
                OnPropertyChanged("LastName");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        var handler = this.PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new PersonViewModel();
    }

    private void cmdCommand_Click(object sender, RoutedEventArgs e)
    {
        lblFullName.Content = FirstName + " " + LastName;
    }
}

现在这段代码的最后一部分不再起作用了。有两种解决方法。

快速而肮脏的解决方案：

    private void cmdCommand_Click(object sender, RoutedEventArgs e)
    {
         var person = this.DataContext as PersonViewModel;
         if(person == null) return;
         lblFullName.Content = string.Format("{0} {1}", person.FirstName, person.LastName);
    }

尝试执行正确的 MVVM 时，更好的方法是在 ViewModel 中添加一个额外的属性（注意名字和姓氏属性的变化！）：

public class PersonViewModel : INotifyPropertyChanged
{
    public string FullName
    {
        get 
        {
            return string.Format("{0} {1}", FirstName, LastName);
        }
    }

    private string _firstName;
    public string FirstName
    {
        get { return _firstName; }
        set
        {
            if (value != _firstName)
            {
                _firstName = value;
                OnPropertyChanged("FirstName");
                OnPropertyChanged("FullName");
            }
        }
    }

    private string _lastName;
    public string LastName
    {
        get { return _lastName; }
        set
        {
            if (value != _lastName)
            {
                _lastName = value;
                OnPropertyChanged("LastName");
                OnPropertyChanged("FullName");
            }
        }
    }
    // remainder of the class remains the same
}

删除按钮及其点击处理程序。将标签绑定到这个新的属性:

<Label Content="{Binding FullName}" 
       Grid.Row="2" Grid.Column="1" 
       Height="25" HorizontalAlignment="Stretch"/>

wpf 应用程序中的简单数据绑定

Simple DataBinding in wpf application

c#

data-binding

wpf

2-way-object-databinding