界面组态

# 桌面可视化开发

介绍界面组态

# 安装Blend for Visual Studio 2017

双击打开“VS2017在线安装程序.exe”，然后点击“继续”（安装Blend for Visual Studio 2017时需要连接外网）

打开后我们可以看到需要安装那些功能的选择界面，这边我们主要勾选.NET桌面开发，这里已经默认为我们勾选好了Blend for Visual studio功能（如果没有安装.net 4.7.2环境这边也可勾选一起安装），当然还有一些其他的功能根据自己的需求勾选。

选择好后选择安装位置,然后点击安装（此处又gif图片）

安装完成后界面如下（如果没有账户，不推荐点击“创建一个”。因为点击“创建一个”会跳到浏览器里创建并且全是英文，而且创建的只是暂时试用，所以这边推荐登录微软账户永久使用）

直接点击登录如下图所示:有账户直接输入账户密码登录使用，没账户则点击“创建一个”

没有账户的用户点击“创建一个”创建新账户，如图所示：

输入你的电子邮件点击“下一步”，输入你设置账户的密码点击“下一步”（此处有gif）

查看你的邮箱填入微软发送的验证码点击“下一步”就行了

# 使用Blend for Visual Studio 2017

主界面全景

主界面全景图

# 功能区域说明

菜单栏

下面只介绍几个会用到的菜单选项

选项名称	功能说明
新建	可新建新的项目
打开	打开已有的解决方案或项目。
关闭	关闭当前打开的解决方案或项目，如果有修改，将会弹出保存询问。
保存	保存当前现实的文件内容，记住他的快捷键：Ctrl+s，你会经常用到。
全部保存	保存整个解决方案或项目。
退出	退出软件，按右上角的红×。

点击文件选项，可以看到该选项展开的功能内容，如下图：

点击视图选项，可以看到该选项展开的功能内容，如下图示：

这里可以打开需要用到的窗口，包括常用的解决方案资源管理器，对象和时间线以及属性窗口。

工具栏

工具栏也是我们必需接触的部分，它提供了类似PhotoShop的功能，如果您有使用PhotoShop的经验，那么一定对它似曾相识。现在我们来简要的讲下工具栏中常用图标的功能。

下面只介绍几个会常用到的选项

选项图标	选项名称	选项作用说明
	选择	可以用来选择页面上的控件
	平移	可以用来移动页面的位置，双击可将视角定位到页面中心
	缩放	左键点击可以放大页面，Alt+左键点击缩小页面
	几何控件	直接点击选择矩形控件，右击可选择其他矩形控件
	布局控件	直接点击选择Grid控件，右击可选择其他布局控件
	资产	可以选择任何控件，在搜索框中可以搜索到所需的控件

以选择CkeckBox为例，“资产”使用示意图如下：

功能页

我们只需要关注以下几个功能页

1.项目页

显示了当前打开的解决方案的文件和资源目录结构，我们可以方便快捷地查看和打开各种文件的结构和内容。双击以.xaml结尾的文件可以在视图区显示页面文件的内容。

1个xaml文件就是一个页面文件，当一个解决方案包含多个不同的页面时，通常会把它们分开装在不同的文件夹下。

2.时间和对象线

可以以条目的形式来显示界面上的元素还可以表达出他们的层次结构。

这个和PS的图层功能很相似，如果它们重叠的话，越下面的图层会把上面的图层覆盖。从个功能页里可以看到所有控件，如果您找不到一些有透明效果的控件，那么可以来这里来找它。

3.属性

属性功能允许您可以对控件的各种属性进行自定义设置，属性功能包含以下几个属性分类。

属性名称	属性功能
画笔	设置控件的背景(background)，边框(BroderBrush)等颜色。可以选用纯色或渐变。
布局	可以设置控件的宽度和高度，控件在页面中的位置。
文本	如果控件可以显示文本的话，可以在这里设置显示文本的字体，大小等其他相关属性。
外观	可以设置透明度(Opacity),边框大小（BroderThickness），以及滤镜效果(Effect)。
公共	说是普通，其实不同的控件所有的普通属性一般会有所差别，这里的差别会在后面的控件属性与布局说明有详细的说明。
转换	这个属性可以对控件的进行呈现变形，旋转，缩放，倾斜，中心点等属性进行设置。
AlarmCenter Properties	这个属性可以对控件进行表达式绑定的效果，后面在控件属性与布局说明中有详细的说明。

