热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> Silverlight>>正文内容

Silverlight2 实例之 数据绑定

发布时间:2010年01月25日点击数: Gnie

实例源码下载】本篇介绍SL2的数据绑定功能,在Silverlight2中数据绑定有3中模式:
* 单向模式(OneWay):源数据更新时目标数据也随之更新。
* 双向模式(TwoWay):源数据或目标数据更新时,彼此相互更新。
* 一次模式(OneTime):只将源数据显示到目标,不用于更新。
单向模式为SL2默认的绑定模式,首先演示一个简单的OneTime模式:

XAML Code:

  1. <UserControl x:Class="DataBinding.Page" 
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4.     Width="300" Height="150" Loaded="Page_Loaded"> 
  5.     <Grid x:Name="gridUser" Background="White"> 
  6.         <Grid.RowDefinitions> 
  7.             <RowDefinition Height="40"></RowDefinition> 
  8.             <RowDefinition Height="40"></RowDefinition> 
  9.             <RowDefinition Height="40"></RowDefinition> 
  10.         </Grid.RowDefinitions> 
  11.         <Grid.ColumnDefinitions> 
  12.             <ColumnDefinition Width="80"></ColumnDefinition> 
  13.             <ColumnDefinition Width="*"></ColumnDefinition> 
  14.         </Grid.ColumnDefinitions> 
  15.         <TextBlock Grid.Row="0" Grid.Column="0" Text="Name"  
  16.                    FontSize="20" Margin="5,5,5,5"></TextBlock> 
  17.         <!--绑定姓名数据--> 
  18.         <TextBox Margin="5,5,5,5" BorderBrush="Orange" 
  19.                  Grid.Row="0" Grid.Column="1" FontSize="20" 
  20.                  Text="{Binding Name}"></TextBox> 
  21.  
  22.         <TextBlock Grid.Row="1" Grid.Column="0" Text="Age"  
  23.                    FontSize="20" Margin="5,5,5,5"></TextBlock> 
  24.         <!--绑定年龄数据--> 
  25.         <TextBox Margin="5,5,5,5" BorderBrush="Orange" 
  26.                  Grid.Row="1" Grid.Column="1" FontSize="20" 
  27.                  Text="{Binding Age}"></TextBox> 
  28.         </Grid> 
  29. </UserControl> 

创建User Class:

  1. using System; 
  2. using System.Windows; 
  3. using System.Windows.Controls; 
  4. using System.ComponentModel; 
  5.  
  6. namespace DataBinding 
  7.     public class User 
  8.     { 
  9.         private string name; 
  10.         public string Name 
  11.         { 
  12.             get { return name; } 
  13.             set { name = value; } 
  14.         } 
  15.  
  16.         private string age; 
  17.         public string Age 
  18.         { 
  19.             get { return age; } 
  20.             set { age = value; } 
  21.         } 
  22.     } 

