WPF 绑定和 UpdateSourceTrigger 属性的简单快速示例

Sukanya Lingamaneni

3.40/5 (3投票s)

2015年4月8日

CPOL

3分钟阅读

21917

226

这是一个关于绑定和 UpdateSourceTrigger 属性的简单快速示例，适用于 WPF。

下载源码 - 62.3 KB

引言

这是我关于 WPF 的第一篇文章。撰写本文的目的是让初学者对绑定和 UpdateSourceTrigger 属性的主要用途有一个基本的了解。

在本文中，我们将了解绑定是如何工作的，以及 UpdateSourceTrigger 属性在触发和响应更改中的主要用途是什么。

UpdateSourceTrigger 事件中 PropertyChanged 属性的使用

简单来说，这是 WPF 中绑定中使用的一个属性。此属性定义了绑定源更新的时机。

这只不过是源和目标之间的通信。它处理目标更改时如何更新源。

在此示例中，我们将看到输入的 EmployeeName（目标）如何显示在下面的文本块（源）中。

有两种绑定模式可以更新源，即 OnewaytoSource 和 TwoWay。

UpdateSourceTrigger 属性具有如下属性

默认值
LostFocus
Explicit (显式)
PropertyChanged

让我们以循序渐进的方式快速简单地了解一个例子。

打开 Visual Studio --> 文件 -> 新建 -> 项目 --> 选择 WPF 应用程序

给出项目名称并单击确定。

让我们创建一个示例 UI，输入基本的员工详细信息与绑定，稍后我们将在 DataGrid 中显示数据。

MainWindow.xaml

<Window x:Class="Adding_To_DataGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="680">
    <Grid Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="220"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="60"/>
        </Grid.RowDefinitions>
        <DataGrid Name="dgDataGrid" 
	Grid.Row="0" AutoGenerateColumns="False" 
		Background="LightGray" Margin="5,15">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Employee ID"/>
                <DataGridTextColumn Header="Employee Name" />
                <DataGridTextColumn Header="EmployeeDepartment" />
                <DataGridTextColumn Header="Employee Designation" />
                <DataGridTextColumn Header="Contact Number"/>
                <DataGridTextColumn Header="Employee Location" />
            </DataGrid.Columns>
        </DataGrid>
        <Grid Grid.Row="1" Background="LightBlue" Margin="6,30">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="160"/>
            </Grid.ColumnDefinitions>
            <Label Name="lbEmpID" Content="Employee ID"  
            Grid.Row="0" Grid.Column="0" Height="30"/>
            <TextBox Name="tbEmpID" Height="30" 
            Grid.Row="0" Grid.Column="1" />
            <Label Name="lbEmpName" Height="30" 
            Content="Employee Name"  Grid.Row="0" Grid.Column="2"/>
            <TextBox Name="tbEmpName" Height="30"  
            Grid.Row="0" Grid.Column="3" />
            <Label Name="lbEmpDepartment" Height="30" 
            Content="Employee Department" Grid.Row="1" Grid.Column="0"/>
            <TextBox Name="tbEmpDepartment" Height="30" 
            Grid.Row="1" Grid.Column="1"/>
            <Label Name="lbEmpDesignation" Height="30" 
            Content="Employee Designation"  Grid.Row="1" 
            Grid.Column="2"/>
            <TextBox Name="tbEmpDesignation" Height="30"  
            Grid.Row="1" Grid.Column="3"/>
            <Label Name="lbEmpContactNo" Height="30" 
            Content="Contact Number"  Grid.Row="2" Grid.Column="0"/>
            <TextBox Name="tbEmpContactNo" Height="30" 
            Grid.Row="2" Grid.Column="1"/>
            <Label Name="lbEmpLocation" Height="30" 
            Content="Employee Location"  Grid.Row="2" 
            Grid.Column="2"/>
            <TextBox Name="tbEmpLocation" Height="30" 
            Grid.Row="2" Grid.Column="3"/>
        </Grid>
        <StackPanel Orientation="Horizontal" Grid.Row="2" 
        Height="40" Width="250">
            <Button Name="btnSubmit" Content="Submit" 
            Click="btnSubmit_Click" 
            Width="100" Height="30" FontSize="14"/>
            <Button Name="btnClearGrid" Content="ClearGrid" 
            Click="btnClearGrid_Click" 
            Width="100" Height="30" Margin="20,0,0,0"/>
        </StackPanel>
        <StackPanel Grid.Row="3" Orientation="Horizontal">
            <Label Content="You have given the Employee name as.." 
            FontSize="14" Foreground="Green" 
            FontWeight="Bold" Height="30" Margin="10,0,0,0"/>
            <TextBlock  Name="tbText" FontSize="16" 
            FontWeight="Bold" Foreground="White" 
            HorizontalAlignment="Center" VerticalAlignment="Center"
                   Height="50" Width="250" Padding="15"/>            
        </StackPanel>       
    </Grid>