# 制作组态页面

模板工具的使用方法

建立一个新的项目首先使用页面模板工具“敢为工程配置工具”来生成一个新的组态页面文件，操作步骤如下：

a）打开“敢为工程配置工具.exe”，在左侧的“设备模版一览”中先选中某一设备，点击“添加设备”按钮可以添加本项目需要的设备，在右侧已添加的设备表格中，可以修改编辑除“驱动文件”之外的其他属性，可以删除一些已经选择的设备。

b）添加、编辑完本项目需要的设备后，点击“生成”按钮，遵循我司工程项目命名规范输入项目名称如“AlarmCenter.JFJK.****”，选择AlarmCenter运行程序将被安装的路径（默认为D:\AlarmCenter，选择安装路径是为了设置项目“引用”绝对路径，让生成的Blend项目文件放在任何位置都能正常打开），然后单击“确定”生成所需项目。 [敢为工程项目命名规范：AlarmCenter.领域代码.项目名称缩写，注意用英文句点.进行分隔；领域代码：JFJK：机房监控，IBMS：智能建筑，DLSD：电力隧道，ZNBDZ：智能变电站，JTSD：交通隧道，GSGL：高速公路；ZHGC：智慧工厂，ZHYH：智慧银行；项目名称缩写一般以项目名称拼音的第一个大写字母组成，但注意不要与做过的项目重合，如果有重合则适当加入全拼进行区别。

c）点击“打开文件位置”，可以看到在Output文件夹中有刚生成的本项目文件夹“AlarmCenter.IBMS.ZZDS”和Database.mdb数据库；其中数据库自动配置了已选设备相关的Equip,ycy,yxp,SetParm；GWEquipPages（一个模版设备默认自动配置一个页面，模版设备页面ID编号约定从101开始）。

VS2017模板添加说明

在我们用模板工具生成了一个新的项目后就可以开始组态了，但在之前我们还要做一个准备工作，步骤如下：

1）AlarmCenterAddinPage.zip 文件放在以下目录中 C:\Users\用户（个人）\Documents\Visual Studio 2017\Templates\ItemTemplates\Visual C#

2）AlarmCenterAddinTemplate.zip 文件放在以下目录中 C:\Users\用户（个人）\Documents\Visual Studio 2017\Templates\ProjectTemplates\Visual C#

注：项目新建页面时首先要用Visual Studio 2017 打开项目，新建页面后再用Blend for Visual Studio 2017进行编辑

# 控件说明

# 4.1布局控件

布局说明

在新建页面开始组态控件放置之前还需要在底层放置一个画布控件，来放置部署的控件，否则你添加的控件会以铺满整个页面的形式存在。

如下图所示：

右键工具栏的布局控件选择Canvas

选择Cancas后，鼠标变成十字。此时可以在界面的空白处来绘制控件，绘制过程：按下鼠标左键-----拖动鼠标-----松开鼠标左键。

放置完后还需要在属性---布局中设置它的高和宽，一般为1920，1020。（高度不是1080是因为页面的标题占了60，如果填1080页面2边会有大的空白区域）

添加完之后我们就可以在页面中放置各种控件来设计页面了！

Canvas

功能描述

1）功能特点

Canvas是一个画布，内部元素可以使用以像素为单位的绝对坐标进行定位。所有处于其内部的控件都可以通过设置控件的Left和Top等属性来确定控件在画布上的位置。如果你有留意，那么就会发现模板中的每个页面都会有一个Canvas控件。

Canvas使用的场合包括：

l 一经设计基本上不会再有改动的布局

l 艺术性比较强的布局

l 需要大量使用横纵坐标进行绝对点定位的布局

2）控件快照

从以下图示位置选择绘制一个Canvas

属性详解

Canvas这个控件几乎每个页面都会用到，那我们就一起来了解下它有哪些属性需要设置吧。

我们先了解它的画笔属性。恩，与大多数控件一样，但是由于它通常作为一个基本的容器来使用，这就使得它可以进行一些有趣的设置，首先，在页面制作中，Canvas通常会很大。1920X1020是个不错的尺寸，那么往往就会考虑给Canvas插入背景图片。

使用示例

从下图可以看出，Canvas包容了后面所有添加的控件。

注意对象和时间线面板中控件或对象，由于软件创建控件或元素的顺序是从上到下所以越在下面的控件或元素就会覆盖或遮掩在上面的元素。

Grid

功能描述

1）功能特点

Grid 是网格布局控件，可以对内容元素（即它的Children）,Grid的特点如下：

l 可以定义任意数量的行和列，非常灵活。

l 行的高度和列的宽度可以使用绝对数值，相对比例或自动调整的方式进行精确设定，并可设置最大和最小值。

l 内部元素可以设置自己的所在的行和列，还可以设置自己纵向跨几行，横向跨几列。

l 可以设置Children元素的对齐方向。

基于这些特点，Grid使用的场合有：

l UI布局的大框架设计。

l 大量UI元素需要成行或称列对齐的情况。

l UI整体尺寸改变时，元素需要保持固有的高度和宽度比例。

l UI后期可能有较大变更或扩展。

2）控件快照

从图示位置选择Grid，在页面空白处绘制。

属性详解

既然Grid是因其网格布局功能而得名，那么我们就来看一下关于如何定义行和列。

假设你已经在页面上绘制好了一个Grid，现在你还没有给它定义行和列。

注意它的布局面板，常规的设置控件的高和宽就不细说了，点击三角形的按钮展开布局面板，看到它的两个重要属性，ColumnDefinitions和RowDefinitions。这两个属性分别是行和列的集合，表示Grid定义了多少行和列。

接着我们来看一下如何定义多个行，点击RowDefinitions 属性后面"..."按钮，弹出如图窗体。然后点击'添加另一项'按钮(貌似会弹出一个什么错误提示，忽视之)。然后就可以看到在项这一列表中出现新项。一个新项代表一行。有几项就代表这个Grid定义了几行。

从项列表中选中任意一行，可以在右边的属性中看到这一行的定义，包括行高，最小最大值。

Grid可以设置三类值：

l 绝对值：数值后的选项为Pixel，也称固定值

l 比例值：数值后的选项为Star

l 自动值：选项为 Auto

绝对值的特点就是一经设定就不会再改变，所以又称为固定值，当控件的宽度和高度不需要改变或者使用空行，空列作为控件间隔时，绝对值是不二之选。

比例值是在数值后加一个星号("*")。解析器会把所有比例值的数值加起来作为分母，把每个比例值的数值作为分子，再用这个分数值乘以未被占用空间的像素数，得到的结果就是分配给这个比例值的最终像素数。比如一个150px的Grid，它包括5行，其中两行采用绝对值25px，其他三行分别是2，1，2，使用上面的计算方法，这三行分配像素数应该是40px，20px，40px。比例值最大的特点就是当UI的整体尺寸改变后，它会保持固有的比例。

下图为窗体尺寸由200X150变为200X300行高的变化，行高分别为25px，25px，2*，1*，2*。

从上面的变化我们可以看出，当改变容器的尺寸时，使用绝对值的行高不会改变。而使用比例值的行高会保持固有比例。而且，行高和列宽的默认形式就是比例值，所以如果没有显示制定行高或列宽时，默认值就是1*，1又可以简写为。

如果使用自动值(字符串”Auto“)为行高或列宽赋值，那么行高或列宽的实际值将由行列内的控件的高度和宽度决定，通俗点讲就是控件会把行列”撑“到合适的宽度和高度。如果行列中没有控件，则行高和列宽均为0。

使用示例

以下说明如何使用Grid来布局控件。

我在页面上绘制了一个250X200的Grid，它有2行，行高为1*，1*。3列，列宽为1*，1*，Auto(MinWidth = 50)。

如下图：

这样子，可以清晰地看到当前行和列的定义类型。将鼠标放在数值上点击下拉选项可以在3种类值之间切换。

除了修改行列的值类型外，还可以在界面上快速添加和删除行和列。当鼠标指向Grid边缘时会出现一层阴影，点击可以添加行或列。当鼠标指向已有的行定义线或列定义线的三角箭头时，鼠标会标称双向箭头，这时可以按住鼠标来拖动这一条定义线来改变行或列的值。在选中定义线的情况下，按下Del键，会删除这一行或列的定义。在选中定义线的情况下，在属性功能页可以看到这一行或列的定义。如图所示：

我往Grid里绘制GWButton按钮

注意：

1.Row是指控件在第几行，Column是指控件在第几列，行和列都是从0开始计数；

2.若控件需要跨多个行或列，设置控件的RowSpan或ColumnSpan属性，RowSpan指控件纵跨几行，ColumnSpan指控件横跨几列；

# 常用控件

ImageRadioButton

功能描述

1）功能特点

由其名字可以看出，这是一个可以带图片的单选按钮，它扩展了传统RadioButton的功能，不但提供基本的单选功能，还可以关联测点，显示对应的报警状态，也可以作为按钮使用，实现页面跳转。

2）控件快照

鼠标左键单击工具栏的资产选项，在弹出的选择框里在搜索框中输入ImageRadioButton即可找到ImageRadioButton控件。

选中ImageRadioButton后，鼠标变成十字。此时可以在界面的空白处来绘制控件，经过以下步骤：按下鼠标左键-----拖动鼠标-----松开鼠标左键。来完成绘制，绘制过程如下图所示：

不用奇怪为什么控件看起来没有任何内容，因为它是一个图片按钮，此时您还没有给它指定任何图片，所以它就像透明一样。

属性详解

下面将对各面板中常用的属性进行说明

AlarmCenter Properties 面板:

属性名称	属性值说明	使用说明
Image	指示处于非选中状态时显示的图片，值为要显示的图片的路径。	点击后面的“... ”按钮可以选择打开包含图片的文件夹，然后可以通过按钮左边的下拉框可以快速修改为在此文件夹中的其他图片。
AlarmExpression	报警表达式，在此属性中输入表达式，当表达式的值为真(true)时，控件变换到报警状态，呈现报警的状态的外观设置，当表达式的值为假(false)时，控件变换为正常状态，呈现正常的状态的外观设置。	达式的设置请参考后面的表达式解析。
AlarmImage	报警时显示的图片。	点击后面的“... ”按钮可以选择打开包含图片的文件夹，然后可以通过按钮左边的下拉框可以快速修改为在此文件夹中的其他图片。
AlarmStyle	有报警时图片的闪烁模式，此属性有两个选项，sty1e1是从正常图片过渡到报警图片的模式，style2是只有报警图片闪烁。默认是style1的模式。	此属性主要是选择有报警时图片的闪烁模式，当有报警时，如果想让控件从无报警图片与有报警图片之间来回显示，那么就选择style1，如果只想让它持续显示报警图片，那么选择style2。
CheckedImage	控件被选中时候的图片，因为控件是单选卡按钮，所以有选中与未选中状态之分，此属性就控制当控件被选中时显示的图片，如果不需要指向其它特别的图片，此属性应该保持和Image值一致。	点击后面的“...按钮可以选择打开包含图片的文件夹，然后可以通过按钮左边的下拉框可以快速修改为在此文件夹中的其他图片。
ClickCmd	单击控件时要执行的动作。1. 可以在此输入页面文件的名称，实现点击此控件进行页面跳转。2.可以执行Setparm,中的命令，如填入:S:3,5+4,2(S表示执行设置命令，可以有多种组合，用+号连接)。表示执行SetParm表中3号设备的5号设置点和4号设备的2号设置点。	在此处填入页面文件名称，将实现点击控件进行页面跳转的功能，如何填入规范的页面文件名称请参考后面的FAQ。

提示

ClickCmd属性实现点击控件进行页面跳转时可以采用例如：L:AlarmCenter.JFJK.JMEKTPage.JIMKTPageViewContent的方式。

使用示例

1）创建控件随意打开模板的任意一个 *.xaml页面文件，从控件箱选择ImageRadioButton，并在页面上绘制。如下图所示

2）添加图片

首先找到你建的项目下Images文件夹，把你想要的图片复制到该文件夹里。（图片不要引用项目文件外的，一定是要先把图片复制到项目的Images文件夹里，否则图片会找不到路径）；然后回到Blend for Visual Studio 2017软件，在解决方案中右键Images，选择添加现有项；找到该项目的位置，打开Images文件夹选择要添加的图片，这样我们就已经把需要的图片添加完毕。

3）设置图片

选择工具栏中的选择工具(就是一鼠标箭头)，选择我们在上一步绘制出来的ImageRadioButton，如果我们已经失去了它的踪影，可以在对线和时间线窗口中找到它。现在我们已经选中它，接下来我们要设置它的Image，CheckImage，AlarmImage，以及AlarmStyle 这4个属性。

单击Image属性后面的 “ˇ”按钮，1.png。执行相同的步骤来设置CheckImage属性。

按上述步骤设置AlarmImage的图片为2.png。并设置AlarmStyle为style1。设置好后我们可以看到控件很明显被拉伸，这时可以对控件的高度和宽度进行设置，这里我设置为高100，宽100。设置图片过程如图所示：

4）设置AlarmExpression（报警表达式）

现在我们就来实现下关联测点的功能，首先我们来绑定132号电气设备状态，是否有报警。

那么在控件的AlarmExpression属性中，我们应该填入如下设置

如果仅想知道视频中心的遥信点1号是否有报警的话，应该填入:$ASX(132,1) 。这样只要132号电气设备的1号测点有报警，那么控件就会进入报警状态。以上设置可以多个一起使用，如形成以下形式：

( $ASX(132,1) || $ASX(132,2) )，设备号和测点号之间是‘，’。它们是或的关系( '||' 是或关系符)，只要其中一个表达式为真，那么控件就处于报警状态。关于表达式的更多内容请参考后面的4.2.1.4表达式解析。

132号电气设备绑定表达式之后，当表达式为true时，如图所示：

ValueLable

功能描述

1)功能特点一个显示文本的控件,用于显示实时值或者状态，通过关联遥测量可以显示测点的实时值，关联遥信量可以显示实时状态，既简单又强大的功能。 2)控件快照鼠标左键单击工具栏的资产选项，在弹出的选择框里选择位置选项，在展开的控件集合中找到ValueLable。

