先用一个最简单的例子来演示数据绑定。
新建一个项目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:双向绑定