Windows Phone 十、数据绑定

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

数据绑定：是一种 XAML 和后台数据交互的方式（桥梁）

通过后台进行数据绑定

public class MainPageData
{
public string Value { get; set; }
}

MainPageData

public MainPageData Data { get; set; }
private void btnHello_Click(object sender, RoutedEventArgs e)
{
Data = new MainPageData();
Data.Value = DateTime.Now.ToString();
//当前页面对象，数据上下文可以被“继承”
this.DataContext = Data;
}

通过前台进行数据绑定

public class DataBindingPageData
{
public string Text1 { get; set; }
public string Text2 { get; set; }
}

DataBindingPageData

public sealed partial class MainPage : Page
{
//当前页面数据源
public DataBindingPageData Data { get; set; }
public MainPage()
{
//该操作必须在页面初始化之前
Data = new DataBindingPageData();
Data.Text1 = "Hello";
Data.Text2 = "World";
//界面元素初始化操作
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}

数据绑定的概念

namespace MyApp
{ /// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
//当前页面数据源
public DataBindingPageData Data { get; set; }
public MainPage()
{
//该操作必须在页面初始化之前
Data = new DataBindingPageData();
Data.Text1 = new SubData { Value = "Hello" };
Data.Text2 = "World";
//界面元素初始化操作
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
#region 数据绑定四个组成部分（目标.依赖属性｛绑定｝数据源.数据源属性）
//绑定桥梁（两头分别是谁）
Binding binding = new Binding();
//指定数据源和数据源属性
binding.Source = Data;
binding.Path = new PropertyPath("Text2");
//指定绑定的目标依赖属性
tb1.SetBinding(TextBox.TextProperty, binding);
#endregion
}
}
public class DataBindingPageData
{
public SubData Text1 { get; set; }
public string Text2 { get; set; }
}
public class SubData
{
public string Value { get; set; }
}
}

数据上下文（DataContext）

<Page.Resources>
<SolidColorBrush x:Key="color" Color="AliceBlue"/>

<local:ResourceBindingPageData
x:Key="myData"
Value="Hello World"/>
</Page.Resources>
<Grid DataContext="{StaticResource myData}">
<TextBox Text="{Binding Value}"/>
</Grid>

public class ResourceBindingPageData
{
public string Value { get; set; }
}

元素值绑定

数据绑定的数据源不仅仅可以是一个自定义对象，还可以使用 UI 元素对象

就是将一个界面元素对象作为绑定的数据源，轻松实现两个控件之间的交互

基本语法：

Width="{Binding ElementName=sliderDiameter, Path=Value}"

ElementName 就是指定数据源控件的 Name 属性

绑定数值类型转换

当数据源和目标属性类型或格式不相同时，比如URL链接，可以自定义两者之间的转换方式

具体就是实现 IValueConverter 接口

<Page.Resources>
<local:BookIdToBookUrlConverter x:Key="BookIdToBookUrlConverter"/>
</Page.Resources>
<Grid>
<TextBox Text="{Binding BookId,Converter={StaticResource BookIdToBookUrlConverter}}"/>
</Grid>

namespace MyApp
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
public ValueConverterPegaData Data { get; set; }
public MainPage()
{
Data = new ValueConverterPegaData { BookId = };
//Data.BookUrl = string.Format("http://www.itcast.cn/book/{0}", Data.BookId);
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
this.DataContext = Data;
} /// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// TODO: 准备此处显示的页面。 // TODO: 如果您的应用程序包含多个页面，请确保
// 通过注册以下事件来处理硬件“后退”按钮:
// Windows.Phone.UI.Input.HardwareButtons.BackPressed 事件。
// 如果使用由某些模板提供的 NavigationHelper，
// 则系统会为您处理该事件。
}
}
public class ValueConverterPegaData
{
public int BookId { get; set; }
public string BookUrl { get; set; }
}
public class BookIdToBookUrlConverter : IValueConverter
{
//从原数据转换成目标数据
public object Convert(object value, Type targetType, object parameter, string language)
{
return string.Format("http://www.itcast.cn/book/{0}", value);
}
//从目标数据转换成原数据
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}
}

IValueConverter接口实现数值类型转换

public class ValueToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var d = (double)value;
var b = (byte)d;
return new SolidColorBrush(Color.FromArgb(, b, b, b));
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}

绑定模式

OneTime：一次绑定，即数据上下文初始化时更新目标属性

OneWay：单向绑定，仅当数据源属性发生变更时更新目标属性

TwoWay：双向绑定，当目标属性发生变更通知数据源变更（同步）

数据变更通知（一）

使用自定义数据源进行数据绑定时，不管绑定模式是哪一种，都不会造成目标对象实时同步

如果想要实现数据变更实时同步，就必须要让自定义数据类型实现 INotifyPropertyChanged 接口

