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,5" ></ TextBlock >
        
<!-- 绑定姓名数据 -->
        
< TextBox  Margin ="5,5,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,5,5" ></ TextBlock >
        
<!-- 绑定年龄数据 -->
        
< TextBox  Margin ="5,5,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;
        }
    }
}
复制代码


运行效果:

2009-8-5-16.44.13

下面上一个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,5,5" ></ TextBlock >
        
<!-- 绑定姓名数据 -->
        
< TextBox  Margin ="5,5,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,5,5" ></ TextBlock >
        
<!-- 绑定年龄数据 -->
        
< TextBox  Margin ="5,5,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

::源代码下载::






本文转自Gnie博客园博客,原文链接:http://www.cnblogs.com/gnielee/archive/2009/08/05/silverlight2-learning-data-binding.html,如需转载请自行联系原作者

相关文章
|
3月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
69 11
|
4月前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
56 0
|
JavaScript 前端开发 Java
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
2749 0
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
|
设计模式 JavaScript 前端开发
尚能饭否|技术越来越新,我对老朋友jQuery还是一如既往热爱
最近在搭建完善自己的博客,需要用到一些页面样式之类的,就特意问了一下女朋友一个问题,关于Web前端开发,jQuery现在过时了嘛?她毅然决然告诉我,那是我们前端现在的鄙视链。是的,不...
162 0
推荐书籍
推荐书籍网站
881 0
下一篇
DataWorks