一步一步學Silverlight :數據綁定

作者: TerryLee  來源: 博客園  發布時間: 2008-10-08 18:14  閱讀: 36540 次  推薦: 1   原文鏈接   [收藏]  
 
[1] 一步一步學Silverlight :數據綁定
[2] 一步一步學Silverlight :數據綁定
[3] 一步一步學Silverlight :數據綁定

概念

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

 

運行示例后,可以看到:

TerryLee_Silverlight2_0055

上面這種數據綁定模式,只是顯示數據而不對數據做任何修改,默認的綁定模式是一次綁定OneTime。

 

1
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()