[Win8]Windows8开发笔记（八）：数据绑定的基础

先用一个最简单的例子来演示数据绑定。

新建一个项目TestData来测试，拖拽两个控件到屏幕上：TextBox和Slider。

给Slider的Name设置为slider1，然后我们给两个控件之间添加数据绑定，使得TextBox始终显示滑动条内的进度值。

然后给Text属性添加数据绑定，并且指定对象为slider1，完整代码如下：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBox HorizontalAlignment="Center" Margin="0,-100,0,0" TextWrapping="Wrap"
Text="{Binding Value, Mode=TwoWay, ElementName=slider1}" VerticalAlignment="Center"/>
<Slider x:Name="slider1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="30"/>

</Grid>

运行的结果就是1.拖动滑块时文本框的数值也随之改变2.文本框内容改变时滚动条也会跟着改变，这就是TwoWay：



那么怎么自己去写数据绑定呢？

新建一个Person类来试验一下。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TestData
{
class Person
{
public string Name
{
get;
set;
}

public int Age
{
get;
set;
}
}
}

然后在主页面拖拽一个TextBox和两个按钮，一个按钮用来读出Person的值，一个是用来修改Person的值：



先给TextBox命名为text1以便后面使用。

双击读取的按钮，跳转到了后台的c#文件。

在类中声明一个Person对象： Person myPerson = new Person();

然后在OnNavigatedTo方法中判断，如果是NavigationMode.New则设置text1的DataContent为前面声明的myPerson。

这里可以把DataContent理解为数据源。

然后点击按钮的监听方法里，将读取到的Person内容显示出来，在点击第二个按钮的时候将Person的name显示为当前的毫秒数值。

完整的代码如下：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍

namespace TestData
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{

Person myPerson = new Person(){ Name = "why" , Age = 20 };
public MainPage()
{
this.InitializeComponent();
}

/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.NavigationMode == NavigationMode.New)
{
text1.DataContext = myPerson;
}
}

private void Button_Click_1(object sender, RoutedEventArgs e)
{
MessageDialog myDialog = new MessageDialog(myPerson.Name);
myDialog.ShowAsync();
}

private void Button_Click_2(object sender, RoutedEventArgs e)
{
myPerson.Name = DateTime.Now.Millisecond.ToString();
}
}
}

然后在xaml页面设置textbox的数据绑定，将其绑定到数据源的Name属性上（前面设置的数据源）：

完整的xaml代码如下：

<Page
x:Class="TestData.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestData"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBox x:Name="text1" HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap"
Text="{Binding Name}" VerticalAlignment="Center"/>
<Button Content="读取" HorizontalAlignment="Center" Margin="0,-100,0,0" VerticalAlignment="Center" Click="Button_Click_1"/>
<Button Content="改变" HorizontalAlignment="Center" Margin="0,100,0,0" VerticalAlignment="Center" Click="Button_Click_2"/>
</Grid>
</Page>

运行项目，发现显示的是why，但是点击修改之后textbox中的值并没有改变，因为text不知道其中发生了变化。

那么如何在Name发生变化的时候立即得知？

我们需要修改Person这个类。

在数据绑定中，建议大家实现一个INotifyPropertyChanged接口。

它只有一个成员，就是PropertyChanged事件。

将set稍作修改即可。完整的Person.cs文件如下：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TestData
{
class Person : INotifyPropertyChanged
{
private string _name;
public string Name
{
get
{
return _name;
}
set
{
_name = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("Name"));
}
}
}

private int _age;
public int Age
{
get
{
return _age;
}
set
{
_age = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("Age"));
}
}
}

public event PropertyChangedEventHandler PropertyChanged;
}
}

此时再运行，点击修改的时候TextBox里面就会跟着变化了。



顺便说一下，绑定模式一共分三种，

OneTime：一次绑定

OneWay：单向绑定

TwoWay：双向绑定

子控件会默认继承父控件的绑定数据，这就是数据上下文的概念。

比如上面说到的绑定数据源，也可以写成：this.DataContext = myPerson;