跟我一起学WPF(1):WPF的UI设计语言——XAML
XAML是什么
XAML全称是Extensible Application Markup Language (可扩展应用程序标记语言),是专门用于WPF技术中的UI设计语言。
XAML基础
XAML是基于XML的,且XAML是以一个树形结构作为整体,与HTML的DOM树类似,如果你对XML了解的话,看到XAML应该会有一种亲切感,同时也能很快的掌握。
为了更直观的了解XAML的语法规则,我们新建一个WPF项目。
打开VS,通过文件>新建>项目菜单或者通过Ctrl+Shift+N快捷键打开新建项目窗口。项目名称改为:WpfExam,单击确定按钮。
打开Window.xaml,我们会看到如下代码
<Window x:Class="WpfExam.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>
一、基本语法
同XML类似,XAML中最基本的语法元素就是标签、属性、内容。
1、标签
标签是通常是以<>开始,以</>结束的,一个标签的声明通常表示一个对象。如<Window></Window>、<Grid></Grid>分别定义了一个窗体对象及一个Grid对象,标签定义有两种常用写法:
非自闭合签:<Window></Window>、<Grid></Grid>
自闭合标签:< Window />、 <Grid/>这种自闭合标签用于无内容情况下,可以让代码看上去更简洁,当然,正常情况下Window及Grid都是有内容的。
2、属性
属性通常以键值对形式出现,如<Window><Window/>标签中的Title="MainWindow" Height="350" Width="525",等号左边表示Window标签的属性,等号右边表示该属性的值。
3、内容
一组标签对之间夹杂的文本或其他标签都称为这个标签之间的内容。此处Window标签的内容就是一个<Grid><Grid/>标签
二、命名空间
细心的朋友肯定会问<Window>标签里的
x:Class="WpfExam.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
这些奇奇怪怪的类似网站地址的是什么东东,难不成也是属性?没错,它们的确算是Window的属性,但他们又有自己独特的含义,基本上我们在WPF中新建任何窗体、用户控件,这三个属性都会出现。我们分别介绍这三个属性的是什么意思。
x:Class="WpfExam.MainWindow":这里指定了我们XAML窗体界面对应的C#类,是WpfExam命名空间下的MainWindow这个分部类。
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation":表示引用wpf界面表现相关的命名空间,类似于我们C#类中的using。
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml":表示引用xaml相关的命名空间。
这个xmlns:x中的x只是一个默认的标识符,如果我们将他改成y的话,编译我们的程序,将会报错找不到属性Class,此时我们就需要将x:Class="WpfExam.MainWindow"修改为y:Class="WpfExam.MainWindow"。
同样,如果我们将xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"也增加一个标示符号的话,假如我们改成xmlns:a="http://schemas.microsoft.com/winfx/2006/xaml/presentation",那么将会提醒你找不到类型
Window、Grid,你需要标签<Window>、<Grid>替换为<a:Window>、<a:Grid>
XAML应用示例
要求:实现一个简单的如下图所示的计算器界面。
我们这里主要在刚才新建的项目基础上进行修改,主要使用默认的Grid容器进行布局。实现代码如下:
<Window x:Class="WpfExam.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.RowDefinitions>
<RowDefinition Height="95*"/>
<RowDefinition Height="224*"/>
</Grid.RowDefinitions>
<DockPanel>
<TextBox TextWrapping="Wrap" Background="AliceBlue"/>
</DockPanel>
<Grid Grid.Row="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Button Grid.Row="" Grid.Column="" Content="清除" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="退格" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="/" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="*" FontSize=""/> <Button Grid.Row="" Grid.Column="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="-" FontSize=""/> <Button Grid.Row="" Grid.Column="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="+" FontSize=""/> <Button Grid.Row="" Grid.Column="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.RowSpan="" Grid.Column="" Content="=" FontSize="" Background="Orange"/> <Button Grid.Row="" Grid.Column="" Grid.ColumnSpan="" Content="" FontSize=""/>
<Button Grid.Row="" Grid.Column="" Content="." FontSize=""/>
</Grid>
</Grid>
</Window>
此篇我们只重点介绍xaml语言的基本语法,并使用基本的布局元素Grid、Button、TextBox等实现了一个简单的计算器的界面。
具体xaml里都有哪些标签、属性等具体细节问题,将结合wpf布局控件详细介绍。下一篇让我们一起学习WPF中的控件及布局技巧。
跟我一起学WPF(1):WPF的UI设计语言——XAML的更多相关文章
- 学美工、平面设计、UI设计,哪个有前途?
首先,在分析学美工.平面设计.UI设计,哪一个更有前途的时候,先要对三类设计有一个大概的了解. 比如“学美工.平面设计.UI设计是什么”等知识,才能更好地去进行选择. 01 阐述美工.平面设计.UI设 ...
- 学习WPF——了解WPF中的XAML
XAML的简单说明 XAML是用于实例化.NET对象的标记语言,主要用于构建WPF的用户界面 XAML中的每一个元素都映射为.NET类的一个实例,例如<Button>映射为WPF的Butt ...
- 使用WPF来创建 Metro UI程序
本文转载:http://www.cnblogs.com/TianFang/p/3184211.html 这个是我以前网上看到的一篇文章,原文地址是:Building a Metro UI with W ...
- WPF应用程序支持多国语言解决方案
原文:WPF应用程序支持多国语言解决方案 促使程序赢得更多客户的最好.最经济的方法是使之支持多国语言,而不是将潜在的客户群限制为全球近70亿人口中的一小部分.本文介绍四种实现WPF应用程序支持多国语言 ...
- WPF编程-WPF体系结构
WPF简介 Windows Presentation Foundation(WPF)是微软新一代图形系统,运行在.NET Framework 3.0架构下,为用户界面.2D/3D 图形.文档和媒体提供 ...
- WPF保存包含Winform控件的XAML页面问题
原文:WPF保存包含Winform控件的XAML页面问题 最近的工作中,用到了WPF调用Winform控件 但是在保存XAML页面的时候发现了问题,就是Winform页面黑黑的,没有任何渲染的波形曲线 ...
- 【WPF】WPF截屏
原文:[WPF]WPF截屏 引言 .NET的截图控件在网上流传得不多啊,难得发现一个精品截图控件( 传送门),但是无奈是winform的.后来又找到一个周银辉做的WPF截图(继续传送门),发现截屏是实 ...
- WPF 支持的多线程 UI 并不是线程安全的
原文:WPF 支持的多线程 UI 并不是线程安全的 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载.使用.重新发布,但务必保留文章署名吕毅(包含链 ...
- WPF中Style文件的引用——使用xaml代码或者C#代码动态加载
原文:WPF中Style文件的引用--使用xaml代码或者C#代码动态加载 WPF中控件拥有很多依赖属性(Dependency Property),我们可以通过编写自定义Style文件来控制控件的外观 ...
随机推荐
- [洛谷P3292] [SCOI2016]幸运数字
洛谷题目链接:[SCOI2016]幸运数字 题目描述 A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念碑的形式矗立在这座城 ...
- ETL testing
https://www.tutorialspoint.com/etl_testing/index.htm querysurge-installer-6.0.5-linux-x64 测试ETL的工具.
- JS设计模式——9.组合模式
组合模式概述 组合模式是一种专为创建Web上的动态用户界面量身定制的模式.使用这种模式可以用一条命令在多个对象上激发复杂的递归的行为. 它可以用来把一批子对象组织成树形结构,并且使整棵树都可被遍历.所 ...
- 差分约束系统专题 && 对差分约束系统的理解
具体能解决的问题: 求最长路,最短路,或者判断解是否存在. 在建边的时候: 一般是给你区间减法的关系,或者是这个点到另一个点的关系.如果给你的关系是除法的话,我们可以通过使用两边同时取log的方式,将 ...
- UNIX环境高级编程 第13章 守护进程
守护进程daemon是一种生存周期很长的进程.它们通常在系统引导时启动,在系统关闭时终止.守护进程是没有终端的,它们一直在后台运行. 守护进程的特征 在Linux系统中,可以通过命令 ps -efj ...
- AtCoder ARC 090 E / AtCoder 3883: Avoiding Collision
题目传送门:ARC090E. 题意简述: 给定一张有 \(N\) 个点 \(M\) 条边的无向图.每条边有相应的边权,边权是正整数. 小 A 要从结点 \(S\) 走到结点 \(T\) ,而小 B 则 ...
- Perl6 必应抓取(2):最终版
use HTTP::UserAgent; use URI::Encode; Firefox/52.0>); my $bing_url = 'http://cn.bing.com/search?q ...
- XSS练习小游戏和答案参考
源码:https://files.cnblogs.com/files/Eleven-Liu/xss%E7%BB%83%E4%B9%A0%E5%B0%8F%E6%B8%B8%E6%88%8F.zip 感 ...
- Linux USB驱动学习总结(一)---- USB基本概念及驱动架构
USB,Universal Serial Bus(通用串行总线),是一个外部总线标准,用于规范电脑与外部设备的连接和通讯.是应用在PC领域的接口技术.USB接口支持设备的即插即用和热插拔功能.USB是 ...
- Python之容器类Collections
容器类Collections 标签(空格分隔): Python进阶 defaultdict counter deque namedtuple defaultdict defaultdict的作用是可以 ...