第三十二章 介绍在 Silverlight 绑定数据

 

数据绑定可以动态的将对象属性绑定到Silverlight中UI 控件的属性中。

例如，一个简单的Silverlight控件用于接收用户的名字和地址。可以创建一个xaml控件具有以下文本字段：

1. Name

2. Address1

3. Address2

4. City

5. State

6. Zip code

在这里XAML中都有一个Grid 用于摆放示例中的控件：

< Grid x : Name ="LayoutRoot" Background ="AliceBlue" Width ="300" Height ="300">

    <Grid.RowDefinitions>

        <RowDefinitionHeight="30"></ RowDefinition >

        <RowDefinitionHeight="30"></ RowDefinition >

        <RowDefinitionHeight="30"></ RowDefinition >

        <RowDefinitionHeight="30"></ RowDefinition >

        <RowDefinitionHeight="30"></ RowDefinition >

        <RowDefinitionHeight="30"></ RowDefinition >

        <RowDefinitionHeight="30"></ RowDefinition >

        <RowDefinitionHeight="30"></ RowDefinition >

         < RowDefinition Height ="30"></ RowDefinition >

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinitionWidth="100"></ ColumnDefinition>

        <ColumnDefinitionWidth="200"></ ColumnDefinition>

    </Grid.ColumnDefinitions>

    <TextBlockText="Name" Grid.Row ="0" Grid.Column ="0"></ TextBlock >

    <TextBlockText="Address 1" Grid.Row ="1" Grid.Column ="0"></ TextBlock >

    <TextBlockText="Address 2" Grid.Row ="2" Grid.Column ="0"></ TextBlock >

    <TextBlockText="City" Grid.Row ="3" Grid.Column ="0"></ TextBlock >

    <TextBlockText="State" Grid.Row ="4" Grid.Column ="0"></ TextBlock >

    <TextBlockText="Zipcode" Grid.Row ="5" Grid.Column ="0"></ TextBlock >

    <TextBoxx: Name ="txtName" Text ="{ Binding Name , Mode =TwoWay}" Grid.Row ="0"

        Grid.Column="1"  Height="20"Width="100"></ TextBox>

    <TextBoxx: Name ="txtAddress1" Text ="{ Binding Address1 , Mode =TwoWay}"

        Grid.Row="1"Grid.Column="1" Height ="20" Width ="100"></ TextBox >

    <TextBoxx: Name ="txtAddress2" Text ="{ Binding Address2 , Mode =TwoWay}"

        Grid.Row="2"Grid.Column="1" Height ="20" Width ="100"></ TextBox >

    <TextBoxx: Name ="txtCity" Text ="{ Binding City , Mode =TwoWay}" Grid.Row ="3"

        Grid.Column="1"Height="20" Width ="100"></ TextBox >

    <TextBoxx: Name ="txtState" Text ="{ Binding State , Mode =TwoWay}" Grid.Row ="4"

        Grid.Column="1"Height="20" Width ="100"></ TextBox >

    <TextBoxx: Name ="txtZipcode" Text ="{ Binding Zipcode , Mode =TwoWay}"

        Grid.Row="5"Grid.Column="1" Height ="20" Width ="100"></ TextBox >

    <ButtonGrid.Row="6" Grid.Column ="0" Grid.ColumnSpan ="2" Width ="50"

        Content="Save"x: Name ="btnSave" Click ="btnSave_Click"></ Button>

</ Grid >

在上面的XAML定义了一个7 行 2 列的网格。这些控件通过使用各自的Grid.Row和 Grid.Column 属性防止合适的行、列中。当Silverlight控件放在Web 页面显示如下所示：

现在创建一个名为“Address”的类，它的各个属性表示我们需要的域。看“Address”类的示例代码：

public class Address {

    publicstring Name {get ;set ; }

    publicstring Address1 {get ;set ; }

    publicstring Address2 {get ;set ; }

    publicstring City {get ;set ; }

    publicstring State {get ;set ; }

    publicstring Zipcode {get ;set ; }

}

转到XAML类的后台代码文件，按如下方式创建一个Address类的实例：

Address address;

在XAML页面类的构造方法中，初始化Address类，按如下方式绑定到UI元素：

address = newAddress ();

txtName.DataContext = address;

txtAddress1.DataContext = address;

txtAddress2.DataContext = address;

txtCity.DataContext = address;

txtState.DataContext = address;

txtZipcode.DataContext = address;

在上面代码中，将“Address”对象设置到每个UI 控件的 DataContext属性。但是，如何控制使用的每个address对象的属性呢？这在XAML 中处理。看一看“ txtAddress1”控件。可以看到“ Text ”属性按如下设置：

Text ="{ Binding Address1 , Mode =TwoWay}

上面代码行大运了使用数据绑定为控件的“Text”属性赋值，它无论哪个对象都绑定在“Address1”属性。此外，状态模式为“TwoWay”，表示这个值可以从对象读取，也可以设置“Text”属性当文本框控件中的值发生改变时，会保存回数据源。在这个例子中，绑定Address对象到文本框控件。当加载时，将显示对象的默认值到文本框。当用户改变值后，数据源对象将从文本框中更新值。

通常，我们添加一个新地址，这个对象将初始化为空值且文本框为清空。当我们编译一个已存在的地址，这个对象将从数据库中填充值并使用数据绑定显示在UI控件。当用户改变值时，数据源对象将自动更改。我们所需要做的是，保存修改的数据源对象到数据库。

 

 

Silverlight入门知识学习目录