</Window>

现在，我们将创建一个 ViewModel 类，其中包含一些用于 XAML 中绑定的属性。此类继承 INotifyPropertyChanged 事件，以便触发和响应我们的更改。通过此属性，它会在数据发生更改时通知。在这里，我们将看到如何通过使用 PropertyChanged 事件在另一个 Textblock 中查看输入的 Employee 名称。为此

转到项目，右键单击，添加类，并将类名命名为 *EmployeeViewModel.cs*。

请参阅下面带有属性事件的类。

EmployeeViewModel.cs

public class EmployeeViewModel
    {
       private string _employeeID = string.Empty;
        public string EmployeeID
        {
            get
            {
                return _employeeID;
            }
            set
            {
                _employeeID = value;
            }
        }
        private string _employeeName = string.Empty;
        public string EmployeeName
        {
            get
            {
                return _employeeName;
            }
            set
            {
                _employeeName = value;
            }
        }
        private string _employeeDepartment = string.Empty;
        public string EmployeeDepartment
        {
            get
            {
                return _employeeDepartment;
            }
            set
            {
                _employeeDepartment = value;
            }
        }
        private string _employeeDesignation = string.Empty;
        public string EmployeeDesignation
        {
            get
            {
                return _employeeDesignation;
            }
            set
            {
                _employeeDesignation = value;
            }
        }
        private string _employeeContactNo = string.Empty;
        public string EmployeeContactNo
        {
            get
            {
                return _employeeContactNo;
            }
            set
            {
                _employeeContactNo = value;
            }
        }
        private string _employeeLocation = string.Empty;
        public string EmployeeLocation
        {
            get
            {
                return _employeeLocation;
            }
            set
            {
                _employeeLocation = value;
            }
        }
    }

现在，我们将通过使用 UpdateSourceTrigger 属性在 XAML 中的绑定中使用这些属性。

如果我们将 UpdateSourceTrigger 指定为 PropertyChanged，则每当目标属性更改时，就会发生值更新。它通常发生在每次按键时。

现在，我将 EmployeeName Textbox 与 UpdateSourceTrigger 绑定为 "Property Changed"。我将异步显示下面的 EmployeeName。

让我们看看如何在 XAML 中使用此属性进行绑定。现在，我们的完整 XAML 如下所示。

MainWindow.xaml

<Window x:Class="BindingsWithINotifyProperyChangedSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="400" Width="680">
     <Grid Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="220"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="60"/>
        </Grid.RowDefinitions>
        <DataGrid Name="dgDataGrid" Grid.Row="0" 
        AutoGenerateColumns="False" Background="LightGray" Margin="5,15">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Employee ID" 
                Binding="{Binding EmployeeID}"/>
                <DataGridTextColumn Header="Employee Name" 
                Binding="{Binding EmployeeName}"/>
                <DataGridTextColumn Header="EmployeeDepartment" 
                Binding="{Binding EmployeeDepartment}"/>
                <DataGridTextColumn Header="Employee Designation" 
                Binding="{Binding EmployeeDesignation}"/>
                <DataGridTextColumn Header="Contact Number" 
                Binding="{Binding EmployeeContactNo}"/>
                <DataGridTextColumn Header="Employee Location" 
                Binding="{Binding EmployeeLocation}"/>
            </DataGrid.Columns>
        </DataGrid>
        <Grid Grid.Row="1" Background="LightBlue" Margin="6,30">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="160"/>
            </Grid.ColumnDefinitions>
            <Label Name="lbEmpID" Content="Employee ID"  
            Grid.Row="0" Grid.Column="0" Height="30"/>
            <TextBox Name="tbEmpID" Height="30" 
            Grid.Row="0" Grid.Column="1" />
            <Label Name="lbEmpName" Height="30" 
            Content="Employee Name"  Grid.Row="0" Grid.Column="2"/>
            <TextBox Name="tbEmpName" Height="30"  
            Grid.Row="0" Grid.Column="3" 
            Text="{Binding EmployeeName, UpdateSourceTrigger=PropertyChanged}"/>
            <Label Name="lbEmpDepartment" Height="30" 
            Content="Employee Department"  Grid.Row="1" Grid.Column="0"/>
            <TextBox Name="tbEmpDepartment" Height="30" 
            Grid.Row="1" Grid.Column="1"/>
            <Label Name="lbEmpDesignation" Height="30" 
            Content="Employee Designation"  Grid.Row="1" Grid.Column="2"/>
            <TextBox Name="tbEmpDesignation" Height="30"  
            Grid.Row="1" Grid.Column="3"/>
            <Label Name="lbEmpContactNo" Height="30" 
            Content="Contact Number"  Grid.Row="2" Grid.Column="0"/>
            <TextBox Name="tbEmpContactNo" Height="30" 
            Grid.Row="2" Grid.Column="1"/>
            <Label Name="lbEmpLocation" Height="30" 
            Content="Employee Location"  Grid.Row="2" Grid.Column="2"/>
            <TextBox Name="tbEmpLocation" Height="30" 
            Grid.Row="2" Grid.Column="3"/>
        </Grid>
        <StackPanel Orientation="Horizontal" Grid.Row="2" 
        Height="40" Width="250">
            <Button Name="btnSubmit" Content="Submit" 
            Click="btnSubmit_Click" Width="100" Height="30" FontSize="14"/>
            <Button Name="btnClearGrid" Content="ClearGrid" 
            Click="btnClearGrid_Click" Width="100" Height="30" Margin="20,0,0,0"/>
        </StackPanel>
        <StackPanel Grid.Row="3" Orientation="Horizontal">
            <Label Content="You have given the Employee name as.." 
            FontSize="14" Foreground="Green" 
            FontWeight="Bold" Height="30" Margin="10,0,0,0"/>
            <TextBlock  Name="tbText" Text="{Binding EmployeeName}" 
            FontSize="16" FontWeight="Bold" Foreground="White" 
            HorizontalAlignment="Center" VerticalAlignment="Center"
                   Height="50" Width="250" Padding="15"/>
        </StackPanel>
    </Grid>
