Windows Phone 8.1 数据绑定

数据绑定的意义?

能够降低后台获取数据与XAML展示页面元素两者间的耦合度。

数据绑定有好多种形式,接下来一一陈述。



Demo One

首先做一个单一数据的绑定:在后台定义一个公共级别的自动属性,然后再XAML初始化语句执行前对该属性赋值,XAML初始化执行后,将当前数据放到数据上下文中,然后在前台页面就可以通过数据绑定拿到当前数据,具体代码如下:

1 public DateTime Time { get; set; }
2 public MainPage()
3         {
4            //初始化数据
5            Time = DateTime.Now;
6            this.InitializeComponent();
7            //一定要把数据绑定放在XAML初始化后面
8            this.DataContext = Data;
9         }

前台代码:

<TextBox x:Name="txt" Text="{Binding}" />

启动调试,我们就可以看到当前时间被绑定到了TextBox上。如果我现在有很多属性要绑定到前台元素上怎么办?



Demo Two

首先建一个ViewModel类,用来定义各种展示用的属性,假如我们前台需要展示人的各种信息,包括姓名、年龄、身高,首先定义一个PersonViewModel类(这是一个数据源),

1 public class PersonViewModel
2         {//Person数据源
3             public string Name { get; set; }
4             public int Age { get; set; }
5             public float Height { get; set; }
6         }

然后定义一个用于接受数据的属性,

public PersonViewModel PersonData { get; set; }

然后在构造函数中进行初始化,

1 //初始化数据
2 PersonData = new PersonViewModel { Name = "莴苣的宅森", Age = 24, Height = 175 };
3             this.InitializeComponent();
4             //将数据绑定到数据上下文 一定要放到XAML初始化语句后面
5             this.DataContext = PersonData;

最后在前台进行数据绑定,

1 <StackPanel>
2         <TextBox x:Name="txtname" Header="姓名" Text="{Binding Name}"/>
3         <!—这里的{Binding Name} 相当于{Binding Path=Name}-->
4         <TextBox x:Name="txtAge" Header="年龄" Text="{Binding Age}"/>
5 <!—假如Binding的属性下面还有子属性(也就是说绑定了一个class)那么想拿到该属性下面的属性就可以用”.”点出来-->
6         <TextBox x:Name="txtHeight" Header="身高" Text="{Binding Height}"/>
7 <!—假如Binding的属性是一个集合,那么也可以使用索引器的形式 属性[index] 进行数据绑定-->
8 </StackPanel>

运行结果如下图:

以上两个Demo都是通过后台赋值的形式把数据赋给了数据上下文DataContext,我们还可以在前台页面通过DataContext属性进行数据绑定。



Demo Three

将后台的

this.DataContext = PersonData;

语句注释掉,这个时进行调试Person的信息肯定是不会显示的,因为我们前台绑定数据需要从数据上下文DataContext拿到数据,这时候我们在Page节下增加一个DataContext属性

DataContext="{Binding PersonData,RelativeSource={RelativeSource Mode=Self}

,就可以以属性的形式给DataContext赋值,如果想要检验数据源是否正确,只需要在PersonData上按F12转到定义,如果转到的是后台数据源对应的自动属性

public PersonViewModel PersonData { get; set; }

,那么就说明DataContext成功赋值。用前台属性的方式绑定DataContext数据上下文要注意:在后台一定要先初始化数据,然后再初始化XAML,你想啊,XAML都初始化完了你再给DataContext赋值,是不是晚了。。

通过这种形式对数据进行绑定就可以完全将前后台分离开,我在后台只需要设置一下数据源,然后数据绑定的工作完全都在前台进行,不管前台元素是TextBox还是其他的控件都与后台没有关系。这样去开发代码分工明确,灵活性也高。

到这里你有没有产生一个疑问,我把DataContext艺术性的形式设置在Page节为什么 Page节下面的元素也能够绑定到数据?这是因为数据上下文DataContext是可以继承的,只要父级元素设置了数据上下文,其子级元素都能够使用这数据上下文,当然自己元素也可以绑定自己的或者重写父级的DataContext(DataContext有个就近原则)。

上面讲的都是使用自定义数据源进行数据的绑定,我们还可以使用UI元素进行数据绑定,这样还可以实现两个UI元素之间的交互。



Demo Four

1 <StackPanel>
2         <Slider x:Name="slider" Minimum="0" Maximum="100" Value="10"/>
3         <Rectangle Width="{Binding ElementName=slider,Path=Value}" Height="{Binding ElementName=slider,Path=Value}" Fill="Green"/>
4 </StackPanel>

定义一个Slider滑动条,通过滑块来控制矩形的大小,只需要绑定Rectangle的Width和Height属性,为ElementName 赋予控制者的Name,Path赋予控制者的值变化属性,即可与被控制者绑定起来,实现交互。

当数据源和目标属性的类型不相同时,例如前台需要一个string类型的数据,而我现在拿到的是一个int类型的数据,这时候就需要类型转换。要实现类型转换,可以新建一个转换工厂,他必须实现IValueConverter接口,在Convert方法下可以编写转换用的代码(ConvertBack也是用来编写目标数据的方法,这个方式是适用TwoWay绑定模式的)。

这里又谈到了绑定模式,上面几个Demo用的绑定模式都是Default即默认绑定模式,绑定模式还有OneTime、OneWay、TwoWay三种模式,下面用一个Demo解释这三种绑定模式的区别。



