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

::源代码下载::

posted @ 2009-08-05 17:05  Gnie  阅读(2566)  评论(5编辑  收藏  举报
Copyright © 2010 Gnie