</Window>

由于我为 Employee TextBox 将 UpdateSourceTrigger 指定为 PropertyChanged，因此输入的员工姓名将同时显示在下面的 TextBlock 中。它通知我们 Employee Textbox 中的值已更改。

注意：如果我们删除 UpdateSourceTrigger 作为 "PropertyChanged"，那么输入的 Employee 姓名将不会显示在下面的 TextBlock 中。这在这里起着重要作用...

让我们转到我们的 Codebehind 来编写 Click 事件和代码以在我们的 datagrid 中显示数据。

在构造函数中，我们将 ViewModel 对象作为 DataContext 提供，如下所示

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

在 textboxes 中输入数据并单击“提交”按钮后，数据将显示在我们的 Datagrid 中。

为了清除 DataGrid 中的数据，我们在这里使用了一个“清除”按钮。

整个 codebehind 如下所示。

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Adding_To_DataGrid
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.DataContext = new EmployeeViewModel();
            InitializeComponent();
        }

        private void btnSubmit_Click(object sender, RoutedEventArgs e)
        {
            AddToGrid();
        }
        public void AddToGrid()
        {
            List<EmployeeViewModel> empCollection = new List<EmployeeViewModel>();           
            empCollection.Add(new EmployeeViewModel()
            {
                EmployeeID = Convert.ToInt32(tbEmpID.Text),
                EmployeeName = tbEmpName.Text,
                EmployeeDepartment = tbEmpDepartment.Text,
                EmployeeDesignation = tbEmpDesignation.Text,
                EmployeeContactNo = tbEmpContactNo.Text,
                EmployeeLocation = tbEmpLocation.Text
            });
            dgDataGrid.Items.Add(empCollection);
            ClearFields();
        }
        public void ClearFields()
        {
            tbEmpID.Text = "";
            tbEmpName.Text = "";
            tbEmpDepartment.Text = "";
            tbEmpDesignation.Text = "";
            tbEmpContactNo.Text = "";
            tbEmpLocation.Text = "";                
        }
        private void btnClearGrid_Click(object sender, RoutedEventArgs e)
        {
            dgDataGrid.Items.Clear();
        }
    }
}

请注意：如果我们将 UpdateSourceTrigger 指定为 LostFocus，则一旦 Employee TextBox 中失去焦点，数据将在 TextBlock 中更新。

如果我们将 UpdateSourceTrigger 指定为 Explicit，则只有在显式调用 BindingExpression.UpdateSource() 方法时，才会更新绑定源。

要检查这一点，请添加一个按钮并为按钮行下方编写单击事件。

private void btnExplicit_Click(object sender, RoutedEventArgs e)
        {
            //Replace it with your TextBox name
            BindingExpression obj = tbEmpName.GetBindingExpression(TextBox.TextProperty);
            obj.UpdateSource();
}

现在在本文中，我希望您了解简单的绑定是如何工作的，以及如何通过使用 UpdateSourceTrigger 作为 PropertyChanged 来更新文本。如果您喜欢，请对这篇简单的文章进行评分...

请从文章顶部的链接下载完整的示例。

编码愉快！！！