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,如需转载请自行联系原作者

相关文章
|
7月前
|
设计模式 算法 程序员
探索代码之美:我的编程之旅
【7月更文挑战第30天】在数字世界的迷宫中,我踏上了一场与代码共舞的奇幻旅程。从最初的迷茫和困惑,到逐渐解锁编程的奥秘,我发现了一个充满创造力和逻辑美的新世界。本文是一篇个人的技术感悟,记录了我在编程之路上的成长历程,以及我对技术美学的理解和追求。
|
6月前
|
敏捷开发 程序员 项目管理
探索代码之美:编程之旅
在数字化时代,编程已成为必备技能。本文作者以自身从零开始学习Python的经历,分享了掌握基本语法、调试技巧及参与项目的重要性,并强调持续学习与好奇心是成为优秀程序员的关键,旨在为初学者提供实用建议与启发。
49 0
|
9月前
|
程序员
代码与禅意:编程中的悟性之旅
【5月更文挑战第31天】在数字世界的繁花似锦中,我们常常忽略了编码背后蕴含的哲学。本文将探讨编程不仅仅是一门技术,更是一种艺术和内省的过程。从禅宗的角度出发,我们将一窥那些静谧的代码行间所折射出的深邃智慧,以及它如何影响程序员的思考方式和解决问题的策略。
|
9月前
|
人工智能 安全 JavaScript
这不是一篇技术型的文章,而是一篇能让你在IT世界中畅游的方法
这不是一篇技术型的文章,而是一篇能让你在IT世界中畅游的方法
84 0
|
存储 编解码 API
游戏编程之四 diectxdarw基础篇
游戏编程之四 diectxdarw基础篇
93 0
|
JavaScript 前端开发 Java
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
2766 0
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
为了写中秋这篇文章,我学了 20 种编程语言!
为了给大家送中秋祝福,老哥也是绞尽脑汁了啊,最后想出了用排行榜前 20 名的编程语言输出中秋快乐这种方式!
|
前端开发 JavaScript HTML5
前端知识框架
一直都是很懒的人,懒得去写笔记,写文章,感觉应该是要有一些沉淀了。计划在简书上写一些技术相关的文章,先整理下前端相关的一些知识点吧,争取每周至少有一篇文章的产出 1.
1487 0