|
|
概念
Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, IronPython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章帶您快速進(jìn)入Silverlight 2開(kāi)發(fā)。
本文為系列文章第十一篇，主要介紹Silverlight 2中的數(shù)據(jù)綁定。
數(shù)據(jù)綁定模式
在Silverlight 2中，支持三種模式的數(shù)據(jù)綁定。
1.ONETime：一次綁定，在綁定創(chuàng)建時(shí)使用源數(shù)據(jù)更新目標(biāo)，適用于只顯示數(shù)據(jù)而不進(jìn)行數(shù)據(jù)的更新。
2.OneWay：?jiǎn)蜗蚪壎ǎ诮壎▌?chuàng)建時(shí)或者源數(shù)據(jù)發(fā)生變化時(shí)更新到目標(biāo)，適用于顯示變化的數(shù)據(jù)。
3.TwoWay：雙向綁定，在任何時(shí)候都可以同時(shí)更新源數(shù)據(jù)和目標(biāo)。
Jesse Liberty舉的例子非常的形象，使用Silverlight開(kāi)發(fā)一個(gè)在線(xiàn)書(shū)店，顯示書(shū)籍的書(shū)名、作者等信息，使用ONETime模式，這些數(shù)據(jù)一般不會(huì)發(fā)生變化的；顯示價(jià)格信息時(shí)使用OneWay模式，因?yàn)楣芾韱T可能會(huì)在一天內(nèi)調(diào)整價(jià)格；顯示書(shū)籍的剩余數(shù)量時(shí)用TwoWay模式，數(shù)量隨著用戶(hù)的訂購(gòu)會(huì)隨時(shí)發(fā)生變化，即目標(biāo)和源數(shù)據(jù)都要進(jìn)行更新。
簡(jiǎn)單數(shù)據(jù)綁定
在本示例中我們將做一個(gè)簡(jiǎn)單的數(shù)據(jù)綁定，用來(lái)顯示用戶(hù)信息，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>
添加一個(gè)簡(jiǎn)單User類(lèi)，它具有Name和Address兩個(gè)屬性：
public class User{ public string Name { get; set; } public string Address { get; set; }}
使用綁定句法{Binding Property}進(jìn)行數(shù)據(jù)綁定，注意下面的兩個(gè)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>
指定數(shù)據(jù)源，注意這里是創(chuàng)建一個(gè)User的實(shí)例并賦值后，把user實(shí)例綁定到了TextBlock的DataContext上，而不是向之前我們所做的示例中那樣，直接指定Text屬性：
private void UserControl_Loaded(object sender, RoutedEventArgs e){ User user = new User(); user.Name = "TerryLee"; user.Address = "中國(guó) 天津"; lblName.DataContext = user; lblAddress.DataContext = user;}
運(yùn)行示例后，可以看到：
上面這種數(shù)據(jù)綁定模式，只是顯示數(shù)據(jù)而不對(duì)數(shù)據(jù)做任何修改，默認(rèn)的綁定模式是一次綁定ONETime。
單向綁定示例
如果需要在數(shù)據(jù)源發(fā)生變化時(shí)能夠通知UI進(jìn)行相應(yīng)的更新，即使用單向綁定OneWay或者雙向綁定TwoWay，則業(yè)務(wù)實(shí)體需要實(shí)現(xiàn)接口INotifyPropertyChanged。在本示例中，我們加上一個(gè)更新按鈕，當(dāng)單擊按鈕時(shí)更新user實(shí)例的屬性值，會(huì)看到界面上的數(shù)據(jù)也會(huì)發(fā)生變化。
修改一下User類(lèi)，使其實(shí)現(xiàn)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")); } } }}
修改數(shù)據(jù)綁定模式，使用單向綁定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>
編寫(xiě)事件處理程序，為了演示把user聲明為一個(gè)全局的，并在按鈕的單擊事件中修改其屬性值：
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 = "中國(guó) 天津"; lblName.DataContext = user; lblAddress.DataContext = user; } private void btnUpdate_Click(object sender, RoutedEventArgs e) { user.Name = "李會(huì)軍"; user.Address = "China Tianjin"; }}
運(yùn)行后如下所示：
單擊Update按鈕后：
綁定到列表
下面再看一個(gè)綁定到列表的簡(jiǎn)單例子，一般都會(huì)使用DataGrid或者ListBox來(lái)進(jìn)行列表數(shù)據(jù)的顯示。下面的示例我們顯示一個(gè)文章列表：
<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>
編寫(xiě)一個(gè)簡(jiǎn)單的業(yè)務(wù)類(lèi)：
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> { "一步一步學(xué)Silverlight 2系列（10）：使用用戶(hù)控件", "一步一步學(xué)Silverlight 2系列（9）：使用控件模板", "一步一步學(xué)Silverlight 2系列（8）：使用樣式封裝控件觀(guān)感", "一步一步學(xué)Silverlight 2系列（7）：全屏模式支持" }; PostList.DataContext = blog;}
最終運(yùn)行的結(jié)果如下所示：
當(dāng)然我們也可以使用ListBox的ItemsSource屬性進(jìn)行綁定，
結(jié)束語(yǔ)
本文簡(jiǎn)單介紹了Silverlight 2中的數(shù)據(jù)綁定，你可以從這里下載文章示例代碼。
NET技術(shù)：一步一步學(xué)Silverlight ：數(shù)據(jù)綁定，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
