Silverlight2 边学边练 之八 数据绑定
本篇介绍SL2的数据绑定功能,在Silverlight2中数据绑定有3中模式:
* 单向模式(OneWay):源数据更新时目标数据也随之更新。
* 双向模式(TwoWay):源数据或目标数据更新时,彼此相互更新。
* 一次模式(OneTime):只将源数据显示到目标,不用于更新。
单向模式为SL2默认的绑定模式,首先演示一个简单的OneTime模式:
XAML Code:
<UserControl x:Class="DataBinding.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="150" Loaded="Page_Loaded">
<Grid x:Name="gridUser" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name"
FontSize="20" Margin="5,5,5,5"></TextBlock>
<!--绑定姓名数据-->
<TextBox Margin="5,5,5,5" BorderBrush="Orange"
Grid.Row="0" Grid.Column="1" FontSize="20"
Text="{Binding Name}"></TextBox>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Age"
FontSize="20" Margin="5,5,5,5"></TextBlock>
<!--绑定年龄数据-->
<TextBox Margin="5,5,5,5" BorderBrush="Orange"
Grid.Row="1" Grid.Column="1" FontSize="20"
Text="{Binding Age}"></TextBox>
</Grid>
</UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="150" Loaded="Page_Loaded">
<Grid x:Name="gridUser" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name"
FontSize="20" Margin="5,5,5,5"></TextBlock>
<!--绑定姓名数据-->
<TextBox Margin="5,5,5,5" BorderBrush="Orange"
Grid.Row="0" Grid.Column="1" FontSize="20"
Text="{Binding Name}"></TextBox>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Age"
FontSize="20" Margin="5,5,5,5"></TextBlock>
<!--绑定年龄数据-->
<TextBox Margin="5,5,5,5" BorderBrush="Orange"
Grid.Row="1" Grid.Column="1" FontSize="20"
Text="{Binding Age}"></TextBox>
</Grid>
</UserControl>
创建User Class:
using System;
using System.Windows;
using System.Windows.Controls;
using System.ComponentModel;
namespace DataBinding
{
public class User
{
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private string age;
public string Age
{
get { return age; }
set { age = value; }
}
}
}
using System.Windows;
using System.Windows.Controls;
using System.ComponentModel;
namespace DataBinding
{
public class User
{
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private string age;
public string Age
{
get { return age; }
set { age = value; }
}
}
}
主程序:
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
namespace DataBinding
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
User user = new User();
user.Name = "Petter";
user.Age = "20";
gridUser.DataContext = user;
}
}
}
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
namespace DataBinding
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
User user = new User();
user.Name = "Petter";
user.Age = "20";
gridUser.DataContext = user;
}
}
}
运行效果:
下面上一个OneWay模式(也适用于TwoWay),XAML Code:
<UserControl x:Class="DataBinding.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" Loaded="Page_Loaded">
<Grid x:Name="gridUser" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name"
FontSize="20" Margin="5,5,5,5"></TextBlock>
<!--绑定姓名数据-->
<TextBox Margin="5,5,5,5" BorderBrush="Orange"
Grid.Row="0" Grid.Column="1" FontSize="20"
Text="{Binding Name, Mode=OneWay}"></TextBox>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Age"
FontSize="20" Margin="5,5,5,5"></TextBlock>
<!--绑定年龄数据-->
<TextBox Margin="5,5,5,5" BorderBrush="Orange"
Grid.Row="1" Grid.Column="1" FontSize="20"
Text="{Binding Age, Mode=OneWay}"></TextBox>
<!--点击更新数据-->
<Button Grid.Row="2" Grid.Column="1" Width="100" Height="30"
Content="Update Data" Click="Button_Click"></Button>
</Grid>
</UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" Loaded="Page_Loaded">
<Grid x:Name="gridUser" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name"
FontSize="20" Margin="5,5,5,5"></TextBlock>
<!--绑定姓名数据-->
<TextBox Margin="5,5,5,5" BorderBrush="Orange"
Grid.Row="0" Grid.Column="1" FontSize="20"
Text="{Binding Name, Mode=OneWay}"></TextBox>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Age"
FontSize="20" Margin="5,5,5,5"></TextBlock>
<!--绑定年龄数据-->
<TextBox Margin="5,5,5,5" BorderBrush="Orange"
Grid.Row="1" Grid.Column="1" FontSize="20"
Text="{Binding Age, Mode=OneWay}"></TextBox>
<!--点击更新数据-->
<Button Grid.Row="2" Grid.Column="1" Width="100" Height="30"
Content="Update Data" Click="Button_Click"></Button>
</Grid>
</UserControl>
User Class 也需要更新,这里要用到接口:INotifyPropertyChanged
using System;
using System.Windows;
using System.Windows.Controls;
using System.ComponentModel;
namespace DataBinding
{
public class User : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
PropertyChanged(this, e);
}
private string name;
public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged(new PropertyChangedEventArgs("Name"));
}
}
private string age;
public string Age
{
get { return age; }
set
{
age = value;
OnPropertyChanged(new PropertyChangedEventArgs("Age"));
}
}
}
}
using System.Windows;
using System.Windows.Controls;
using System.ComponentModel;
namespace DataBinding
{
public class User : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
PropertyChanged(this, e);
}
private string name;
public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged(new PropertyChangedEventArgs("Name"));
}
}
private string age;
public string Age
{
get { return age; }
set
{
age = value;
OnPropertyChanged(new PropertyChangedEventArgs("Age"));
}
}
}
}
主程序:
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
namespace DataBinding
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
User user = new User();
user.Name = "Petter";
user.Age = "20";
gridUser.DataContext = user;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
User user = (User)gridUser.DataContext;
user.Name = "Jone";
user.Age = "28";
}
}
}
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
namespace DataBinding
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
User user = new User();
user.Name = "Petter";
user.Age = "20";
gridUser.DataContext = user;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
User user = (User)gridUser.DataContext;
user.Name = "Jone";
user.Age = "28";
}
}
}
Demo展示:
本例参考自《Pro Silverlight 2 in C# 2008》CHAPTER 14 DATA BINDING
作者:李敬然(Gnie)
出处:{GnieTech} (http://www.cnblogs.com/gnielee/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
出处:{GnieTech} (http://www.cnblogs.com/gnielee/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。