Demo Five

当我们滑动滑块,会发现只有OneTime的值是不变化的,Slider一开始设定的值是多少他就是多少,而在TwoWay的文本框中输入一个值会导致Slider、Normal、OneWay的值同样也发生变化。

前台源码:

 1 <Grid x:Name="LayoutRoot">
 2
 3         <Grid.RowDefinitions>
 4             <RowDefinition Height="Auto"/>
 5             <RowDefinition Height="*"/>
 6         </Grid.RowDefinitions>
 7
 8         <!-- 标题面板 -->
 9         <StackPanel Grid.Row="0" Margin="19,0,0,0">
10             <TextBlock Text="绑定模式" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0"/>
11             <TextBlock Text="绑定模式" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
12         </StackPanel>
13
14         <!--TODO: 应将内容放入以下网格-->
15         <StackPanel Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
16             <Slider x:Name="slider" Header="数据源" Grid.Row="0"/>
17             <TextBox Header="Normal" Text="{Binding ElementName=slider,Path=Value}"/>
18             <TextBox Header="OneTime" Text="{Binding ElementName=slider,Path=Value,Mode=OneTime}"/>
19             <TextBox Header="OneWay" Text="{Binding ElementName=slider,Path=Value,Mode=OneWay}"/>
20             <TextBox Header="TwoWay" Text="{Binding ElementName=slider,Path=Value,Mode=TwoWay}"/>
21         </StackPanel>
22 </Grid>
时间: 2024-11-06 09:27:46

Windows Phone 8.1 数据绑定的相关文章

分享一下我的部分毕设内容:基于Windows Phone平台的污染源管理应用

原文:分享一下我的部分毕设内容:基于Windows Phone平台的污染源管理应用 毕业半年,又总结了一下之前的工作,发现很多知识不复习都忘记了.最近新闻总是报道北京的空气污染,各种雾霾,各种PM X超标,然后想到以后我们有饭吃了(俺也算是搞环境的科班出身,本科环境科学专业),然后联系到本科的毕业论文,刚好做的是大气污染相关的,于是闲来和大家分享一下,也算是对自己的之前工作的一个总结. 论文主要做的一个基于Web和Windows Phone平台的污染预测和污染源管理的应用,大体的功能就是根据污染

ADO.net数据绑定

using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.In

WPF——数据绑定(一)什么是数据绑定

注意:本人初学WPF,文中可能有表达或者技术性问题,欢迎指正!谢谢! 一:什么是数据绑定? “Windows Presentation Foundation (WPF) 数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及与数据交互. 元素能够以 公共语言运行时 (CLR) 对象 和 XML 形式绑定到来自各种数据源的数据.“ 这一段的解释来自于MSDN(貌似是机器翻译),我个人理解,数据绑定就是把我们需要操作的两个或多个对象的属性值相互关联的一种方便我们编程的技术. 二:一个绑定关系的四

WinForm控件复杂数据绑定常用数据源(对Combobox,DataGridView等控件DataSource赋值的多种方法)

开始以前,先认识一下WinForm控件数据绑定的两种形式,简单数据绑定和复杂数据绑定. 1) 简单数据绑定 简单的数据绑定是将用户控件的某一个属性绑定至某一个类型实例上的某一属性.采用如下形式进行绑定:引用控件.DataBindings.Add("控件属性", 实例对象, "属性名", true); 2) 复杂数据绑定 复杂的数据绑定是将一个以列表为基础的用户控件(例如:ComboBox.ListBox.ErrorProvider.DataGridView等控件)绑

Windows API参考大全新编

书名:新编Windows API参考大全 作者:本书编写组 页数:981页 开数:16开 字数:2392千字 出版日期:2000年4月第二次印刷 出版社:电子工业出版社 书号:ISBN 7-5053-5777-8 定价:98.00元 内容简介 作为Microsoft 32位平台的应用程序编程接口,Win32 API是从事Windows应用程序开发所必备的.本书首先对Win32 API函数做完整的概述:然后收录五大类函数:窗口管理.图形设备接口.系统服务.国际特性以及网络服务:在附录部分,讲解如何

nomasp 博客导读:Android、UWP、Algorithm、Lisp(找工作中……

Profile Introduction to Blog 您能看到这篇博客导读是我的荣幸.本博客会持续更新.感谢您的支持.欢迎您的关注与留言.博客有多个专栏,各自是关于 Android应用开发 .Windows App开发 . UWP(通用Windows平台)开发 . SICP习题解 和 Scheme语言学习 . 算法解析 与 LeetCode等题解 .而近期会加入的文章将主要是算法和Android.只是其他内容也会继续完好. About the Author 独立 Windows App 和

WPF控件互相绑定参考代码

后台代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Window

实战基础技能(08)--------MVVM模式中WPF数据的完全绑定

一:截图,描述:将后台代码的姓名.年龄绑定到文本框,单击”增加年龄“--年龄自+1,单击”显示年龄“--弹出年龄的显示对话框,实现了从文本框修改年龄和后台更改年龄并显示到文本框 运行结果和解决方案管理截图如下: 二:person类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.ComponentModel; namespace 完全数据绑定 {

Windows App开发之集合控件与数据绑定

为ListView和GridView添加数据 ListView采用垂直堆叠得方式显示数据,而GridView则采用水平堆叠得方式. 长相的话嘛,它们都差不多. <Grid Name="grid1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <ListView x:Name="listView1" SelectionChanged="