Silverlight的数据绑定

Silverlight数据绑定有三种模式（没有WPF的 OneWayToSource 模式），如下：

• OneTime：一次绑定，在绑定创建时使用源数据更新目标，适用于只显示数据而不进行数据的更新。 这是绑定的默认情况。
• OneWay：单向绑定，在绑定创建时或者源数据发生变化时更新到目标，适用于显示变化的数据。
• TwoWay：双向绑定，在任何时候都可以同时更新源数据和目标。

下面是这三种的代码演示：

OneTime 绑定

这种数据绑定模式，只是显示数据而不对数据做任何修改，默认的绑定模式就是OneTime绑定。

绑定到一个实体的一个属性：

Xaml 文件

<TextBlock x:Name="tb_1" Text="{Binding I}"  Margin="100,50,100,200" />

或者可以稍稍复杂的写法：

<TextBlock x:Name="tb_1" Text="{Binding Path=I}"  Margin="100,50,100,200" />

 

CS 代码文件

using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace SilverlightApplication_Binding{    public partial class MainPage : UserControl    {        public MainPage()        {            InitializeComponent();        }        private void UserControl_Loaded(object sender, RoutedEventArgs e)        {            BindingDemoObject o = new BindingDemoObject();            o.I = 15;            tb_1.DataContext = o;        }    }    public class BindingDemoObject    {        public int I {get;set;}    }}

如果要绑定到一个实体，则演示代码如下：

<TextBlock x:Name="tb_1" Text="{Binding}"  Margin="100,50,100,200" />

private void UserControl_Loaded(object sender, RoutedEventArgs e){    int w = 30;    tb_1.DataContext = w;    // 当然也可以写成:    // tb_1.DataContext = 30;}

OneWay 绑定

如果需要在数据源发生变化时能够通知UI进行相应的更新，则需要使用单向绑定OneWay或者双向绑定TwoWay。

若要支持 OneWay 或 TwoWay 绑定，从而使绑定目标属性能够自动反映绑定源的动态更改（例如，用户编辑窗体后，预览窗格会自动更新），类需要提供相应的属性更改通知。即创建实现 INotifyPropertyChanged 的类。

下面要演示的例子是当点击按钮时，实体的一个属性发生变化，继而前台显示也发生变化。

Xaml 文件

<Grid x:Name="LayoutRoot" Background="White">        <TextBlock x:Name="tb_1" Text="{Binding I, Mode=OneWay}"  Margin="100,50,100,200" />        <Button Content="变化"   Margin="222,112,0,0" Name="button1" Width="75" Click="button1_Click" />
Grid>

CS 代码文件

using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace SilverlightApplication_Binding{    public partial class MainPage : UserControl    {        public MainPage()        {            InitializeComponent();        }        BindingDemoObject o = new BindingDemoObject();        private void UserControl_Loaded(object sender, RoutedEventArgs e)        {            o.I = 15;            tb_1.DataContext = o;        }        private void button1_Click(object sender, RoutedEventArgs e)        {            o.I = 58;        }    }    public class BindingDemoObject : System.ComponentModel.INotifyPropertyChanged    {        private int _i = 0;        public int I        {            get            {                return _i;            }            set            {                _i = value;                OnPropertyChanged("I");            }        }        /// 
        /// Declare the event        ///         public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;        /// 
        /// Create the OnPropertyChanged method to raise the event        ///         ///         protected void OnPropertyChanged(string name)        {            System.ComponentModel.PropertyChangedEventHandler handler = PropertyChanged;            if (handler != null)            {                handler(this, new System.ComponentModel.PropertyChangedEventArgs(name));            }        }    }}

 

TwoWay 绑定

网上很多例子没有 Twoway的演示，下面就是一个 Twoway的演示。

Xaml 文件

<UserControlxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"x:Class="SilverlightApplication_TwoWayBinding.MainPage"Width="400" Height="200" mc:Ignorable="d"><Grid x:Name="LayoutRoot" Background="White"><Ellipse Fill="#FF2F70C0" Stroke="Black" Height="57" HorizontalAlignment="Left" Margin="52,28,0,0" VerticalAlignment="Top" Width="{Binding Value, ElementName=silderSelf, Mode=OneWay}" /><Slider x:Name="silderSelf" Height="30" Margin="52,103,48,0" VerticalAlignment="Top" Maximum="300" Minimum="10" LargeChange="10" SmallChange="1" Value="100" Width="300"/><TextBox Height="30" HorizontalAlignment="Left" Margin="52,150,0,0" VerticalAlignment="Top" Width="150" Text="{Binding Value, ElementName=silderSelf, Mode=TwoWay}" TextWrapping="Wrap"/>Grid>UserControl>

演示效果：

 

解释： 

这里我们把椭圆的宽度和 TextBox 的值捆绑到 Slider 的值。
对椭圆的捆绑是 OneWay 模式， 表示只是读取Slider 的值。

TextBox  的捆绑则是 TwoWay， 表示我们即可以接受 Slider 的值,也可以设置 Slider 的值。 当 TextBox  中输入了值，按 Tab 离开焦点后，我们就可以看到 Slider 和 椭圆的值都发生变化了。

当我们移动 Slider 时， TextBox   的值和 椭圆的宽度都发生变化。

 

 

参考资料：

一步一步学Silverlight 2系列（11）：数据绑定
http://www.cnblogs.com/Terrylee/archive/2008/03/08/Silverlight2-step-by-step-part11-Data-Binding.html

如何在Blend设置数据绑定
http://msdn.microsoft.com/zh-cn/library/cc295161(Expression.30).aspx

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究
http://www.cnblogs.com/yjmyzz/archive/2009/11/09/1599058.html