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;
        }
    }
}

运行效果：

下面上一个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

::源代码下载::