主程序:

  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Windows; 
  4. using System.Windows.Controls; 
  5. using System.Windows.Documents; 
  6.  
  7. namespace DataBinding 
  8. {  
  9.     public partial class Page : UserControl 
  10.     { 
  11.         public Page() 
  12.         { 
  13.             InitializeComponent(); 
  14.         } 
  15.  
  16.         private void Page_Loaded(object sender, RoutedEventArgs e) 
  17.         { 
  18.             User user = new User(); 
  19.             user.Name = "Petter"
  20.             user.Age = "20"
  21.  
  22.             gridUser.DataContext = user; 
  23.         } 
  24.     } 

运行效果:

2009-8-5-16.44.13

下面上一个OneWay模式(也适用于TwoWay),XAML Code:

  1. <UserControl x:Class="DataBinding.Page" 
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  4.     Width="400" Height="300" Loaded="Page_Loaded"> 
  5.     <Grid x:Name="gridUser" Background="White"> 
  6.         <Grid.RowDefinitions> 
  7.             <RowDefinition Height="40"></RowDefinition> 
  8.             <RowDefinition Height="40"></RowDefinition> 
  9.             <RowDefinition Height="40"></RowDefinition> 
  10.         </Grid.RowDefinitions> 
  11.         <Grid.ColumnDefinitions> 
  12.             <ColumnDefinition Width="80"></ColumnDefinition> 
  13.             <ColumnDefinition Width="*"></ColumnDefinition> 
  14.         </Grid.ColumnDefinitions> 
  15.         <TextBlock Grid.Row="0" Grid.Column="0" Text="Name"  
  16.                    FontSize="20" Margin="5,5,5,5"></TextBlock> 
  17.         <!--绑定姓名数据--> 
  18.         <TextBox Margin="5,5,5,5" BorderBrush="Orange" 
  19.                  Grid.Row="0" Grid.Column="1" FontSize="20" 
  20.                  Text="{Binding Name, Mode=OneWay}"></TextBox> 
  21.          
  22.         <TextBlock Grid.Row="1" Grid.Column="0" Text="Age"  
  23.                    FontSize="20" Margin="5,5,5,5"></TextBlock> 
  24.         <!--绑定年龄数据--> 
  25.         <TextBox Margin="5,5,5,5" BorderBrush="Orange" 
  26.                  Grid.Row="1" Grid.Column="1" FontSize="20" 
  27.                  Text="{Binding Age, Mode=OneWay}"></TextBox> 
  28.         <!--点击更新数据--> 
  29.         <Button Grid.Row="2" Grid.Column="1" Width="100" Height="30" 
  30.                 Content="Update Data" Click="Button_Click"></Button> 
  31.     </Grid> 
  32. </UserControl> 

User Class 也需要更新,这里要用到接口:INotifyPropertyChanged

  1. using System; 
  2. using System.Windows; 
  3. using System.Windows.Controls; 
  4. using System.ComponentModel; 
  5.  
  6. namespace DataBinding 
  7.     public class User : INotifyPropertyChanged 
  8.     { 
  9.         public event PropertyChangedEventHandler PropertyChanged; 
  10.         public void OnPropertyChanged(PropertyChangedEventArgs e) 
  11.         { 
  12.             if (PropertyChanged != null
  13.                 PropertyChanged(this, e); 
  14.         } 
  15.  
  16.         private string name; 
  17.         public string Name 
  18.         { 
  19.             get { return name; } 
  20.             set 
  21.             { 
  22.                 name = value; 
  23.                 OnPropertyChanged(new PropertyChangedEventArgs("Name")); 
  24.             } 
  25.         } 
  26.  
  27.         private string age; 
  28.         public string Age 
  29.         { 
  30.             get { return age; } 
  31.             set 
  32.             { 
  33.                 age = value; 
  34.                 OnPropertyChanged(new PropertyChangedEventArgs("Age")); 
  35.             } 
  36.         } 
  37.     } 

主程序:

  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Windows; 
  4. using System.Windows.Controls; 
  5. using System.Windows.Documents; 
  6.  
  7. namespace DataBinding 
  8. {  
  9.     public partial class Page : UserControl 
  10.     { 
  11.         public Page() 
  12.         { 
  13.             InitializeComponent(); 
  14.         } 
  15.  
  16.         private void Page_Loaded(object sender, RoutedEventArgs e) 
  17.         { 
  18.             User user = new User(); 
  19.             user.Name = "Petter"
  20.             user.Age = "20"
  21.  
  22.             gridUser.DataContext = user; 
  23.         } 
  24.  
  25.         private void Button_Click(object sender, RoutedEventArgs e) 
  26.         { 
  27.             User user = (User)gridUser.DataContext; 
  28.             user.Name = "Jone"
  29.             user.Age = "28"
  30.         } 
  31.     } 

更多模板/案例展示

亚太盛典国际婚纱摄影 本案例由亚太盛典国际婚纱公司所部署,精美的界面,合理的布局是网站的一大特色!
亚太盛典国际婚纱摄影 本案例由亚太盛典国际婚纱公司所部署,精美的界面,合理的布局是网站的一大特色!
关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作