Silverlight2 边学边练 之八 数据绑定

本篇介绍SL2的数据绑定功能，在Silverlight2中数据绑定有3中模式： 
  * 单向模式（OneWay）：源数据更新时目标数据也随之更新。 
  * 双向模式（TwoWay）：源数据或目标数据更新时，彼此相互更新。 
  * 一次模式（OneTime）：只将源数据显示到目标，不用于更新。
单向模式为SL2默认的绑定模式，首先演示一个简单的OneTime模式：

XAML Code：

< UserControl  x:Class ="DataBinding.Page"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
    Width ="300"  Height ="150"  Loaded ="Page_Loaded" >
     < Grid  x:Name ="gridUser"  Background ="White" >
         < Grid.RowDeFinitions >
             < RowDeFinition  Height ="40" ></ RowDeFinition >
             < RowDeFinition  Height ="40" ></ RowDeFinition >
             < RowDeFinition  Height ="40" ></ RowDeFinition >
         </ Grid.RowDeFinitions >
         < Grid.ColumnDeFinitions >
             < ColumnDeFinition  Width ="80" ></ ColumnDeFinition >
             < ColumnDeFinition  Width ="*" ></ ColumnDeFinition >
         </ Grid.ColumnDeFinitions >
         < TextBlock  Grid.Row ="0"  Grid.Column ="0"  Text ="Name"  
                   FontSize ="20"  Margin ="5,5,5" ></ TextBlock >
         <!-- 绑定姓名数据 -->
         < TextBox  Margin ="5,5"  BorderBrush ="Orange"
                 Grid.Row ="0"  Grid.Column ="1"  FontSize ="20"
                 Text =" {Binding Name} " ></ TextBox >

         < TextBlock  Grid.Row ="1"  Grid.Column ="0"  Text ="Age"  
                   FontSize ="20"  Margin ="5,5" ></ TextBlock >
         <!-- 绑定年龄数据 -->
         < TextBox  Margin ="5,5"  BorderBrush ="Orange"
                 Grid.Row ="1"  Grid.Column ="1"  FontSize ="20"
                 Text =" {Binding Age} " ></ TextBox >
         </ Grid >
</ UserControl >

创建User Class：

using  System;
using  System.Windows;
using  System.Windows.Controls;
using  System.ComponentModel;

namespace  DataBinding
{
     public   class  User
    {
         private   string  name;
         public   string  Name
        {
             get  {  return  name; }
             set  { name  =  value; }
        }

         private   string  age;
         public   string  Age
        {
             get  {  return  age; }
             set  { age  =  value; }
        }
    }
}

主程序:

using  System;
using  System.Collections.Generic;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;

namespace  DataBinding
{ 
     public   partial   class  Page : UserControl
    {
         public  Page()
        {
            InitializeComponent();
        }

         private   void  Page_Loaded( object  sender, RoutedEventArgs e)
        {
            User user  =   new  User();
            user.Name  =   " Petter " ;
            user.Age  =   " 20 " ;

            gridUser.DataContext  =  user;
        }
    }
}

运行效果：

下面上一个OneWay模式（也适用于TwoWay），XAML Code:

< UserControl  x:Class ="DataBinding.Page"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
    Width ="400"  Height ="300"  Loaded ="Page_Loaded" >
     < Grid  x:Name ="gridUser"  Background ="White" >
         < Grid.RowDeFinitions >
             < RowDeFinition  Height ="40" ></ RowDeFinition >
             < RowDeFinition  Height ="40" ></ RowDeFinition >
             < RowDeFinition  Height ="40" ></ RowDeFinition >
         </ Grid.RowDeFinitions >
         < Grid.ColumnDeFinitions >
             < ColumnDeFinition  Width ="80" ></ ColumnDeFinition >
             < ColumnDeFinition  Width ="*" ></ ColumnDeFinition >
         </ Grid.ColumnDeFinitions >
         < TextBlock  Grid.Row ="0"  Grid.Column ="0"  Text ="Name"  
                   FontSize ="20"  Margin ="5,5" ></ TextBlock >
         <!-- 绑定姓名数据 -->
         < TextBox  Margin ="5,5"  BorderBrush ="Orange"
                 Grid.Row ="0"  Grid.Column ="1"  FontSize ="20"
                 Text =" {Binding Name, Mode=OneWay} " ></ TextBox >
        
         < TextBlock  Grid.Row ="1"  Grid.Column ="0"  Text ="Age"  
                   FontSize ="20"  Margin ="5,5" ></ TextBlock >
         <!-- 绑定年龄数据 -->
         < TextBox  Margin ="5,5"  BorderBrush ="Orange"
                 Grid.Row ="1"  Grid.Column ="1"  FontSize ="20"
                 Text =" {Binding Age, Mode=OneWay} " ></ TextBox >
         <!-- 点击更新数据 -->
         < Button  Grid.Row ="2"  Grid.Column ="1"  Width ="100"  Height ="30"
                Content ="Update Data"  Click ="Button_Click" ></ Button >
     </ Grid >
</ UserControl >

User Class 也需要更新，这里要用到接口：INotifyPropertyChanged

using  System;
using  System.Windows;
using  System.Windows.Controls;
using  System.ComponentModel;

namespace  DataBinding
{
     public   class  User : INotifyPropertyChanged
    {
         public   event  PropertyChangedEventHandler PropertyChanged;
         public   void  OnPropertyChanged(PropertyChangedEventArgs e)
        {
             if  (PropertyChanged  !=   null )
                PropertyChanged( this , e);
        }

         private   string  name;
         public   string  Name
        {
             get  {  return  name; }
             set
            {
                name  =  value;
                OnPropertyChanged( new  PropertyChangedEventArgs( " Name " ));
            }
        }

         private   string  age;
         public   string  Age
        {
             get  {  return  age; }
             set
            {
                age  =  value;
                OnPropertyChanged( new  PropertyChangedEventArgs( " Age " ));
            }
        }
    }
}

主程序：

using  System;
using  System.Collections.Generic;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;

namespace  DataBinding
{ 
     public   partial   class  Page : UserControl
    {
         public  Page()
        {
            InitializeComponent();
        }

         private   void  Page_Loaded( object  sender, RoutedEventArgs e)
        {
            User user  =   new  User();
            user.Name  =   " Petter " ;
            user.Age  =   " 20 " ;

            gridUser.DataContext  =  user;
        }

         private   void  Button_Click( object  sender, RoutedEventArgs e)
        {
            User user  =  (User)gridUser.DataContext;
            user.Name  =   " Jone " ;
            user.Age  =   " 28 " ;
        }
    }
}

Demo展示：

本例参考自《Pro Silverlight 2 in C# 2008》CHAPTER 14  DATA BINDING

::源代码下载::