贫民窟里的WPF系列讲座(一)

摘要:
最近讲了一套完整的WPF课程,感觉教学效果还很不错。这样初学者就可以把尽力关注在XAML的学习和WPF的性特性上,不用被庞大的VS折磨。好了,现在我们来正式开始我们的WPF学习之路。最后一个是显示比例调节。这里我尽可能的使我的课程起点第一点,主要也是因为我的起点很低,很多WPF的底层和原理我在这里都没有讲,我可能会在后面一个高级的专题里讲,但是这个专辑我是不会讲的。

最近讲了一套完整的WPF课程,感觉教学效果还很不错。我准备给MSDN录15期左右的事情,这几篇文章是配合视频一起来看的。我相信大家都是很喜欢研究新技术的,但是研究新技术的时候会遇到很多困难,譬如书籍的选择,工具的选择,环境的配置等等很多很多问题。

这里我结合自己学习的历程,分享一下。这里我说一下我当时学习的硬件条件,由于我的笔记本是IBM的T40,CPU是迅驰1.3内存768M,系统是WinXP SP2。大家如果机器好的化建议使用VISTA或者WINDOWS7,这样可以省略很多事情。

虽然我的机器很烂,但是我还是安装了VS2008,但是速度很慢,在痛苦之后,我终于找到了一个好东西XAMLPAD。这个东西小小的只有656k,可以随身携带,而且速度够快。最主要的是便于初学者学习。这样初学者就可以把尽力关注在XAML的学习和WPF的性特性上,不用被庞大的VS折磨。XAMLPAD是我第一个推荐的东西。

第二个需要准备的是MSDN,这个东东还是很有用的,软件开发技术学习必备工具。

最后一个要说的是DotNet Framework 3.5,本来VISTA和WINDOWS7是不需要安装的,但是由于现在DotNet Framework 3.5 SP1发布了,大家现在最好都安装一下SP1版本。

好了,现在我们来正式开始我们的WPF学习之路。

工欲善其事 必先利其器,所以我们先来了解一下我们将要使用工具贫民窟里的WPF系列讲座(一)第1张——XAMLPAD。它的一些特设功能我们将在后面会详细讲到,这里我们先介绍一下界面。我们首先看到的整个XAMLPAD有两个大块,下面一个区域是用来编写XAML代码的,而上面一个部分是用来显示代码的效果。在XAMLPAD最上面是一排工具按钮,第一个是自动分析模式,开启以后,当你出入XAML代码后会立即检查错误,否则的化只有点击第二个按钮“刷新”才能看到错误。错误信息会在最下面的状态栏里显示。接下来的是“打印”按钮“字体”按钮“字号”按钮。接下来两个按钮是和布局有关,第一个按钮用于隐藏和显示代码编辑区,第二个按钮是用来“显示可视化树”的。关于可视化树的概念我会很快在后面的章节讲到。最后一个是显示比例调节。

工具到这里就简单介绍完了,当然我们在后面还会就一些细节进行详细介绍。这里我尽可能的使我的课程起点第一点,主要也是因为我的起点很低,很多WPF的底层和原理我在这里都没有讲,我可能会在后面一个高级的专题里讲,但是这个专辑我是不会讲的。如果大家之前了解过HTML和XML会容易和轻松很多。

下面我们来编写大家的第一个WPF程序,似乎所有的程序都是从“HelloWord”开始的。我这里也写一个HelloWord好了,不过这不是我要讲得,大家把下面这段代码粘贴到XAMLPAD中的代码编辑区就可以看到传说中的“HelloWord”了。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >
<Label>Helloword</Label>
</Page>

不知道大家看到没有,这里我就不解释这个程序了,因为我后面会用一个比较复杂一点的程序来解释XAML的基本语法。