选中ValueLabel后，鼠标变成十字。此时可以在界面的空白处来绘制控件，经过以下步骤：按下鼠标左键-----拖动鼠标-----松开鼠标左键。来完成绘制，绘制过程如下图所示：

属性详解

下面将对各面板中常用的属性进行说明

属性名称	属性值说明	使用说明
Background	正常状态的背景色。	位于画笔属性，设置当控件处于正常状态时的背景颜色。
Foreground	正常状态的文本的颜色。	位于画笔属性，设置当控件处于正常状态时的文本的颜色。
BordexBrush	正常状态的边框色。	位于画笔属性，设置当控件处于正常状态时的边框的颜色。
BorderThickness	控件边框的厚度。	位于外观属性，设置边框的厚度。
AlarmBackground	报警状态的背景色。	位于AlarmCenter Properties属性，设置当控件处于报警状态时的背景颜色。
AlaxrmBorderBrush	报警状态的边框色。	位于AlarmCenter Properties属性，设置当控件处于报警状态时的边框的颜色。
AlarmExpression	报警表达式，在此属性填入表达式，当值为真时，控件切换到报警状态并呈现报警显示，当值为假时，控件切换到正常状态并呈现正常显示。	位于AlarmCenter Properties属性，填入$E(26)=2. 表示当26号设备有报警为真时，控件切换到报警状态，如何填写表达式请参考4.1.1.4表达式解析。
AlarmForeground	报警状态的文本颜色。	位于AlarmCenter Properties属性，设置当控件处于报警状态时的文本的颜色。
CornerRadius	边框圆角的半径。	位于AlarmCenter Properties属性，在此输入圆角值可以使控件的呈现圆角。
ShowLinearBorder	是否显示过渡效果(顶部发光的效果)。	位于AlarmCenter Properties属性，保持默认即可。
ValueExpression	值表达式，在此属性填入数值表达式，可以显示表达式的数。如:$C(27,1),那么就会显示27号设备1号遥测点的数值。	位于AlarmCenter Properties属性，如何填写表达式请参考4.1.1.4表达式解析。

