一步一步學(xué)Silverlight 2系列（11）：數(shù)據(jù)綁定

Silverlight 2 Beta 1版本發(fā)布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章帶您快速進(jìn)入Silverlight 2開發(fā)。本文為系列文章第十一篇，主要介紹Silverlight 2中的數(shù)據(jù)綁定。 1.數(shù)據(jù)綁定模式 2.簡單數(shù)據(jù)綁定 3.單向綁定示例 4.綁定到列表

概念

本文為系列文章第十一篇，主要介紹Silverlight 2中的數(shù)據(jù)綁定。

數(shù)據(jù)綁定模式

在Silverlight 2中，支持三種模式的數(shù)據(jù)綁定。

1.OneTime：一次綁定，在綁定創(chuàng)建時使用源數(shù)據(jù)更新目標(biāo)，適用于只顯示數(shù)據(jù)而不進(jìn)行數(shù)據(jù)的更新。

2.OneWay：單向綁定，在綁定創(chuàng)建時或者源數(shù)據(jù)發(fā)生變化時更新到目標(biāo)，適用于顯示變化的數(shù)據(jù)。

3.TwoWay：雙向綁定，在任何時候都可以同時更新源數(shù)據(jù)和目標(biāo)。

Jesse Liberty舉的例子非常的形象，使用Silverlight開發(fā)一個在線書店，顯示書籍的書名、作者等信息，使用OneTime模式，這些數(shù)據(jù)一般不會發(fā)生變化的；顯示價格信息時使用OneWay模式，因?yàn)楣芾韱T可能會在一天內(nèi)調(diào)整價格；顯示書籍的剩余數(shù)量時用TwoWay模式，數(shù)量隨著用戶的訂購會隨時發(fā)生變化，即目標(biāo)和源數(shù)據(jù)都要進(jìn)行更新。

簡單數(shù)據(jù)綁定

在本示例中我們將做一個簡單的數(shù)據(jù)綁定，用來顯示用戶信息，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}進(jìn)行數(shù)據(jù)綁定，注意下面的兩個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)建一個User的實(shí)例并賦值后，把user實(shí)例綁定到了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;
}

運(yùn)行示例后，可以看到：

上面這種數(shù)據(jù)綁定模式，只是顯示數(shù)據(jù)而不對數(shù)據(jù)做任何修改，默認(rèn)的綁定模式是一次綁定OneTime。

單向綁定示例

如果需要在數(shù)據(jù)源發(fā)生變化時能夠通知UI進(jìn)行相應(yīng)的更新，即使用單向綁定OneWay或者雙向綁定TwoWay，則業(yè)務(wù)實(shí)體需要實(shí)現(xiàn)接口INotifyPropertyChanged。在本示例中，我們加上一個更新按鈕，當(dāng)單擊按鈕時更新user實(shí)例的屬性值，會看到界面上的數(shù)據(jù)也會發(fā)生變化。

修改一下User類，使其實(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>

編寫事件處理程序，為了演示把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";
    }
}

運(yùn)行后如下所示：

單擊Update按鈕后：

綁定到列表

下面再看一個綁定到列表的簡單例子，一般都會使用DataGrid或者ListBox來進(jìn)行列表數(shù)據(jù)的顯示。下面的示例我們顯示一個文章列表：

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

編寫一個簡單的業(yè)務(wù)類：

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

初始化集合數(shù)據(jù)并進(jìn)行綁定

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    Blog blog = new Blog();
    blog.Posts = new List<String>
    {
        "一步一步學(xué)Silverlight 2系列（10）：使用用戶控件",
        "一步一步學(xué)Silverlight 2系列（9）：使用控件模板",
        "一步一步學(xué)Silverlight 2系列（8）：使用樣式封裝控件觀感",
        "一步一步學(xué)Silverlight 2系列（7）：全屏模式支持"
    };

    PostList.DataContext = blog;
}

最終運(yùn)行的結(jié)果如下所示：

當(dāng)然我們也可以使用ListBox的ItemsSource屬性進(jìn)行綁定，

結(jié)束語

本文簡單介紹了Silverlight 2中的數(shù)據(jù)綁定，你可以從這里下載文章示例代碼。

下一篇：一步一步學(xué)Silverlight 2系列（12）：數(shù)據(jù)與通信之WebClient

posted @ 2008-03-08 23:48 TerryLee 閱讀(43648) 評論(86) 收藏舉報

刷新頁面返回頂部

TerryLee's Tech Space

支持TerryLee的創(chuàng)業(yè)產(chǎn)品Worktile，https://worktile.com
Worktile，新一代簡單好用、體驗(yàn)極致的團(tuán)隊(duì)協(xié)同、項(xiàng)目管理工具，讓你和你的團(tuán)隊(duì)隨時隨地一起工作

一步一步學(xué)Silverlight 2系列（11）：數(shù)據(jù)綁定

概念

數(shù)據(jù)綁定模式

簡單數(shù)據(jù)綁定

單向綁定示例

綁定到列表

結(jié)束語

公告

TerryLee's Tech Space

支持TerryLee的創(chuàng)業(yè)產(chǎn)品Worktile，https://worktile.com Worktile，新一代簡單好用、體驗(yàn)極致的團(tuán)隊(duì)協(xié)同、項(xiàng)目管理工具，讓你和你的團(tuán)隊(duì)隨時隨地一起工作

一步一步學(xué)Silverlight 2系列（11）：數(shù)據(jù)綁定

概念

數(shù)據(jù)綁定模式

簡單數(shù)據(jù)綁定

單向綁定示例

綁定到列表

結(jié)束語

公告

支持TerryLee的創(chuàng)業(yè)產(chǎn)品Worktile，https://worktile.com
Worktile，新一代簡單好用、體驗(yàn)極致的團(tuán)隊(duì)協(xié)同、項(xiàng)目管理工具，讓你和你的團(tuán)隊(duì)隨時隨地一起工作