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