【李会军】一步一步学Silverlight 2系列（11）：数据绑定

概念

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如下：

<Gridx:Name="LayoutRoot"Background="#46461F">
C#xLh$B	e|-Lj0<Grid.RowDefinitions>ITPUB个人空间,T_6l^9Vh
O
<RowDefinitionHeight="160"></RowDefinition>
N	?(Tj
Dz:r&rb0<RowDefinitionHeight="40"></RowDefinition>
,u2u__:EFJ;Jk6T0<RowDefinitionHeight="40"></RowDefinition>ITPUB个人空间2Y^%n.ZN'c'y.S#CK0~
</Grid.RowDefinitions>
3N3Vz"nG0<Grid.ColumnDefinitions>
cB6CC,K9H+I0<ColumnDefinitionWidth="150"></ColumnDefinition>ITPUB个人空间_G(u_.M.x
<ColumnDefinitionWidth="*"></ColumnDefinition>
)tG)F%@|d8BHj0</Grid.ColumnDefinitions>
Q;K(p8l7X1V#M0<ImageSource="terrylee.jpg"Width="78"Height="100"ITPUB个人空间g&fQ:v6Qt;V,~
O4}
HorizontalAlignment="Left"Grid.Row="0"Grid.Column="1"/>ITPUB个人空间4Fk0xYxAs B
<TextBlockForeground="White"FontSize="18"Text="姓名："ITPUB个人空间?D Jv3d w
\m
Grid.Row="1"Grid.Column="0"HorizontalAlignment="Right"/>ITPUB个人空间R6j
_3^ ly$D2u
<TextBlockx:Name="lblName"Foreground="White"FontSize="18"ITPUB个人空间U%xEYD	Y_
Grid.Row="1"Grid.Column="1"HorizontalAlignment="Left"/>ITPUB个人空间`me
~(k-P
<TextBlockForeground="White"FontSize="18"Text="位置："
r}8n	c(ki3{0Grid.Row="2"Grid.Column="0"HorizontalAlignment="Right"/>
%EwO3n,@"_I0<TextBlockx:Name="lblAddress"Foreground="White"FontSize="18"
ek:i'JUB:biH~0Grid.Row="2"Grid.Column="1"HorizontalAlignment="Left"/>
7b}N8e0A9R'j3B0</Grid>

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

public classUser
k8A"W7u:S1C+}V"EM0{
?
U-ctK E:J0public stringName {get;set; }ITPUB个人空间y^1h3r1G)Q0m-r1v
ITPUB个人空间	ZN c1oL-a1A#^X}
public stringAddress {get;set; }ITPUB个人空间)w}
AO"Ux
C6h
}

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

<Gridx:Name="LayoutRoot"Background="#46461F">ITPUB个人空间
xE3GXHo
<Grid.RowDefinitions>ITPUB个人空间%C})Bl%YD'`
<RowDefinitionHeight="160"></RowDefinition>
0oFC3m[0<RowDefinitionHeight="40"></RowDefinition>ITPUB个人空间y0h}5J#v
].R
<RowDefinitionHeight="40"></RowDefinition>
x$\Byh"?$m RJ0</Grid.RowDefinitions>
KS(yabOs0<Grid.ColumnDefinitions>
Y7i'tq2T%D0<ColumnDefinitionWidth="150"></ColumnDefinition>ITPUB个人空间(\/jXZdwt5NH
<ColumnDefinitionWidth="*"></ColumnDefinition>ITPUB个人空间F$J8T]{T
</Grid.ColumnDefinitions>
qar,K'y[0<ImageSource="terrylee.jpg"Width="78"Height="100"
lH$D0z	r
G;eOEf!J0HorizontalAlignment="Left"Grid.Row="0"Grid.Column="1"/>
1bQ1n~
Hf}:`0<TextBlockForeground="White"FontSize="18"Text="姓名："ITPUB个人空间hi6Ga9V
Grid.Row="1"Grid.Column="0"HorizontalAlignment="Right"/>ITPUB个人空间)?UN#f/i
<TextBlockx:Name="lblName"Foreground="White"FontSize="18"
Y_!O#Q+jT3m0Grid.Row="1"Grid.Column="1"HorizontalAlignment="Left"ITPUB个人空间HS&H@6|s*ls
Text="{BindingName}"/>ITPUB个人空间L
Xl,O
GT1?
<TextBlockForeground="White"FontSize="18"Text="位置："

w{8z"s,C4tnz0Grid.Row="2"Grid.Column="0"HorizontalAlignment="Right"/>
8|h4O$Izd{
f;D
A0<TextBlockx:Name="lblAddress"Foreground="White"FontSize="18"
5_1Jji)nZ
z%\F0Grid.Row="2"Grid.Column="1"HorizontalAlignment="Left"ITPUB个人空间
~k$RQkcE
Text="{BindingAddress}"/>ITPUB个人空间	\?(Qv	y,F1w
</Grid>

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

private voidUserControl_Loaded(objectsender,RoutedEventArgse)ITPUB个人空间 S IaL\/om
{
$Jk#^p~h%f0Useruser =newUser();ITPUB个人空间3I/aeRT}*CP
user.Name ="TerryLee";ITPUB个人空间l8IX3y
M!V!HJ
user.Address ="中国 天津";
'B)hg'x
?"V	I
_f0_0
&brD$~-~E0lblName.DataContext = user;
#y\I4@6rTa0lblAddress.DataContext = user;
&wi9Y	U;LB4}W6H%q1m0}

运行示例后，可以看到：
u@Y }:VI{:Y0
)PU7M
{[I0D2D]]0

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

单向绑定示例

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

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

public classUser:INotifyPropertyChanged
dk.A%|ps-SCF!E0{ITPUB个人空间!~4v1k6X/Zn
public eventPropertyChangedEventHandlerPropertyChanged;
`*f8J%N"H9j#D0
I&d2E!k6v)?6i;\0private string_name;
/tntAR"y$B.wP0public stringNameITPUB个人空间"en+x0s
]&S'L~
{ITPUB个人空间~c]U;QGZ!p
get{return_name; }
l"{Q~MO1nn0set
w`*n5N3_
S(xv T7sK
BA0{
-s^ [*|t.Ji-hM0_name =value;
o'r(fy	x!X0if(PropertyChanged !=null)ITPUB个人空间_m2Ow9pbb6}J
{ITPUB个人空间r"v*S}%WU4S-L:s
PropertyChanged(this,newPropertyChangedEventArgs("Name"));ITPUB个人空间M`n.o^gJw%?6A$d
}
D&w9{*A'{Ql`$j:^0}
(z
HpW&|U!Z0}
8K5U1d%o9D/h7|0ITPUB个人空间JI.[:|t8T$lS
private string_address;ITPUB个人空间	m`Q2H;YLi([pb
public stringAddressITPUB个人空间Z:F_&w[Tk
{
1z
{V-d^:Ju0get{return_address; }
	?*h^b\S0setITPUB个人空间(`3i+}!wV8Nq
{ITPUB个人空间]^"k1\$uL
_address =value;
7wu/S8E)E
^2xf(B0if(PropertyChanged !=null)
Fi?T
T/h
]!S,@0{ITPUB个人空间
v2?&eP6|
PropertyChanged(this,newPropertyChangedEventArgs("Address"));ITPUB个人空间z%h$r3e;x-rz(_-I
}ITPUB个人空间p&A,^^ay+i]
}ITPUB个人空间&J	ky1`$o
Q0s9M8?(I
}
R6PT)_	q
l0p0}

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

<Gridx:Name="LayoutRoot"Background="#46461F">
#ya?#c3XD0<Grid.RowDefinitions>
3]}`@nM0<RowDefinitionHeight="160"></RowDefinition>ITPUB个人空间a'\N^9BR3\
<RowDefinitionHeight="40"></RowDefinition>
5Q5Il#FN)Ca+HC/L$N0<RowDefinitionHeight="40"></RowDefinition>ITPUB个人空间,F!X2]%O?	@!wi
</Grid.RowDefinitions>
9FH*[0U{
K0<Grid.ColumnDefinitions>
 e5if]5}R0<ColumnDefinitionWidth="150"></ColumnDefinition>