使用示例

1）创建控件

打开任意一个 *.xaml页面文件，从控件箱中选择ValueLabel，并在页面的空白处绘制控件。

2）关联遥测点

选中刚才绘制的控件，要关联遥测量要设置两个关键属性：AlarmExpression和ValueExpression。这两个属性都在属性功能页的公共属性面板中。

AlarmExpression填入表达式，当表达式值为true时，ValueLabel将会切换到报警状态，呈现报警的外观，当表达式的值为false时，ValueLabel将切换到正常状态，呈现正常外观。现在我要控件当14号设备的1号遥测点有报警时就呈现报警外观。那么要在AlarmExpression属性填入 $ASC(14,1)

要控件显示14号设备的1号遥测点的值，在ValueExpression填入$C1(14,1)

注意：一个ValueLabel只能关联一个遥测量或者遥信量

当ValueLabel绑定Ycp中的测点时，显示的值是数值+ ycp表中的unit字段的单位；当绑定yxp中的测点时，显示的值是【测点名】+【0到1事件】字段或【1到0事件】字段中的字符串。

3）自定义美化

完成了前面的几步，基本上就掌握了ValueLabel的核心功能，不过我们的工作还没有完成。可以预见，无论ValueLabel关联的测点是否有报警，ValueLabel的文本都是一样的外观，我们现在就来给它装扮一下，让它与众不同。

