概念

Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。

本文为系列文章第十一篇,主要介绍Silverlight 2中的数据绑定。

数据绑定模式

在Silverlight 2中,支持三种模式的数据绑定。

1.OneTime:一次绑定,在绑定创建时使用源数据更新目标,适用于只显示数据而不进行数据的更新。

2.OneWay:单向绑定,在绑定创建时或者源数据发生变化时更新到目标,适用于显示变化的数据。

3.TwoWay:双向绑定,在任何时候都可以同时更新源数据和目标。

Jesse Liberty举的例子非常的形象,使用Silverlight开发一个在线书店,显示书籍的书名、作者等信息,使用OneTime模式,这些数据一般不会发生变化的;显示价格信息时使用OneWay模式,因为管理员可能会在一天内调整价格;显示书籍的剩余数量时用TwoWay模式,数量随着用户的订购会随时发生变化,即目标和源数据都要进行更新。

简单数据绑定

在本示例中我们将做一个简单的数据绑定,用来显示用户信息,XAML如下:

<Grid x:Name="LayoutRoot" Background="#46461F">
<Grid.RowDefinitions>
<RowDefinition Height="160"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="terrylee.jpg" Width="78" Height="100"
HorizontalAlignment="Left" Grid.Row="0" Grid.Column="1"/>
<TextBlock Foreground="White" FontSize="18" Text="姓名:"
Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBlock x:Name="lblName" Foreground="White" FontSize="18"
Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left"/>
<TextBlock Foreground="White" FontSize="18" Text="位置:"
Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBlock x:Name="lblAddress" Foreground="White" FontSize="18"
Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left"/>
</Grid>

添加一个简单User类,它具有Name和Address两个属性:

public class User
{
public string Name { get; set; } public string Address { get; set; }
}

使用绑定句法{Binding Property}进行数据绑定,注意下面的两个TextBlock控件Text属性:

<Grid x:Name="LayoutRoot" Background="#46461F">
<Grid.RowDefinitions>
<RowDefinition Height="160"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="terrylee.jpg" Width="78" Height="100"
HorizontalAlignment="Left" Grid.Row="0" Grid.Column="1"/>
<TextBlock Foreground="White" FontSize="18" Text="姓名:"
Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBlock x:Name="lblName" Foreground="White" FontSize="18"
Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left"
Text="{Binding Name}"/>
<TextBlock Foreground="White" FontSize="18" Text="位置:"
Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBlock x:Name="lblAddress" Foreground="White" FontSize="18"
Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left"
Text="{Binding Address}"/>
</Grid>

指定数据源,注意这里是创建一个User的实例并赋值后,把user实例绑定到了TextBlock的DataContext上,而不是向之前我们所做的示例中那样,直接指定Text属性:

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
User user = new User();
user.Name = "TerryLee";
user.Address = "中国 天津"; lblName.DataContext = user;
lblAddress.DataContext = user;
}

运行示例后,可以看到:

上面这种数据绑定模式,只是显示数据而不对数据做任何修改,默认的绑定模式是一次绑定OneTime。

单向绑定示例

如果需要在数据源发生变化时能够通知UI进行相应的更新,即使用单向绑定OneWay或者双向绑定TwoWay,则业务实体需要实现接口INotifyPropertyChanged。在本示例中,我们加上一个更新按钮,当单击按钮时更新user实例的属性值,会看到界面上的数据也会发生变化。

修改一下User类,使其实现INotifyPropertyChanged接口。

public class User : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged; private string _name;
public string Name
{
get { return _name; }
set
{
_name = value;
if(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("Name"));
}
}
} private string _address;
public string Address
{
get { return _address; }
set
{
_address = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("Address"));
}
}
}
}

修改数据绑定模式,使用单向绑定OneWay模式,如{Binding Address, Mode=OneWay}

<Grid x:Name="LayoutRoot" Background="#46461F">
<Grid.RowDefinitions>
<RowDefinition Height="160"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="terrylee.jpg" Width="78" Height="100"
HorizontalAlignment="Left" Grid.Row="0" Grid.Column="1"/>
<Button x:Name="btnUpdate" Width="100" Height="40"
Content="Update" Click="btnUpdate_Click"/>
<TextBlock Foreground="White" FontSize="18" Text="姓名:"
Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBlock x:Name="lblName" Foreground="White" FontSize="18"
Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left"
Text="{Binding Name, Mode=OneWay}"/>
<TextBlock Foreground="White" FontSize="18" Text="位置:"
Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBlock x:Name="lblAddress" Foreground="White" FontSize="18"
Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left"
Text="{Binding Address, Mode=OneWay}"/>
</Grid>

编写事件处理程序,为了演示把user声明为一个全局的,并在按钮的单击事件中修改其属性值:

public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
User user;
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
user = new User();
user.Name = "TerryLee";
user.Address = "中国 天津"; lblName.DataContext = user;
lblAddress.DataContext = user;
} private void btnUpdate_Click(object sender, RoutedEventArgs e)
{
user.Name = "李会军";
user.Address = "China Tianjin";
}
}

