当前位置: 代码迷 >> Silverlight >> SilverLight 学习札记-Silverlight中INotifyPropertyChanged 接口在数据绑定中的使用
  详细解决方案

SilverLight 学习札记-Silverlight中INotifyPropertyChanged 接口在数据绑定中的使用

热度:3404   发布时间:2013-02-26 00:00:00.0
SilverLight 学习笔记--Silverlight中INotifyPropertyChanged 接口在数据绑定中的使用

INotifyPropertyChanged是什么,它有什么作用?通过查阅MSDN我们知道,INotifyPropertyChanged 接口用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通知。

当绑定数据源的某属性值改变时,它可以通知客户端,并进行界面数据更新.而我们不用写很多复杂的代码来更新界面数据,这样可以做到方法简洁而清晰,INotifyPropertyChanged确实是一个强大的接口。

首先,我们需要了解如下有关Silverlight 2.0 数据绑定的术语:

  Binding - 将绑定目标对象的属性与数据源联接起来

  Source - 绑定的数据源

  Mode - 绑定的数据流的方向 [System.Windows.Data.BindingMode枚举]

  BindingMode.OneTime - 一次绑定。创建绑定时一次性地更新绑定目标对象的属性

  BindingMode.OneWay - 单向绑定(默认值)。数据源的改变会自动通知到绑定目标对象的属性

  BindingMode.TwoWay - 双向绑定。数据源或绑定目标对象的属性的值发生改变时会互相通知。显然,做数据验证的话一定要是双向绑定

  INotifyPropertyChanged - 向客户端发出某一属性值已更改的通知

  IValueConverter - 值转换接口,将一个类型的值转换为另一个类型的值。它提供了一种将自定义逻辑应用于绑定的方式

接下来我们学习简单的数据绑定并了解INotifyPropertyChanged所发挥的作用。

首先启动VS2010,新建Silverlight应用程序,程序名为MyINotifyPropertyChanged,系统自动为我们建立两个项目,一个是MyINotifyPropertyChanged,一个是MyINotifyPropertyChanged.Web

Silverlight.Photo.Browser子项目下,我们添加了两类数据源:

  StudentNotify.cs :引入了Silverlight.Photo.Browser接口

using System;
using System.net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;  //需要添加此命名空间

namespace MyINotifyPropertyChanged
{
    public class StudentNotify : INotifyPropertyChanged
    {
        private string NameValue;
        private int AgeValue;

        public string SName
        {
            get { return NameValue; }
            set
            {
                NameValue = value;
                // Call NotifyPropertyChanged when the property is updated
                NotifyPropertyChanged("SName");
            }
        }
        public int  SAge
        {
            get { return AgeValue; }
            set
            {
                AgeValue = value;
                // Call NotifyPropertyChanged when the property is updated
                NotifyPropertyChanged("SAge");
            }
        }


        // Declare the PropertyChanged event
        public event PropertyChangedEventHandler PropertyChanged;

        // NotifyPropertyChanged will raise the PropertyChanged event passing the
        // source property that is being updated.
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public StudentNotify()
        {
        }
        public StudentNotify(string NameStr,int AgeInt)
        {
            SName = NameStr;
            SAge = AgeInt;
        }
    }
}

Student.cs       :没有引入INotifyPropertyChanged接口

using System;
using System.net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyINotifyPropertyChanged
{
    public class Student
    {
        public string SName { get; set; }
        public int SAge { get; set; }
    }
}

对于呈现界面我们设计了两大组基于不同Binding Mode值的TextBox

  第一组的TextBox其BindingMode值分别为:

  Default

  OneTime

  OneWay

  TwoWay

  第二组的TextBox其BindingMode值全部为:

  TwoWay

  此外,我们设计了一个ComboBox,用于选择我们将要对上述两组呈现界面进行数据绑定的不同数据源。


因此,Page.xaml代码如下:

<UserControl x:Class="MyINotifyPropertyChanged.Page"
    XMLns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    XMLns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="500">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition Height="20" ></RowDefinition>
            <RowDefinition Height="200" ></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0" Background="Azure" Orientation="Vertical" Margin="20">
            <TextBlock x:Name="tbNameOne" Width="150" Text="姓名-default" TextAlignment="Center" FontSize="20" Foreground="Blue"  Margin="4" ></TextBlock>
            <TextBlock x:Name="tbAgeOne" Width="150" Text="年龄-OneTime" TextAlignment="Center" FontSize="20" Foreground="Blue"  Margin="4"></TextBlock>
            <TextBlock x:Name="tbNameTwo" Width="150" Text="姓名-OneWay" TextAlignment="Center" FontSize="20" Foreground="Brown"  Margin="4"></TextBlock>
            <TextBlock x:Name="tbAgeTwo" Width="150" Text="年龄-TwoWay" TextAlignment="Center" FontSize="20" Foreground="Brown"  Margin="4"></TextBlock>
        </StackPanel>    
        
        <StackPanel Grid.Row="0" Grid.Column="1" Background="Aqua"  Orientation="Vertical" Margin="20">
            <TextBox x:Name="txtNameOne" Text="{Binding SName}" Margin="6"></TextBox>
            <TextBox x:Name="txtAgeOne" Text="{Binding SAge,Mode=OneTime}" Margin="6"></TextBox>
            <TextBox x:Name="txtNameTwo" Text="{Binding SName,Mode=OneWay}" Margin="6"></TextBox>
            <TextBox x:Name="txtAgeTwo" Text="{Binding SAge,Mode=TwoWay}" Margin="6"></TextBox>
        </StackPanel>
        
        <TextBlock x:Name="tbSourceName" Width="150" FontSize="16" Foreground="Red" Grid.Row="1" Grid.Column="0" Text="当前数据源" TextAlignment="Left"></TextBlock>
        <ComboBox x:Name="cmbDataSource" Grid.Row="1" Grid.Column="1" Height="20"  Width="150" SelectionChanged="cmbDataSource_SelectionChanged"></ComboBox>
        
        <StackPanel Grid.Row="2" Grid.Column="0" Background="Bisque"  Orientation="Vertical" Margin="20">
            <TextBlock x:Name="dtbNameOne" Width="150" Text="姓名-TwoWay" TextAlignment="Center" FontSize="20" Foreground="Blue"   Margin="4"></TextBlock>
            <TextBlock x:Name="dtbAgeOne" Width="150" Text="年龄-TwoWay" TextAlignment="Center" FontSize="20" Foreground="Blue"  Margin="4"></TextBlock>
            <TextBlock x:Name="dtbNameTwo" Width="150" Text="姓名-TwoWay" TextAlignment="Center" FontSize="20" Foreground="Brown"  Margin="4"></TextBlock>
            <TextBlock x:Name="dtbAgeTwo" Width="150" Text="年龄-TwoWay" TextAlignment="Center" FontSize="20" Foreground="Brown"  Margin="4"></TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="2" Grid.Column="1" Background="Aquamarine"  Orientation="Vertical" Margin="20">
            <TextBox x:Name="dtxtNameOne" Text="{Binding SName,Mode=TwoWay}" Margin="6" ></TextBox>
            <TextBox x:Name="dtxtAgeOne" Text="{Binding SAge,Mode=TwoWay}" Margin="6"></TextBox>
            <TextBox x:Name="dtxtNameTwo" Text="{Binding SName,Mode=TwoWay}" Margin="6"></TextBox>
            <TextBox x:Name="dtxtAgeTwo" Text="{Binding SAge,Mode=TwoWay}" Margin="6"></TextBox>
        </StackPanel>
         
    </Grid>
</UserControl>

Page.xaml.cs后台代码如下 :

using System;
using System.Collections.Generic;
using System.Linq;
using System.net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyINotifyPropertyChanged
{
    public partial class Page : UserControl
    {
       
        Student st = new Student()
        {
            SName = "Jack",
            SAge = 25
        };

        StudentNotify stn = new StudentNotify("Tom", 26);

        public Page()
        {
            InitializeComponent();
            Loaded +=new RoutedEventHandler(Page_Loaded);
        }

        private void Page_Loaded(object sender,EventArgs e)
        {      
            this.tbSourceName.Text = "当前数据源";
            this.cmbDataSource.Items.Add("有Notify");
            this.cmbDataSource.Items.Add("无Notify");
            this.cmbDataSource.SelectedIndex = 0;
            this.cmbDataSource.SelectedItem = 0;
        }

        private void cmbDataSource_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            switch (this.cmbDataSource.SelectedIndex)
            {
                case 0: this.LayoutRoot.DataContext = stn; break;
                case 1: this.LayoutRoot.DataContext = st; break;

            }
        }
    }
}

按下F5运行测试。

  测试过程:

  1、默认时我们先绑定有INotifyPropertyChanged接口的数据源,在测试界面,我们依次改变第二大组TextBox框的值(它们的BindingMode都是TwoWay),当改变生效时注意观察其它TextBox值的变化,我们可以看到只有OneTime设置的TextBox的值不受影响,其它相关TextBox都会随着数据源的变化的而变化,同时,在第二大组的TextBox的值的改变都会改变数据源的数据,因为它们的设置是TwoWay的。

  2、在测试界面,我们依次改改变第一大组的TextBox框内的值。我们可以看到只有TwoWay设置的TextBox的值会影响到数据源并进而影响到除OneTime设置TextBox框外的其它TextBox相关框的值。而其它设置的TextBox框内的值的改变则对数据源没有什么反向影响。

  3、我们改变绑定,数据源换成无INotifyPropertyChanged接口的数据源,再按上述方法改变TextBox框内的数据值,看看它们的变化,可以看出,此时TextBox内数据值的改变不再有与数据源通信的能力,而不论它们的Mode设置是什么值。


  相关解决方案