4[5h'uJ#`y0<ColumnDefinitionWidth="*"></ColumnDefinition>
inHM#ms*{T0</Grid.ColumnDefinitions>
I(s[8b+P0<ImageSource="terrylee.jpg"Width="78"Height="100"ITPUB个人空间M&I2Y9{a1CP)eB
HorizontalAlignment="Left"Grid.Row="0"Grid.Column="1"/>ITPUB个人空间k
zv4}n/IM
<Buttonx:Name="btnUpdate"Width="100"Height="40"
v[e[zB+XF.N0Content="Update"Click="btnUpdate_Click"/>ITPUB个人空间I/cN6my;TjZ
<TextBlockForeground="White"FontSize="18"Text="姓名："ITPUB个人空间2}.B)l'k#i EX$@
Grid.Row="1"Grid.Column="0"HorizontalAlignment="Right"/>ITPUB个人空间X3Eo?(_4dLH
<TextBlockx:Name="lblName"Foreground="White"FontSize="18"ITPUB个人空间a_yu2x
??
Grid.Row="1"Grid.Column="1"HorizontalAlignment="Left"ITPUB个人空间cyP	^#i*[6QxE
Text="{BindingName,Mode=OneWay}"/>ITPUB个人空间}\ I6uq*MQ
<TextBlockForeground="White"FontSize="18"Text="位置："
%bP;z#K|.h#V3ts3U0Grid.Row="2"Grid.Column="0"HorizontalAlignment="Right"/>
%j"nNze(z0<TextBlockx:Name="lblAddress"Foreground="White"FontSize="18"
*uI
_c0x0Grid.Row="2"Grid.Column="1"HorizontalAlignment="Left"ITPUB个人空间LZY.w
@rRpZ
Text="{BindingAddress,Mode=OneWay}"/>
7t's8bRwPi0</Grid>

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

public partial classPage:UserControlITPUB个人空间6||
y+UVhq
{
4}:u$z0X9{~?6H6s0publicPage()ITPUB个人空间
O O?C|5GG
{

F
T.?$So@8P0InitializeComponent();
o4IVO7@8n$@N0}ITPUB个人空间&Y$xR|oA-D!^
Useruser;ITPUB个人空间J0|*J*T4YE_
private voidUserControl_Loaded(objectsender,RoutedEventArgse)ITPUB个人空间:`HN0jDVwrojKON
{
4Y"i
r'SU-Zkwq0user =newUser();ITPUB个人空间!^,?kP,D:K1RD|
user.Name ="TerryLee";
M.|*z+K~bex"Iz.y0user.Address ="中国 天津";ITPUB个人空间RKr(W{$oO
ITPUB个人空间)Mb$XqTphs$g
lblName.DataContext = user;ITPUB个人空间.f N	}7SzJ1C;ur
lblAddress.DataContext = user;
cv	_qM,n0}ITPUB个人空间,u B3]Wo%n	]6@T(U
ITPUB个人空间5x|)Kb:QI
private voidbtnUpdate_Click(objectsender,RoutedEventArgse)ITPUB个人空间&X8s&I8xcjo;u
{ITPUB个人空间!]~2z5}w*}l
user.Name ="李会军";ITPUB个人空间^[!lo
z
D
y"E:IV(wzOk
user.Address ="China Tianjin";
V'\ad1z0}ITPUB个人空间 fN:q7~
@7sG-x2U$c;b
}

运行后如下所示：

绑定到列表

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

<GridBackground="#46461F">
"{4qu_
tG0<Grid.RowDefinitions>
}O
D[1Hv0<RowDefinitionHeight="40"></RowDefinition>
K4gA,k+piX0<RowDefinitionHeight="*"></RowDefinition>ITPUB个人空间0au:SF%GM
</Grid.RowDefinitions>
.Z$q8G#Px	iP)H;K
JW0<Grid.ColumnDefinitions>ITPUB个人空间|U)n)FL&G1D
<ColumnDefinition></ColumnDefinition>
	w0q`[ot7_-a(V0</Grid.ColumnDefinitions>ITPUB个人空间c^eik
FUd.f
<BorderGrid.Row="0"Grid.Column="0"CornerRadius="15"
s2Ww!Y5|#E0{0Width="240"Height="36"Background="Orange"ITPUB个人空间K@quTS
Margin="20 0 0 0"HorizontalAlignment="Left">ITPUB个人空间X/K
O%o-o3Zy
<TextBlockText="文章列表"Foreground="White"ITPUB个人空间6av3@)WOf
t
HorizontalAlignment="Left"VerticalAlignment="Center"ITPUB个人空间JLi1@WR7U2vx
Z
Margin="20 0 0 0"></TextBlock>
+Xg!v`?/]0</Border>ITPUB个人空间mrN$SLuA3O_
<ListBoxx:Name="PostList"Grid.Column="0"Grid.Row="1"ITPUB个人空间i\OgvK-wt
Margin="40 10 10 10"ITPUB个人空间*L!K]	uC/H7[
HorizontalContentAlignment="Left"VerticalContentAlignment="Bottom"ITPUB个人空间*Dz5@WO%U%Y$R
ItemsSource="{BindingPosts}">ITPUB个人空间"G-FV2KX$?
</ListBox>ITPUB个人空间\,rCd k#To
</Grid>

编写一个简单的业务类：

public classBlogITPUB个人空间b%m#EV7sSl
{
&x7tq^RT$J2[,C$v5S&c0publicList<String> Posts {get;set; }
4mk/]p3`H6Z%b5g0}

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

private voidUserControl_Loaded(objectsender,RoutedEventArgse)
I-N;E}UwOq-S0{
1va*[!P	dJ.O!n0Blogblog =newBlog();
)y:`2I
XVF'{O#\0blog.Posts =newList<String>

[RE,Ea*XybJ0{ITPUB个人空间XRo,TW/TmLA}4d{
"一步一步学Silverlight 2系列（10）：使用用户控件",
/E#e^%U*N9ri0"一步一步学Silverlight 2系列（9）：使用控件模板",
!U(EV#j:k"yK0"一步一步学Silverlight 2系列（8）：使用样式封装控件观感",ITPUB个人空间m'bw(w|z
"一步一步学Silverlight 2系列（7）：全屏模式支持"ITPUB个人空间ZSm	E+S$W
};
"C:t@d0}up6_6J0
hJ'H:J5M,xF@C0PostList.DataContext = blog;ITPUB个人空间~\:zdi/A%u2J9L
}

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

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

结束语

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