4、创建第一个画面模板：新建模板画面、设置画面属性、定义模板布局结构
好，咱们正式开始动手了。
前面几章聊了那么多理论，什么复用思想、项目标准化、模板层级……说实话，光听不练容易犯困。我个人习惯是，先跑通一个最简单的例子，有了体感，后面再深入就顺了。
这一章，我们就来创建第一个画面模板。别小看这一步，很多项目做到后期发现模板改不动，根子就在第一步没走对。
4.1 新建模板画面——别急着画图
打开WinCC的图形编辑器，新建画面。这一步谁都会，但我要说的是：命名规范。
我在项目中遇到过，一个项目几十个画面，名字全是“NewPdl0”、“NewPdl1”……后期维护的人想骂娘。所以，从第一个模板开始，就养成好习惯。
我的命名规则：
- 模板画面统一加前缀
Tpl_，一眼就能识别 - 后面跟功能描述，比如
Tpl_ProcessOverview - 如果是子模板，再加层级标识，比如
Tpl_Valve_Sub
具体操作：
- 在图形编辑器中，右键 → “新建画面”
- 文件名输入
Tpl_Main（主模板） - 点击确定，进入画面编辑界面
嗯，这里要注意：画面尺寸。默认可能是1024×768，但现在的工控机屏幕分辨率五花八门。我建议一开始就定好标准尺寸，比如1920×1080，或者根据你们项目最常见的显示器来定。否则后面所有子画面都得跟着改，那叫一个酸爽。
4.2 设置画面属性——把底子打好
画面建好了，先别急着拖控件。先看看属性窗口。
选中画面空白处，按 Alt+Enter 打开属性对话框。这里有几个关键属性，我挨个说：
| 属性 | 推荐设置 | 为什么这么设 |
|---|---|---|
| 背景颜色 | 浅灰（#F0F0F0）或深蓝（#2B3E50） | 浅灰不刺眼，深蓝显专业。别用纯白，现场灯光一照，眼睛受不了 |
| 自适应 | 勾选“自适应画面大小” | 不同分辨率下自动缩放，省得每个客户端都要调 |
| 更新周期 | 2秒（标准） | 太快了CPU扛不住，太慢了操作没反馈。2秒是折中 |
| 画面名称 | 与文件名一致 | 方便脚本调用，避免混乱 |
一个小技巧：
我会在“画面注释”里写一段说明，比如“主模板，用于工艺总览，包含顶部导航和底部状态栏”。半年后你再看这个画面，不用回忆半天。
4.3 定义模板布局结构——骨架要稳
布局结构，说白了就是画面里各个区域怎么划分。我习惯用“三明治”结构：
- 顶部区域：标题、时间、报警指示灯、用户登录信息
- 中间区域：核心工艺画面（这块是动态加载的）
- 底部区域：状态栏、版本号、操作提示
为什么这么分？因为现场操作员最关注的是中间那块工艺数据，顶部和底部是辅助信息。你想想看，如果报警信息放在中间，工艺画面挤到一边，操作员第一眼看不到关键数据，那不得骂街？
具体操作步骤：
- 用“矩形”工具画出三个区域框，先不填颜色，只留边框
- 顶部区域高度设为80像素，底部设为50像素，中间自适应
- 选中顶部矩形，在属性中锁定位置和大小（防止误拖动）
- 同样的操作处理底部矩形
我曾经踩过的坑：
一开始没锁定位置，结果调试的时候不小心把顶部导航拖到了画面中间，找了半天才发现。后来我养成了习惯：凡是固定位置的元素，第一时间锁定。右键 → “锁定” 就行。
布局画好后，我习惯在中间区域放一个“占位符”文本，写上“工艺画面加载区”。这样后面做画面切换时，一眼就知道这块是动态的。
4.4 用SVG画一张布局结构图
光说可能不够直观，我画了一张布局图，你看看就明白了：
这张图就是模板的骨架。后面所有的子画面、弹窗、控件，都往这三个区域里填。结构定了，后面就不会乱。
4.5 保存模板——别忘了版本号
布局画完，属性设好，最后一步：保存。
但我建议，保存之前做一件事：在底部状态栏加一个版本号。比如“V1.0_2025-04-01”。
为什么？因为模板会迭代。今天改一版，明天改一版，没有版本号，你根本不知道现场跑的是哪一版。我在一个项目里吃过这个亏，现场画面和开发画面不一致，排查了三天……后来所有模板强制加版本号，再没出过问题。
本章核心要点：
- 模板命名加前缀
Tpl_，方便识别 - 画面属性重点设置：背景色、自适应、更新周期
- 布局用“三明治”结构：顶、中、底
- 固定元素第一时间锁定，防止误操作
- 保存前加版本号，方便追溯
好了，第一个画面模板就这么建好了。看起来简单，但这是整个项目标准化的基石。下一章，我们会在这个模板里添加动态元素——变量连接、动画、脚本……到时候你就知道，模板的威力才开始显现。