INotifyPropertyChanged 具有 PropertyChanged 的事件，在数据源被绑定时注册，数据源变更时被触发（需要自己写代码手动触发）

数据变更通知（二）

TwoWay 绑定会在目标和源中的任一个发生更改时同时更新目标和源

此行为的一个例外是，在每次用户击键之后，不会将 TextBox.Text 的更改发送给绑定源

除非将 Binding.UpdateSourceTrigger 设置为 PropertyChanged

默认情况下，仅当 TextBox 失去焦点时才发送更改

INotifyPropertyChanged 封装

public class NotifyPropertyChangedPageViewModel : ViewModelBase
{
public string Text1 { get; set; }
private string text2;
public string Text2
{
get { return text2; }
set
{
SetProperty(ref text2, value);
}
}
public double number;
public double Number
{
get { return number; }
set
{
SetProperty(ref number, value);
}
}
private string hello;
public string Hello
{
get { return hello; }
set
{
SetProperty(ref hello, value);
}
}
}
public abstract class ViewModelBase : NotifyPropertyChanged
{
protected void SetProperty<TProperty>(ref TProperty current, TProperty value, [CallerMemberName]string propertyName = null)
{
if (object.Equals(current, value))
{
//属性值没有发生变化，减轻应用程序负担
return;
}
current = value;
OnPropertyChanged(propertyName);
}
}
public abstract class NotifyPropertyChanged : INotifyPropertyChanged
{
/// <summary>
/// 当属性发生变化时调用
/// </summary>
/// <param name="propertyName"></param>
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null && !string.IsNullOrEmpty(propertyName))
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}

集合数据绑定（列表控件元素）

列表控件主要是 ListBox、ListView、GridView 等

为列表控件绑定数据不再是为 DataContext 属性赋值，应该使用列表控件自有的 ItemsSource 属性

当列表数据元素由 ItemsSource 绑定，就不能再动态操作（增删改） Items 属性

ObservableCollection<T>

绑定集合元素和普通绑定一样，界面显示默认不会跟随数据源变化而变化

如果要实现一个动态绑定的列表，通常我们需要用到 ObservableCollection<T> 类型作为数据源集合的类型

public sealed partial class MainPage : Page
{
public MainPageViewModel ViewModel { get; set; }
public MainPage()
{
ViewModel = new MainPageViewModel();
ViewModel.DateTimes = new ObservableCollection<string>();
for (int i = ; i < ; i++)
{
ViewModel.DateTimes.Add(string.Format("{0}\t{1}", i, DateTime.Now));
}
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{ }
private void Button_Click(object sender, RoutedEventArgs e)
{
//for (int i = 0; i < 20; i++)
//{
// //使用数据绑定过后不可以再使用这种形式添加数据
// list.Items.Add(DateTime.Now);
//}
var max = ViewModel.DateTimes.Count + ;
for (int i = ViewModel.DateTimes.Count - ; i < max; i++)
{
ViewModel.DateTimes.Add(string.Format("{0}\t{1}", i, DateTime.Now));
}
}
}
public class MainPageViewModel
{
//ObservableCollection可以做到数据与界面列表控件实时同步
public ObservableCollection<string> DateTimes { get; set; }
}

数据展示模版

列表控件中每一个列表项都是又一个默认展示结构的

我们可以通过设置每一个列表控件的 ItemTemplate 属性达到自定义模版的效果

数据展示模版使用

直接为特定 List 控件设置特殊的 DataTemplate

将 DataTemplate 定义到资源当中

public sealed partial class MainPage : Page
{
public MainPageViewModel ViewModel { get; set; }
public MainPage()
{
ViewModel = new MainPageViewModel();
ViewModel.DateTimes = new ObservableCollection<string>();
for (int i = ; i < ; i++)
{
ViewModel.DateTimes.Add(string.Format("{0}\t{1}", i, DateTime.Now));
}
ViewModel.Person = new ObservableCollection<Person>
{
new Person{Id=,Name="Hello"},
new Person{Id=,Name="World"},
new Person{Id=,Name="Hello World"}
};
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{ }
private void Button_Click(object sender, RoutedEventArgs e)
{
//for (int i = 0; i < 20; i++)
//{
// //使用数据绑定过后不可以再使用这种形式添加数据
// list.Items.Add(DateTime.Now);
//}
var max = ViewModel.DateTimes.Count + ;
for (int i = ViewModel.DateTimes.Count - ; i < max; i++)
{
ViewModel.DateTimes.Add(string.Format("{0}\t{1}", i, DateTime.Now));
}
}
}
public class MainPageViewModel
{
//ObservableCollection可以做到数据与界面列表控件实时同步
public ObservableCollection<string> DateTimes { get; set; }
public ObservableCollection<Person> Person { get; set; }
}
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public override string ToString()
{
return string.Format("id:{0};name:{1}", Id, Name);
}
}