Windows 8实例教程系列 - 数据绑定基础实例

简介: 原文:Windows 8实例教程系列 - 数据绑定基础实例  数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Store应用开发中,数据绑定是其开发特性之一,本文将讨论Windows 8应用开发数据绑定的使用。
原文: Windows 8实例教程系列 - 数据绑定基础实例

 

数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Store应用开发中,数据绑定是其开发特性之一,本文将讨论Windows 8应用开发数据绑定的使用。

快速理解数据绑定(Data Binding)

对于应用开发人员而言,无论是应用界面还是应用逻辑往往是为了简化用户对于数据层的操作,通过应用控件实现数据同步更新是最直接最简单的。但是在实际项目开发中,复杂的数据结构以及繁琐的数据操作使应用控件与数据交互难度增加,对此微软推出数据绑定实现应用控件直接同步更新数据。简单理解数据绑定,创建一个对象实例绑定到指定控件,通过DataContext的依赖关系,当对象实例数据改变时,同时自动刷新应用控件数据信息。

数据绑定代码

数据绑定基本代码格式:

<TextBox Text="{Binding LastName, Mode=TwoWay}"/>

以上代码实现绑定数据成员LastName到文本框的Text属性,其中LastName是数据成员属性。

实现数据绑定前,首先需要创建绑定数据对象属性,例如,

 public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
    }

然后在应用运行时,创建数据成员实例,

private void LoadAccount()
        {
            this.DataContext = new Person { FirstName = "Kevin", LastName = "Fan", Email = "qq34506@hotmail.com" };
        }  

这样既可实现简单绑定效果:

数据绑定模式

Windows Store应用支持三种数据绑定模式:

OneTime,一次性绑定,该方式只控件运行时第一次绑定数据,此后,数据源修改控件不在刷新;

OneWay,单向绑定,该方式当数据源更新时,控件同时更新数据,但是当控件数据更新时,数据源不更新;

TwoWay,双向绑定,该方式当数据源更新时,控件同时更新数据,而当控件数据更新时,数据源同样更新;

对比以上三种模式,TwoWay绑定较为常用,而默认情况下,OneWay是默认值。

在上例中,绑定LastName为TwoWay,双向模式,即当用户在控件中修改“姓”,数据源也同时被修改。

数据绑定实时修改 - INotifyPropertyChanged

数据绑定中,另外一个重要的概念是INotifyPropertyChanged接口,该接口用于当数据源与对象属性绑定时,绑定数据源修改,即通知当前UIElement控件并且更新数据。

例如,在Person.cs中实现INotifyPropertyChanged接口,可以发现该接口仅有一个事件PropertyChanged,使用RaisePropertyChanged实现该事件,

    public class Person : INotifyPropertyChanged
    {
        public string FirstName { get; set; }

        private string _lastname;
        public string LastName 
        {
            get { return _lastname; }
            set
            {
                _lastname = value;
                RaisePropertyChanged();
            }
        }

        public string Email { get; set; }

        private void RaisePropertyChanged([CallerMemberName] string caller = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(caller));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }

在绑定页面添加“更新”button, 其代码:

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            person.LastName = "";
        }   

当点击更新时,Person数据源改变,INotifyPropertyChanged接口通知控件Text="{Binding LastName, Mode=TwoWay}",修改数据内容。

该接口对于实时数据绑定更新非常有用,在后文将经常使用。

Element数据绑定

上文讲述是对象实例与数据源的绑定实例。Windows Store应用同时支持控件与控件间属性绑定,例如,实现CheckBox的IsChecked属性与ProgressRing的IsActive属性的绑定,代码如下:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Left">
                <TextBlock Text="运行进度:"
                           VerticalAlignment="Center"
                           Margin="0,0,20,0" />
                <Border BorderThickness="1"
                        BorderBrush="#44000000"
                        Padding="10">
                    <ProgressRing x:Name="ProgressRing1"
                                  IsActive="{Binding IsChecked, ElementName=chkRun}" />
                </Border>
            </StackPanel>
            <CheckBox Name="chkRun"
                      Content="运行?" />
        </StackPanel>
    </Grid>

