Binding数据绑定

转载 2012年03月24日 20:29:45

数据绑定模式

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

单向绑定示例

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

修改一下User类,使其实现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"));
            }
        }
    }
}

修改数据绑定模式,使用单向绑定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";
    }
}

运行后如下所示:

TerryLee_Silverlight2_0056

单击Update按钮后:

TerryLee_Silverlight2_0057

绑定到列表

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

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

编写一个简单的业务类:

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>
    {
        "一步一步学Silverlight 2系列(10):使用用户控件",
        "一步一步学Silverlight 2系列(9):使用控件模板",
        "一步一步学Silverlight 2系列(8):使用样式封装控件观感",
        "一步一步学Silverlight 2系列(7):全屏模式支持"
    };

    PostList.DataContext = blog;
}

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

TerryLee_Silverlight2_0058

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




Silverlight 数据绑定(Binding)

    在使用Silverlight进行开发的时候,会觉得数据的操作是在是非常简单,不管是用WCF还是Webclient在于服务器通信后,Silverlight处理并显示数据都非常的方便,TextBl...
  • banmuhuangci
  • banmuhuangci
  • 2009年05月08日 11:02
  • 12593

C# WPF中DataGrid的数据绑定(Binding)

转载地址:http://www.zhixing123.cn/net/csharp-wpf-datagrid-binding.html 最近使用C#+WPF开发一个小测试工具,其中用到了DataGri...
  • mao_mao37
  • mao_mao37
  • 2016年04月25日 14:50
  • 5780

WPF数据绑定-简单对象的绑定

绑定自定义的数据类对象 在xaml代码中,Binding标记扩展中仅定义了Path属性,将它绑定到StudentData类的属性上。不需要定义源对象,因为通过指定DataContext类定义源对象...
  • i1tws
  • i1tws
  • 2017年03月28日 22:15
  • 3161

数据绑定(Binding)

Windows Presentation Foundation (WPF) 中的数据绑定为应用程序提供了一种简单、一致的数据表示和交互方法。元素能够以公共语言运行时 (CLR) 对象和 XML 形式绑...
  • GongchuangSu
  • GongchuangSu
  • 2015年08月26日 10:02
  • 388

数据绑定(六)使用XML数据作为Binding的Source

.NET Framework提供了两套处理XML数据的类库 1. 符合DOM标准的类库:包括XmlDocument、XmlElement、XmlNode、XmlAttribute等类,这套类库的...
  • iamsupercola
  • iamsupercola
  • 2011年12月07日 17:00
  • 3037

数据绑定基础

WPF数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及与数据交互。 元素能够以CLR对象和 XML 形式绑定到来自各种数据源的数据。  WPF 中的数据绑定功能与传统模型相比具有一些优势,包...
  • lk13962517093
  • lk13962517093
  • 2014年02月17日 00:19
  • 4232

WPF学习笔记:ComboBox的数据绑定

UI
  • leftfist
  • leftfist
  • 2014年06月20日 22:28
  • 14930

WPF自定义控件数据绑定——双向绑定

自己整了一个自定义控件UserControl,功能就是一个带拼音筛选功能的ComboBox,不过发现数据绑定dataset的row的一列之后可以显示值,但是更改之后不能更改到row里,在textbox...
  • keyler
  • keyler
  • 2011年11月08日 17:16
  • 7881

Data Binding 的使用之一:简单的数据绑定

android中Data Binding的简单使用
  • yeah0126
  • yeah0126
  • 2017年02月06日 17:00
  • 788

wpf 后台绑定数据 binding

http://blog.csdn.net/h82258652/article/details/20577209点击打开链接
  • czf2505
  • czf2505
  • 2014年05月26日 14:28
  • 666
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Binding数据绑定
举报原因:
原因补充:

(最多只允许输入30个字)