WPF系列(1)WPF和XAML基础
终于下定决心开始更新WPF一个系列的文章,这里主要是出于两个目的,一是自己对所学的知识有一个系统的总结,二十希望能对其他人有些帮助,如果您觉得我写的不好,欢迎提意见。
那么既然我要开始写WPF,那我们就开始说说WPF的概念
什么是WPF?其实我们这里不想讲太多的WPF的概念,因为我们发现不管是MSDN,还是一些介绍WPF的书籍开篇介绍WPF的时候无不介绍了很多WPF的很多新特性,譬如WPF的布局系统,样式,模板等等,我个人觉得对于一个初学者,这些可能会打乱学习的节奏,所以我这里不准备像一般的书籍上那样介绍,我决定讲了一个系列之后,再回过头来写一篇总结,而不是在初学者什么都不懂的情况下就来一大堆的概念介绍。
我所理解的WPF是微软的新一代桌面图形呈现系统,直接操作DirectX渲染元素,使之具有更丰富的呈现,我们可以看看很多的网络游戏,具有多么绚的效果,利用WPF,我们也可以。利用WPF,我们可以绘制3D图形,实现动画,使用样式定义外观,更强大的数据绑定,当然,更重要的是,它是声明性编程。关于WPF只是简单的说到这里。它使用XAML声明界面,那么用XAML声明界面是什么意思呢。我相信许多人都有winfrom和ASP.NET的开发经验。我们再winfrom时代,所有的界面都是由程序员搞定的。几年前,在我刚开始学程序的时候,很多的java程序员总是笑话我们.net,说我们是控件的搬运工,除了会干干拖拖控件这种低级的技术活外不会点更高级的。当然,这里排除高手构建的系统。很多刚入行的兄弟的确是拖拖控件,然后写点代码,其实我们知道,在我们拖入一个控件的时候如下图
那么其实在Designer.cs文件里面,编译器会帮我们插入一些代码
this.button1.Location = new System.Drawing.Point(, );
this.button1.Name = "button1";
this.button1.Size = new System.Drawing.Size(, );
this.button1.TabIndex = ;
this.button1.Text = "Test Button";
this.button1.UseVisualStyleBackColor = true;
其实就是帮我们实例化了一个button,设置了一些属性比如位置,尺寸,文本等等。那么到了WPF,其实这些声明界面的工作都在一个XML文件中完成,这个XML文件其实就是XAML。
那么什么是XMAL?主要用于构造WPF的界面,用什么构造,其实还是用控件构建,只是这些控件的构造以声明性的方式开始,而不是以代码的方式,当然最后,.net还是会把文件里面声明的控件实例化,它会根据XAML文件构建一个控件树呈现在屏幕上。所以,我们也可以说,XAML是用来实例化.net对象的标记语言。上面我们说了,之前的界面都是由程序人员构建的,而且构建界面和界面的一些后置代码是不能完美的同时进行的。利用XAML,我们可以把界面的设计,绘制工作完全交给美工,然后我们关注特定的业务代码,因为WPF有一个强大的绑定机制和属性记住,所有的控件的状态都可以用数据来驱动,而不用像我们之前的方式那样编码改变对象的属性。原理就像我们的B/S结构的程序,界面由美工完成,我们负责编码。这样团队的协作更加紧密。界面的绘制我们可以使用VS,当然有更加专业的工具,Microsoft Bland.也有许多优秀的第三方工具,大家可以google一下。下面我们来一个最简单的WPF程序,我们从一个最简单的例子来讲解XAML。
在VS中,我们可以新建一个WPF项目,我的VS的版本为2012,我们分析新建的项目的文件结构
- App.config:配置文件,我相信大家都很熟悉
- App.xaml:管理我们的WPF应用程序,总体来说,是一个应用程序类,文件后缀以.XAML结尾,其实它也是有后置代码的,可以处理一些事件来控制应用程序的行为。前面我们的说了,XAML实际上是实例化对象的标记语言,那么我们当然可以使用声明的方式来实例化Application类,然后后置代码控制行为。以后会专门讲application
- MainWindow.xaml:窗体,这里我们暂且叫它为主窗体,因为是不是主窗体是有app.xaml控制的。前面的内容我们不需要知道怎么控制窗体为主窗体,后面会有主要的章节介绍。
这里我先提一点比较偏的面试题,我在一次面试中,我的leader问我XAML最后编译成了什么文件。这里解释一下,XAML会被编译为BAML(二进制应用程序标记语言)。这些BAML作为资源嵌入到最终的DLL或者EXE程序集中,微软对其进行了优化,而且体积更小,运行时可以更快的解析。下面我们来剖析一个窗体来学习使用XAML。
<Window x:Class="WPFSolutionInCnblogs.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="" Width="">
<Grid> </Grid>
</Window>
这里我们可以看到两个标签,一个是Window,一个Grid。按照我们上面所说,其实就是指定一个Window对象,跟XML文档一样,XAML也只能具有一个顶级元素,一般是Window,Page,Application,UserControl或者他们的继承类。注意,我们需要关闭 <Window>标签,跟标准的XML一样,是不是很像HTML文件,其实WPF的设计思想就是吸取了html布局的这一优点,另外,我们可以看到三个属性,这里其实就是设置我们的窗体的一些属性,比如标题,高和宽。Grid为WPF的布局元素,之后会讨论,Grid嵌套在Window标签中,说明在window对象里声明了一个布局对象。使用grid对象在window里面完成布局。
xmlns为名称空间,其实原理跟我们的C#中的命名空间一样的道理,在XML里面有一个名称空间的概念,其实也是为了区分标记的唯一性,我们可以把标记看成我们的类,同样是Person类,为了区分不同的类,我们使用了命名空间,其实这里也是一样的道理,对于一个标记而言,它也需要确定Window标记是属于谁定义的Window标记,可能,我们也会定义一个Window标记,所以XAML解析器需要知道标记位于哪一个名称空间。例如,我们可能会创建一个window类,那么这个时候,我们就要告诉编译器,使用的是哪一个window。而x:可以看成是我们C#中的命名空间别名,它告诉编译器,要使用别名指定的名称空间下的类。那么在标记的开始如果没有声明别名,一致指定http://schemas.microsoft.com/winfx/2006/xaml/presentation名称空间。
- http://schemas.microsoft.com/winfx/2006/xaml/presentation:WPF的核心命名空间,包含了所有的WPF类,包括用于构建WPF界面的控件,前面说了,如果没有指定名称空间前缀,那么整个文档的默认名称都是它
- http://schemas.microsoft.com/winfx/2006/xaml:XAML名称空间。它包含了各种XAML实用的特性,这些特性会影响文档的解释方式,告诉编译器遇到该特性的时候要采取什么行为。
那么我们为什么要使用这两个名称空间呢,原因有两个
- 避免了别的机构使用了相同的名称空间创建不同的基于XAML的语言,因为schemas.microsoft.com归微软所有
- 控件分布在不同的程序集中,如果不把名称空间集中在一起,会使文档变得很混乱
x:Class="WPFSolutionInCnblogs.UserControl1":这里指定后置代码,使用了x:前缀。以为这使用http://schemas.microsoft.com/winfx/2006/xaml名称空间中的Class特性。这个特性告诉解析器使用指定的类名生成一个新部分类。这里就是继承自window。然后跟标记文件的顶部元素生成的类合并为一个类。我们来看看后置代码类
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
我们可以看到在构造函数里面有一个InitializeComponent();方法,我们跟踪一些,最后可以看到这个方法调用System.Windows.Application.LoadComponent方法,那么这个方法是做什么的呢,我们看看摘要
// 摘要:
// 加载位于指定统一资源标识符 (URI) 处的 XAML 文件,并将其转换为由该 XAML 文件的根元素指定的对象的实例。
其实,就是实例化对象,实例化我们XAML定义的对象。它会从程序集里面提取BAML,并用它构建用户界面,因为前面我们说了,标记实际就是对象的展现形式,所以利用标记构建对象,设置属性,关联事件。这样,就从标记到代码构建出了我们的应用程序。
后置代码及Name和x:name的区别
通过x:class标记我们可以指定xaml的代码后置类,这个前面已经说了。类为部分类,部分类的概念我们很早之前就已经知道。我们可以通过后置引用xaml声明的控件,前提是控件必须标明Name或者x:name属性。我们这里顺便解释一下Name和x:name的区别。这里,很多人面试会问到这个问题。
Name可以唯一标识对象元素,以便我们在后置代码,或者在数据绑定的时候引用该对象,一般来说,控件是具有Name属性的。因为这个属性是定义在FrameworkElement里面的,而且这个属性使用RuntimeNamePropertyAttribute修饰。这个属性的MSDN解释是“指定某类中映射到 XAML x:Name 属性 (Attribute) 的属性 (Property)”。从根本上来说Name的实现还是使用了x:name。那么x:name又是什么呢
x:name:x:name是属于xaml的特性,也就是说它其实是属于xaml的产物。我们再来剖析,其实在开发时,XAML在某种程度上对后置代码是不透明的,因为构建对象的工作被隐藏起来,从根本上将他们就是一串XML,那么我们在后置代码中又需要使用我们再前端声明的对象,所以我们就需要一个机制建立二者之间的联系。我们在.net程序中做得比较多的事情就是实例化一个对象,然后使用这个对象。通过声明使用的呢?就是引用。这里既然说我们在前端声明了那么多的对象,而在后端我们又需要使用对象。所以我们就需要能够指向这些对象的引用。这里就解开了,x:name其实就是声明一个字段,并且这个字段保存对它所指的对象的引用。所以,从后台,我们可以通过引用获取这个对象。当然x:name是需要在名称范围内唯一的,名称范围的概念我们以后再说。
在一般的时候Name和x:name是可以互换的。但是在有些时候,我们WPF对象是没有name属性的,因为不是所有的对象都是继承于FrameworkElement。所以这个时候我们就需要使用x:name。
事件
在前端,WPF使用属性语法来附加事件处理程序。指定事件属性的对象就是事件的侦听者和调用者。事件处理程序在后置代码中。
下面我们完成一个最简单的按钮点击的WPF程序
<Window x:Class="FirstWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="" Width="">
<Grid>
<Button Name="MyButton" Width="" Height="" Content="Check Me!" Click="MyButton_Click_1"></Button>
</Grid>
</Window>
这里的Grid是布局控件,以后再讲到布局的时候我们会详细的介绍,我们在Grid内部声明了一个Button。设置了一些属性,指定了点击事件。事件处理程序在后置代码中
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
} private void MyButton_Click_1(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello WPF!");
}
}
当然,这几句代码是很简单的。前面我们对WPF做了最简单的介绍,我个人觉得下一代编程可能会侧重于声明性编程,安卓的界面开发其实也是同样的原理。XAML是微软几个重要开发的前端开发语言。比如Windows8和Windows Phone,当然还有SilverLight。所以,以后的章节。XAML可能介绍的会比较多。
WPF系列(1)WPF和XAML基础的更多相关文章
- [WPF系列]从基础起步学习系列计划
引言 WPF技术已经算不什么新技术,一搜一大把关于WPF基础甚至高级的内容.之前工作中一直使用winform所以一直没有深入学习WPF,这次因项目中使用了WPF技术来实现比较酷的展示界面.我在这里只是 ...
- WPF 基础到企业应用系列5——WPF千年轮回 续前缘
一.摘要 首先非常高兴这个系列能得到大家的关注和支持,前端时间身体状况不适,所以暂停了更新,对此表示非常抱歉,以后会逐渐加快进度.只是因为这是一个非常长的系列,我也想把它写好,所以以后也会慢慢来,在这 ...
- [WPF系列]基础学习(一) WPF是什么?
引言 学习之前,我们首先大概了解下WPF诞生的背景以及它所能解决的问题或者新颖之处.WPF作为微软新一代的用户界面技术, WPF简介 WPF的全称是WindowsPresentationFound ...
- WPF 基础到企业应用系列2——WPF前世今生
1.开篇前言 非常多时候了解一项新技术的历史和趋势往往比这项技术的本身价值还要重要.WPF作为一项新技术(已经三年多了.或者应该叫老技术了).我们都有必要了解它的来龙去脉,尤其是公司的CT ...
- WPF学习里程(二) XAML基础
1.什么是XAML? 官方语言: XAML是eXtensible Application Markup Language的英文缩写,相应的中文名称为可扩展应用程序标记语言,它是微软公司为构建应用程序用 ...
- WPF系列教程——(一)仿TIM QQ界面 - 简书
原文:WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM QQ 1. 准备 阅读本文假设你已经有XAML布局的基 ...
- [WPF系列]-数据邦定之DataTemplate 对分层数据的支持
到目前为止,我们仅讨论如何绑定和显示单个集合. 某些时候,您要绑定的集合包含其他集合. HierarchicalDataTemplate 类专用于 HeaderedItemsControl 类型以显示 ...
- WPF快速入门系列(6)——WPF资源和样式
一.引言 WPF资源系统可以用来保存一些公有对象和样式,从而实现重用这些对象和样式的作用.而WPF样式是重用元素的格式的重要手段,可以理解样式就如CSS一样,尽管我们可以在每个控件中定义格式,但是如果 ...
- WPF学习(2)XAML
XAML(eXtensible Application Markup Language,可扩展应用程序标记语言)是一种声明式的编程语言,遵循XML的语法.WPF使用XAML来设计UI具有易用性.高效性 ...
- 跟我一起学WPF(1):WPF的UI设计语言——XAML
XAML是什么 XAML全称是Extensible Application Markup Language (可扩展应用程序标记语言),是专门用于WPF技术中的UI设计语言. XAML基础 XAML是 ...
随机推荐
- CentOS6.8手动安装MySQL5.6(转)
1.安装mysql5.6依存包 2.下载编译包 wget https://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.35-linux-glibc2 ...
- linux-ssh登陆导语
用户登录前显示的导语信息(在你选择的文件中配置,例如 /etc/login.warn) 用户成功登录后显示的导语信息(在 /etc/motd 中配置) 如何在用户登录前连接系统时显示消息 当用户连接到 ...
- vue2入坑随记(一)-- 初始全家桶
都说Vue2简单,上手容易,但小马过河,自己试了才晓得,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前随便拿全局变量和修改dom的锤子不能用了,变换到关注数据本身.vue的 ...
- Windows反复重启的可能的解决办法
Windows反复重启,原因很多,下面提供两个可能的解决办法: 1. 查看BIOS中关于SATA的设置,一般只有两种PCIE和IDE,调整成另外一个试试: 2. 查看BIOS的启动模式,如果是UEFI ...
- JSON Web Token(JWT)使用步骤说明
在JSON Web Token(JWT)原理和用法介绍中,我们了解了JSON Web Token的原理和用法的基本介绍.本文我们着重讲一下其使用的步骤: 一.JWT基本使用 Gradle下依赖 : c ...
- CSS3新增伪类--好用的:target
问:如果让你实现下图,点击跳转后,让内容1增加一个背景颜色,你会怎么做呢? 可能很多小伙伴第一反应是用JS,给跳转绑定点击事件,然后用DOM获取到内容1,在给其添加css样式. 如果我跟你说用cs ...
- Mysql基本查询、视图、索引、触发器
基本查询 1.修改String sql="update smbms_user set userCode=?,userName=? where id=?"; 2.删除用户String ...
- 写给深圳首期Python自动化开发周未班的信
你是否做了正确的决定? 深圳首期周未班的同学们大家好,我是Alex, 老男孩教育的联合创始人,Python项目的发起人,51CTO学院连续2届最受学员喜爱的讲师,中国最早一批使用Python的程序员, ...
- 阿里___MQTT中协议QoS的实现
项目中用到了MQTT,由于MQTT中支持QoS,服务质量保证,在阿里面试的时候,问到如何设计QoS,一时糊涂,没有完全回答出来. 特点 MQTT - MQ Telemetry Transport ...
- 阿里妈妈前端团队出品的开源接口管理工具RAP第二代 http://rap2.taobao.org
RAP2-DELOS 开源社区版本 (后端API服务器) 项目地址:https://github.com/thx/rap2-delos RAP2是在RAP1基础上重做的新项目,它包含两个组件(对应两个 ...