其中绑定代码中的绑定成员使用Element对象属性名,并且附加ElementName。

<ProgressRing x:Name="ProgressRing1" IsActive="{Binding IsChecked, ElementName=chkRun}" />

运行效果如下,选中运行CheckBox,运行进度开始:

 

数据绑定与数据转换(Data Converter)

在Windows 8 XAML实例教程中曾讲述过数据转换器的创建和使用,XAML实例教程系列 - 类型转换器(Type Converter)

当时代码是使用VS2012 RC和Windows 8 RP版本创建,所以,本篇代码进行转换到VS2012和Windows 8正式版。

 

Windows 8数据绑定控件

为了方便应用开发,微软为开发人员提供了许多数据绑定控件,通过以上绑定方式设置,可以快速的将数据成员集合绑定到对应控件。

ComboBox控件

前台代码:

 <ComboBox SelectionChanged="cbUserList_SelectionChanged_1" DisplayMemberPath="FullName" />

后台代码:

public sealed partial class MainPage : Page
    {
        public List<Person> Users { get; set; }

        public MainPage()
        {
            this.InitializeComponent();
            LoadUsers();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void cbUserList_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            SelectionGrid.DataContext = (e.AddedItems[0] as Person);
        }

        private void LoadUsers()
        {
            Users = new List<Person>();

            Users.Add(new Person { FirstName = "Kevin", LastName = "Fan", Email = "qq34506@hotmail.com" });
            Users.Add(new Person { FirstName = "中国", LastName = "银光", Email = "Admin@silverlightchina.net" });
            Users.Add(new Person { FirstName = "Mike", LastName = "Li", Email = "zhangsn@gmail.com" });
            Users.Add(new Person { FirstName = "Sandy", LastName = "Yang", Email = "SandyY@yahoo.com" });

            cbUserList.ItemsSource = Users;
        }
    }

 

ListBox控件

 

前台代码:

<ListBox SelectionChanged="lbUserList_SelectionChanged_1" ItemsSource="{Binding Users}" DisplayMemberPath="FullName" />

后台代码:

public sealed partial class MainPage : Page
    {
        public List<Person> Users { get; set; }

        public MainPage()
        {
            this.InitializeComponent();
            LoadUsers();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void lbUserList_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            SelectionGrid.DataContext = (e.AddedItems[0] as Person);
        }

        private void LoadUsers()
        {
            Users = new List<Person>();

            Users.Add(new Person { FirstName = "Kevin", LastName = "Fan", Email = "qq34506@hotmail.com" });
            Users.Add(new Person { FirstName = "中国", LastName = "银光", Email = "Admin@silverlightchina.net" });
            Users.Add(new Person { FirstName = "Mike", LastName = "Li", Email = "zhangsn@gmail.com" });
            Users.Add(new Person { FirstName = "Sandy", LastName = "Yang", Email = "SandyY@yahoo.com" });

            lbUserList.ItemsSource = Users;
        }
    }

 

本篇源代码

欢迎留言交流学习,加入QQ群交流学习:

22308706(一群) 超级群500人 
37891947(二群) 超级群500人 
100844510(三群) 高级群200人 
32679922(四群) 超级群500人 
23413513(五群) 高级群200人 
32679955(六群) 超级群500人 
88585140(八群) 超级群500人 
128043302(九群 企业应用开发推荐群) 高级群200人 
101364438(十群) 超级群500人 

68435160(十一群 企业应用开发推荐群)超级群500人