下面请大家把下面一段代码放入XAMLPAD中的代码编辑区,大家看看出现了什么。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Title = "THINKBANK" Background = "red">
<StackPanel>
<Label FontWeight = "Bold" FontSize = "20" Foreground = "White">
welcome to THINKBANK
</Label>
<Label>WPF系列讲座</Label>
<Label>Installed Chapters:</Label>
<ListBox>
<ListBoxItem>chapter 1</ListBoxItem>
<ListBoxItem>chapter 2</ListBoxItem>
</ListBox>
<StackPanel Orientation = "Horizontal" HorizontalAlignment = "Center">
<Button MinWidth = "75" Margin = "10">Help</Button>
<Button MinWidth = "75" Margin = "10">Ok</Button>
</StackPanel>
<StatusBar>You have successfully registered this product.</StatusBar>
</StackPanel>
</Page>

出现的是不是和上面我给出的贴图一样的红色界面。我们一起来看看XAML语言,它是一种基于 XML 且遵循 XML 结构规则的标记语言。我们看到的第一个是“Page”,这个表示我们做得东西在什么东西上展示出来,我们可以把开始和结束的两个“Page”都替换成“Window”注意第一个字母要大写。大家看到了什么——那个鲜红的界面不见了,取而代之的是一行字“Window content does not run in the XamlPad pane;click Refresh or press F5 to run in a separate window”。这个时候你点击“Refresh ”按钮或者按键盘上的“F5”键就会看到一个窗体。这个时候我们的XAML语言所制作出来的效果是在一个Window上的。后面我们还会遇到好多譬如“Canvas”等等。

接下来的部分是XAML中最纠结的部分,后面的那一长串东西看起来像是一个网址。实际上它是一个命名空间。仅仅是因为设计人员自己觉得方便,所以使用了http的格式,没有什么特殊的含义。我们往往会看到两个命名空间。

第一个声明将整个 Windows Presentation Foundation (WPF) 命名空间映射为默认命名空间:

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

第二个声明映射单独的可扩展应用程序标记语言 (XAML) 命名空间,通常将其映射为 x: 前缀。

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

如果大家难以理解,就记住就好了。实际上很长时间里,我也只是把他们粘贴到代码里。

贫民窟里的WPF系列讲座(一)第2张我们再向下看Title = "THINKBANK" Background = "red",Background大家很好理解了,就是背景色,大家跟换成“blue”看看,还可以换成“black”"yellow"等颜色看看。是不是背景色随着你的修改而发生了变化。而Title和“THINKBANK”大家可能找来找去也找不到,这个时候大家把"Page"在换成"Window",这个时候我们在运行看看,我们会在窗体上看到THINKBANK。

接下来的是<StackPanel>,这个是表示一种布局方式,后面有专门的一个章节讲解布局相关的内容。这里我只简单的介绍StackPanel。StackPanl是将子元素排列成一行的布局方式,可以选择沿水平或垂直方向排列。我们可以直观的看到后面的几个Label是一个接着一个的向下排列。

这里讲一下,很多没有接触过标记语言的读者可能不是很清楚,在XAML中元素都是一对一对的出现,有<StackPanel>就有</StackPanel>和它相对,这一对表示他的作用域。但是有人会看到在这对<StackPanel>中还有一对StackPanel,这一对改变了其中一对按钮的布局方式。要是不理解,后面在布局的时候我们在详细介绍。

接下来我们看看三个Label的代码

<Label FontWeight = "Bold" FontSize = "20" Foreground = "White">
welcome to THINKBANK
</Label>
<Label>WPF系列讲座</Label>
<Label>Installed Chapters:</Label>
后两个Label很好理解,放在中间的内容就是将要显示出来的内容。再来看第一个,在第一个里加了三个属性设定。FontWeight = "Bold"表示加粗,FontSize = "20"表示字号为20,Foreground = "White"表示背景色为白色。大家可以修改一下,看看效果。这里可能有人问那后两个的字号是多少呢,我可以告诉你是系统默认的。要是你问为什么是系统默认的,我可以告诉你,你很厉害,这里涉及到了依赖属性的一些问题,也是一个专题,我会在后面详细介绍这个问题。

接下来的是一个常用控件ListBox,详细的控件介绍后面也有详细的一个章节来讲解,这里也是简单的介绍。

<ListBox>
<ListBoxItem>chapter 1</ListBoxItem>
<ListBoxItem>chapter 2</ListBoxItem>
</ListBox>

