UWP 开发初阶 Chapter 3 - 常用 XAML 基础控件及其相应常用属性介绍

787 阅读4分钟

正文

上一篇介绍了Grid和StackPanel两种容器,其中Grid可以分行又分列,而StackPanel在某些特殊情况下避免了很多麻烦,可以直接将控件推叠起来。

好啦!今天我们讲一讲一些常用的,基础的XAML控件和常用属性!

  1. TextBlock

这是用于显示文字的,学c和cpp等等的用控制台的朋友肯定都知道,那是直接console里面输出就行了。但到了可视化软件开发可就没那么简单了,我们就需要TextBlock

语法如下:

效果如下:

✨其中,Text里面就是你要它显示的文字,而Foreground里面是你字的颜色,FontSize是你的字体大小,FontWeight则是加粗等等字体的处理。TextWrapping是用来包裹你的文字的,啥叫包裹呢?

举个栗子🌰 如果你的文字很长,而用户将你软件的窗口调的比较窄,而你又没设置TextWrapping,则会出现如下图的效果:

后面多出来的文字没法显示了!

那这时候TextWrapping=“Wrap”的作用就出来啦!

如下图的效果:

✨除此之外,TextBlock还有很多妙用!

比如你想显示一个图案,怎么办呢?

这时候打开我们第一篇提到的开发辅助软件:字符映射表,下图这个:

打开后在左侧边栏内找到Segoe MDL2 Assets,如下图所示:

这其实就是一种字体,微软当年uwp钦定字体#(受虐滑稽)当然你喜欢哪个字体就用哪个#(受虐滑稽)

然后我要找我自己想要的图案了,比如我想要找个表示主页的按钮!我们在那个软件中点击我们想要的图标,如下图:

这时候看到XAML转移代码,复制下来。(下面两种代码也可以用来写图案,今后有机会再提)。然后我们来到vs中,如下图这么写:

其实注意了,就两处改动,其中Text的那个property改为刚刚复制的XAML转义符,然后FontFamily写Segoe MDL2 Assets。其实FontFamily表示的就是字体,里面填上你刚才使用的字体即可!

  1. TextBox

这就是用户的文本输入框,语法如下:

效果如下:

看!这就是一个用户可以输入文字的文本框,其中PlaceholderText指的是用户还没输入东西的时候,里面预先显示的文字。

  1. Button

顾名思义啦,按钮啦!代码如下:

效果如下:

✨这时候button里面显示的文字不再是Text属性,而是Content属性,foreground就自然是字的颜色啦,background就是按钮的背景颜色!至于如何处理按钮点击事件,我们下次再提。

PS:Button内也可以显示图案,方法和TextBlock里介绍的有异曲同工之妙,大家去试试吧!

好啦!几个最为基础的控件都介绍完了!

其实XAML提供了很多控件!

大家都可以在前言中提到的XAML Control Gallery中浏览一下各种控件的样子和代码以及一些常用属性。

比如ListView,GridView,Image,MediaElement,Flyout等等等等,其实都是我们常用的。

  1. 如何规定控件在Grid中的位置!

上篇提到了Grid可以分行分列,那么我们怎么规定控件在哪儿呢?

其实很简单,有两个属性叫做Grid.Column和Grid.Row,分别表示列和行的位置。

如下图:

这里面我就把这个button放在了Grid的第三行和第二列!为什么是第三行第二列,而不是第二行第一列?这和逻辑语言里面一样,序号是从0开始的,0表示第一行或第一列,一次类推。如果你不写明几行几列,XAML编译器会默认把你的控件都放在第一行第一列。

✨如何使得控件跨行或列?

XAML还有一个属性叫做Grid.RowSpan和Grid.Column Span,分别表示跨几行和跨几列。

举个栗子🌰:

这里面这个button就放在第三行第二列的同时,跨两行,跨三列!对!RowSpan和ColumnSpan是从1开始的,如果你不设定,默认是只跨1行1列,也就是说它只占用它所固定的位置。RowSpan为3则表示跨3行,以此类推。

✨你可以所有XAML控件设置在Grid中的位置(前提是你有先设定了Grid)

  1. 如何设置控件的对齐方式?

这时候,便引入XAML中的另一个属性,叫做HorizontalAlignment和VerticalAlignment,分别表示水平方向的对齐方式,和垂直方向的对齐方式。

举个🌰:

这个时候,我便把这个button水平方向上居中,垂直方向上位于顶部。我们也可以放在底部等等。

总结

别看我说这些都是简单控件,其实就比如TextBlock还有很多用法,我只是没有一一列举,大家感兴趣的话都可以自己摸索,毕竟vs宇宙第一IDE不是吹的,写XAML就跟做选择题一样,属性全都给你列出来!大家可以一个一个地去试试!

好啦谢谢大家!如有不懂或疑问,下方评论哈!

下篇见!