目录
相关文章
|
27天前
|
NoSQL Redis 数据安全/隐私保护
Redis 最流行的图形化界面下载及使用超详细教程(带安装包)! redis windows客户端下载
文章提供了Redis最流行的图形化界面工具Another Redis Desktop Manager的下载及使用教程,包括如何下载、解压、连接Redis服务器以及使用控制台和查看数据类型详细信息。
77 6
Redis 最流行的图形化界面下载及使用超详细教程(带安装包)! redis windows客户端下载
|
15天前
|
存储 弹性计算 运维
阿里云国际Windows操作系统迁移教程
阿里云国际Windows操作系统迁移教程
|
27天前
|
NoSQL Redis 数据库
Redis 图形化界面下载及使用超详细教程(带安装包)! redis windows下客户端下载
文章提供了Redis图形化界面工具的下载及使用教程,包括如何连接本地Redis服务器、操作键值对、查看日志和使用命令行等功能。
81 0
Redis 图形化界面下载及使用超详细教程(带安装包)! redis windows下客户端下载
|
3月前
|
Linux 数据安全/隐私保护 Windows
【JumpServer教程】简便添加Windows资产:JumpServer堡垒机使用指南
本文是JumpServer堡垒机使用指南,介绍了如何在JumpServer中简便添加Windows资产的步骤,包括准备工作、开启Windows远程设置、在JumpServer中配置Windows资产以及授权使用。
542 1
【JumpServer教程】简便添加Windows资产:JumpServer堡垒机使用指南
|
3月前
|
计算机视觉 Windows Python
windows下使用python + opencv读取含有中文路径的图片 和 把图片数据保存到含有中文的路径下
在Windows系统中,直接使用`cv2.imread()`和`cv2.imwrite()`处理含中文路径的图像文件时会遇到问题。读取时会返回空数据,保存时则无法正确保存至目标目录。为解决这些问题,可以使用`cv2.imdecode()`结合`np.fromfile()`来读取图像,并使用`cv2.imencode()`结合`tofile()`方法来保存图像至含中文的路径。这种方法有效避免了路径编码问题,确保图像处理流程顺畅进行。
252 1
|
26天前
|
存储 NoSQL MongoDB
MongoDB入门级别教程全(Windows版,保姆级教程)
一份全面的MongoDB入门级教程,包括在Windows系统上安装MongoDB、使用MongoDB Shell和Compass GUI进行数据库操作,以及MongoDB的基本数据类型和查询技巧。
55 2
MongoDB入门级别教程全(Windows版,保姆级教程)
|
27天前
|
Java Windows
如何在windows上运行jar包/JAR文件 如何在cmd上运行 jar包 保姆级教程 超详细
本文提供了一个详细的教程,解释了如何在Windows操作系统的命令提示符(cmd)中运行JAR文件。
435 1
|
5月前
|
安全 Java 测试技术
Windows电脑安装Apache JMeter的详细教程
本文介绍了在Windows上安装Apache JMeter的步骤。首先,需确保安装Java JDK并配置环境变量。然后,从JMeter官网下载ZIP文件,解压至指定目录,并同样配置JMeter的环境变量。验证安装成功后,可通过命令行以GUI或非GUI模式启动JMeter,进行性能测试。
117 0
|
5月前
|
NoSQL 前端开发 MongoDB
[保姆级教程]Windows安装MongoDB教程
【6月更文挑战第4天】该内容是关于MongoDB的安装包下载及安装步骤指南。首先,访问网址 &lt;a href=&quot;https://www.mongodb.com/try&quot; target=&quot;_blank&quot;&gt;https://www.mongodb.com/try&lt;/a&gt; 进入官网,选择MongoDB Community Edition(社区版)。接着,挑选合适的版本和系统平台,推荐下载zip压缩包。下载后,进行安装,依次点击“Next”同意协议,选择自定义安装路径,然后继续安装直至完成。
574 0
|
24天前
|
数据可视化 程序员 C#
C#中windows应用窗体程序的输入输出方法实例
C#中windows应用窗体程序的输入输出方法实例
23 0