运行后如下所示:

单击Update按钮后:

绑定到列表

下面再看一个绑定到列表的简单例子,一般都会使用DataGrid或者ListBox来进行列表数据的显示。下面的示例我们显示一个文章列表:

<Grid Background="#46461F">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" CornerRadius="15"
Width="240" Height="36" Background="Orange"
Margin="20 0 0 0" HorizontalAlignment="Left">
<TextBlock Text="文章列表" Foreground="White"
HorizontalAlignment="Left" VerticalAlignment="Center"
Margin="20 0 0 0"></TextBlock>
</Border>
<ListBox x:Name="PostList" Grid.Column="0" Grid.Row="1"
Margin="40 10 10 10"
HorizontalContentAlignment="Left" VerticalContentAlignment="Bottom"
ItemsSource="{Binding Posts}">
</ListBox>
</Grid>

编写一个简单的业务类:

public class Blog
{
public List<String> Posts { get; set; }
}

初始化集合数据并进行绑定

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Blog blog = new Blog();
blog.Posts = new List<String>
{
"一步一步学Silverlight 2系列(10):使用用户控件",
"一步一步学Silverlight 2系列(9):使用控件模板",
"一步一步学Silverlight 2系列(8):使用样式封装控件观感",
"一步一步学Silverlight 2系列(7):全屏模式支持"
}; PostList.DataContext = blog;
}

最终运行的结果如下所示:

当然我们也可以使用ListBox的ItemsSource属性进行绑定,

结束语

本文简单介绍了Silverlight 2中的数据绑定,你可以从这里下载文章示例代码。

下一篇:一步一步学Silverlight 2系列(12):数据与通信之WebClient

作者:TerryLee
出处:http://terrylee.cnblogs.com 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
 

一步一步学Silverlight 2系列(11):数据绑定的更多相关文章

  1. 一步一步学Silverlight 2系列文章

    概述 由TerryLee编写的<Silverlight 2完美征程>一书,已经上市,在该系列文章的基础上补充了大量的内容,敬请关注.官方网站:http://www.dotneteye.cn ...

  2. 一步一步学Silverlight 2系列(32):图形图像综合实例—“功夫之王”剧照播放

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  3. 一步一步学Silverlight 2系列(31):图形图像综合实例—实现水中倒影效果

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. 一步一步学Silverlight 2系列(30):使用Transform实现更炫的效果(下)

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  5. 一步一步学Silverlight 2系列(29):使用Transform实现更炫的效果(上)

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  6. 一步一步学Silverlight 2系列(28):图片处理

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  7. 一步一步学Silverlight 2系列(27):使用Brush进行填充

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  8. 一步一步学Silverlight 2系列(26):基本图形

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  9. 一步一步学Silverlight 2系列(25):综合实例之Live Search

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  10. 一步一步学Silverlight 2系列(24):与浏览器交互相关辅助方法

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

随机推荐

  1. Codeforces Round #288 (Div. 2) E. Arthur and Brackets [dp 贪心]

    E. Arthur and Brackets time limit per test 2 seconds memory limit per test 128 megabytes input stand ...

  2. Yii 之数据库查询

    模型代码: <?php namespace app\models; use yii\db\ActiveRecord; class Test extends ActiveRecord{ } 控制器 ...

  3. windows软件配置

    1 安装jdk 配置环境变量 新建JAVA_HOME:D:\Program Files\Java\jdk1.8.0_151 新建JRE_HOME:D:\Program Files\Java\jre1. ...

  4. BZOJ 2957 楼房重建 (线段树)

    题目链接  楼房重建 解题思路:我们可以把楼房的最高点的斜率计算出来.那么问题就转化成了实时查询x的个数,满足数列x的左边没有大于等于x的数. 我们可以用线段树维护 设t[i]为如果只看这个区间,可以 ...

  5. BZOJ——2096: [Poi2010]Pilots

    http://www.lydsy.com/JudgeOnline/problem.php?id=2096 Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: ...

  6. codevs——1049 棋盘染色

    1049 棋盘染色  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 有一个5×5的棋盘,上面有一 ...

  7. Spring实战Day5

    3.3自动装配bean的歧义性 产生歧义的原因 找到多个符合条件的组件,如下注入talent时会有两个满足条件的组件 解决方法 标示首选的bean,但是同时标示两个或多个同样会存在歧义 自动装配标示P ...

  8. Centos常用命名

    1.关机 (系统的关机.重启以及登出 ) 的命令 shutdown -h now 关闭系统(1) init 0 关闭系统(2) telinit 0 关闭系统(3) shutdown -h hours: ...

  9. Spring的Hello World工程

    通过Spring的Hello World工程研究以下几个点: 0.如何创建工程及引入依赖. 1.通过Spring的beans.xml实现依赖注入,动态创建实例. 2.了解Spring的工作原理. 具体 ...

  10. activiti实现的请假流程

    直接上图,还是有点复杂的