首先，一般的控件都是四四方方的，但是您注意了没有，在控件的AlarmCenter Properties面板中有一个 CornerRadius 属性，没错，它就是圆角属性。当它为0的时候，控件就是没有圆角，呈现砖头的外观，您可以在这里输入数值来设置圆角值。

要是我想让控件在关联的测点处于正常和报警状态时有不同的呈现方式，那咋办？

没问题，既然您看到了这里，那往下肯定给出了解决方法。

我们注意到，ValueLabel的AlarmCenter Properties面板中，比其他控件多出了几个笔刷属性。

AlarmBackground

AlarmForeground

AlarmBorderBrush

没错，正如它的命名一样，他们分别是控制了控件在报警状态下的背景颜色，字体颜色和边框颜色。说到这里您应该明白了吧。我们可以分别针对控件的正常状态和报警状态进行区别设置。具体的颜色设置这里就不多说了（可参考后面FAQ）。只说一下标准的颜色设置。

属性名称	属性值
AlarmBackground	#FFF80618
AlarmForeground	#FFFFFFFF
AlarmBorderBrush	#FF4035CE
Background	#FF0F1010
Foreground	#FFFFFFFF
BorderBrunsh	#FFEAFC0D

Q 为什么ValueLabel的笔刷属性比其他控件多

