## 任务目标

开始做项目 8 的"智慧校园管理平台"：先做主界面。主界面没有标题栏，上面一条蓝色标题栏放"智慧校园"标题图，下面是校园背景图，背景上有"校园环境""校园安防""退出"三个图标；点"退出"关闭程序。后面四个任务都在这个程序上接着做。

练习重点：无边框窗体（FormBorderStyle）、面板（Panel）的停靠（Dock）、背景图片、图片框（PictureBox）和项目资源里的图片。详细步骤见书 p157–159。

## 界面和控件名

| 控件   | 名称（Name）      | 文字（Text）和用途                                                             |
| ------ | ----------------- | ------------------------------------------------------------------------------ |
| 窗体   | `Main`            | 主界面；FormBorderStyle 设为 None，StartPosition 设为 CenterScreen             |
| 面板   | `panel1`          | 顶部标题栏：停靠 Top，背景色 53, 147, 237                                      |
| 图片框 | `pictureBox1`     | 放在 panel1 上，图片 `ico_title`（"智慧校园"标题），SizeMode 设为 StretchImage |
| 面板   | `panel2`          | 停靠 Fill，背景图片 `bg_home`（校园），背景排列 Stretch                        |
| 图片框 | `pic_environment` | "校园环境"入口，图片 `icon_02`                                                 |
| 图片框 | `pic_security`    | "校园安防"入口，图片 `icon_03`                                                 |
| 图片框 | `pic_exit`        | "退出"，图片 `icon_04`                                                         |

> 三个图标放在 panel2 的背景图上，背景色都设成 **Transparent**，否则图标四周会露出一块灰色。

## 实现步骤

1. 点代码上方的**项目资源**，勾选 `ico_title`、`bg_home`、`icon_02`、`icon_03`、`icon_04` 五张图片。
2. 设置窗体：无边框、屏幕居中。
3. 拖两个面板：panel1 停靠 Top 当标题栏，里面放标题图；panel2 停靠 Fill，设背景图。
4. 在 panel2 上放三个图片框，按上表设名字、图片和透明背景。
5. 双击 `pic_exit`，在它的 Click 里写 `this.Close();`。窗体没有标题栏和关闭按钮，只能靠这个图标退出程序。

## 和书上不一样的地方

> **图片从项目资源里选**：书上第 2 步把配套资料里的 Resources 文件夹复制到工程里。平台上点**项目资源**，从素材库里勾选同名图片（平台自己画的，名字和尺寸与书上一致），设计器里"图片""背景图片"属性就能选到它们。

> **窗体名 Main**：在设计器里点窗体空白处，把属性窗口的**名称**从 `Form1` 改成 `Main`，类名、文件名和 Program.cs 会跟着改。任务 2 的自动评分要找到 Main 窗体。

## 在平台上怎么试

1. 运行后，运行区显示没有标题栏的主界面：蓝色标题栏上是"智慧校园"，下面是校园背景和三个图标（窗体比运行区大时会按比例缩小，点**放大**看得更清楚）。
2. 点"退出"图标，程序应结束。