在ListBox中的<ListBoxItem>包含的是ListBox中的元素,大家在两个<ListBoxItem>下面在加入一行<ListBoxItem>New chapter </ListBoxItem>,大家看看是不是ListBox中多了一项:)

接下来我们会看到一段复杂一点的代码,它主要实现的是两个横排的按钮。

<StackPanel Orientation = "Horizontal" HorizontalAlignment = "Center">贫民窟里的WPF系列讲座(一)第3张
<Button MinWidth = "75" Margin = "10">Help</Button>
<Button MinWidth = "75" Margin = "10">Ok</Button>
</StackPanel>

我们结合上面的代码和图来看看,在<StackPanel>中设置了两个属性Orientation = "Horizontal" 表示以水平的方式来排列子元素,HorizontalAlignment = "Center"表示水平方向对齐。<Button>中也加入了2个属性,MinWidth = "75" 表示的是最小的宽度。而Margin 是一个很特殊也很有用也是很容易出错的东东,它表示边间距。

最后一个是一个StatusBar,在状态栏上显示一行字。但是可能读者发现StatusBar下面还有东西,和其他的程序看起来不太一样,这样我们把程序改成window来看看。发现还是不行,这个时候,我们在window中加入一段代码SizeToContent = "WidthAndHeight"再看看(和Title = "THINKBANK" Background = "red"放在一起就可以了)。这个时候,window的窗体大小就和我们的摆放的控件的大小吻合了。

好了第一次的课程就到这里了,下一章节,我将讲解一下WPF和XAML的一些重要的概念。

免责声明:文章转载自《贫民窟里的WPF系列讲座(一)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇安装mariadbunity shader序列帧动画代码,顺便吐槽一下unity shader系统下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

WPF平台Grid控件性能比较

WPF官方发布第一个版本至今已经有10年了, 我们几乎在同时也开始了XAML开发。即使经过多年打造,我们依旧尝试提高:我们真的成功打造了高效灵活的控件吗?我没有在其他地方找到任何关于优秀的WPF表格性能比较的介绍,只有少量而年代久远的现在已经不存在的控件的讨论。这个新基准是一种尝试,用来在一些市场相对流行的控件比较中发现我们的优势和不足。 环境 这个基准创...

WPF模板概述(数据模板)

WPF中有三大模板ControlTemplate,ItemsPanelTemplate,DataTemplate. 其中ControlTemplate和ItemsPanelTemplate是控件模板,DataTemplate是数据模板,他们都派生自FrameworkTemplate抽象类。 1、ControlTemplate ControlTemp...

.NET 控件集 ComponentOne V2020.0 Update3 发布,正式支持 .NET 5

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台,并完美集成于 Visual Studio 的第三方控件集,包含 300 多种 .NET开发控件,可满足 WinForm、WPF、 UWP、ASP.NET MVC等七个 .NET平台的系统开发需求,并提供表格数据管理、数据可视化、报表、输入和编辑等七大功能,被誉为“.NE...

wpf prism加载独立模块实例

一、首先看看文件的组织架构 module1 module2生成dll某块。Shell来显示管理模块 二,看看关键bootstrapper类 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tas...

WPF转换器之通用转换器

WPF中的转换器是一个非常好的数据类型转换解决方案,实用和强大, 它的作用是将源数据转换为WPF自身需要的类型,对数据实体没有侵略性,会在项目工程中频繁使用。所以掌握转换器是WPF开发的必备技能。 我刚接触转换器的时候,没有考虑通用性,每次遇到一个转换需求都会去创建一个新的转换器,久而久之,项目中的转换器已多如牛毛 这当然是我无法容忍的,我决定用一种通用...

一起谈.NET技术,WPF 自定义快捷键命令(Command) 狼人:

     命令简介      WPF 中的命令是通过实现 ICommand 接口创建的。ICommand 公开两个方法(Execute 及 CanExecute)和一个事件(CanExecuteChanged)。Execute 执行与命令关联的操作。CanExecute 确定是否可以在当前命令目标上执行命令。如果集中管理命令操作的命令管理器检测到命令源中发...