A 为了让ValueLabel在正常状态和报警状态下区别显示，所以控件可以针对这两种状态对背景颜色，字体颜色，边框颜色进行设置，所以笔刷属性就比其他没有正常和报警状态之分的控件要多。

其中Background , Foreground , BorderBrush 是正常状态下的颜色设置。而AlarmBackground ，AlarmForeground ，AlarmBorderBrush 则是报警状态下的颜色设置。

Q 我不清楚怎么改变控件的背景色，字体色或边框色

A 先选择要进行颜色调整的控件，然后看到它的属性功能页中画笔属性面板。假设要调整它的Background ，那么鼠标左键单击Background 这个属性，可以看到下方的颜色编辑器显示出了当前背景色的数值。如图：

Image

功能描述

1）功能特点没错，这就是一个装载图片的控件, 它只有 1个功能，就是显示图片 2）控件快照鼠标左键单击工具栏的资产选项，在弹出的选择框里在搜索框中输入Image，即可找到Image。选中Image后，鼠标变成十字。此时可以在界面的空白处来绘制控件，经过以下步骤：按下鼠标左键-----拖动鼠标-----松开鼠标左键。来完成绘制，绘制过程如下图所示：

属性详解

下面将对各面板中常用的属性进行说明

公共面板:

属性名称	属性值说明	使用说明
Source	指示要显示的图片。	点击后面的“...”按钮可以选择打开包含图片的文件夹，然后可以通过按钮左边的下拉框可以快速修改为在此文件夹中的其他图片。
Stretch	指示了图片在控件中的填充方式，这是一个枚举量，有以下值:None，原尺寸显示图片，从不缩放图片Fill，拉伸图片以填满控件。Uniform:保持图片横纵比例来缩放图片以适应控件。UiformToFill:保持图片横纵比例来缩放图片并尽可能填充控件	一般保持默认选择Uniform，使图片锁住横纵比例并显示全部图片内容。

使用示例

你已经绘制好了一个Image控件，现在我们来试着设置一下它的属性。选中Image控件，在它的公共属性中找到Source这一属性，点选后面的下拉选项来选择要插入的图片的路径。

给它指定了图片后还可以根据需要对图片进行大小，缩放，旋转等其它调整。关于Stretch 属性的设置请查看属性详解，这里就不重复了。

image设置如下图：

Rectangle

功能描述

1）功能特点

故名思议，就是一个矩形。在页面制作中经常被作为背景面板来使用。

2）控件快照

点击工具栏上的图形按钮，右键可以找到矩形，椭圆形和线，默认就是矩形。

在页面空白处绘制一个任意大小的矩形。我还给它设置了边框（#FFD91C1C）和填充颜色(#FF46DA21)，在外观属性的StrokeThickness可设置边框的粗细。

属性详解

功能较为简单，设置其背景，边框颜色和边框粗细。

使用示例

我们来看一下一般在页面制作中如何把它制作成背景面板(经典黑)，首先绘制好一个矩形。主要设置它的画笔中的Fill颜色。选中Fill属性，选择渐变画笔，有两个色标。第一个色标在0%位置，颜色值为#FF6C6C6C，第二个色标在3%位置，颜色值#FF3D3C3C。

如何多几个色标？在那个渐变色带上左键单击，你会在点击的色带的位置得到一个色标。色标可以移动到你需要的位置。也可以输入百分比位置来进行精确定位。

如何删除一个色标？选中你要删除的色标，按住色标往下拖，就可以删除色标。

TextBlock

功能描述

1）功能特点

一个显示文本的控件,一般用于显示说明性文本。

2）控件快照

属性详解

与Label一样，功能更简单，不过它的文本属性是叫做Text

TabTransitionControl

功能描述

1）功能特点

是一个分页控件，用于制作标签式页面或选项卡。有一个跟它很相似的控件，那就是TabControl，这个控件只是比TabTransitionControl少了一个翻页特效。

2）控件快照

属性详解

TabTransitionControl主要通过Items属性来添加包含或删除项元素。在这里我们主要给TabTransitionControl添加TabItem(分页项)来增加分页。TabTransitionControl除了可以添加TabItem外还可以添加许多其他的项。删除也很简单，选中要删除的分页，点击集合编辑器的×即可。

在AlarmCenter Properties中的LoopRestSeconds属性可以更改页面翻转的速度，TransitionDirection属性可以更改页面翻页的形式，如向右翻转，向左翻转等翻转特效。

使用示例

有时候我们一个页面要显示很多内容，而页面的位置却没那么多的时候我们就可以使用TabTransitionControl这个控件来进行翻页处理。

GWButton

功能描述

1）功能特点

GWButton 是可以执行控制命令的按钮，通过绑定表达式来执行指定的设置命令，通常使用在空调开关机或温度设置；软件中也有自带的Button按钮控件，但没有跳转页面和表达式属性，一般不建议使用。

2）控件快照

可以自己在布局和文本属性面板设置控件的大小和文字大小。

属性详解

下面对属性面板进行说明

画笔面板

属性名称	功能说明
Background	用于设置控件背景色
BorderBrush	用于设置控件边框颜色
Foreground	用于设置控件里的文字颜色

AlarmCenter Properties面板

属性名称	功能说明
BackgroundForFalse	表达式为false时背景画刷颜色
BackgroundForTrue	表达式为true时背景画刷颜色
ClickCmd	表达式为true时跳转的页面
ClickCmdForFalse	表达式为false时跳转的页面
ContentForFalse	表达式为false的按钮显示的文本
ContentForTrue	表达式为true的按钮显示的文本
FlashExpression	控件闪烁表达式，在有报警时控件的闪烁状态
StateExpression	控件状态表达式，在有报警时控件颜色显示为报警色