# 配置具有多个部分的画面

您可以使用多个可调窗口窗格创建类似于应用程序用户界面的画面。

通过隐现动画切换布局对象的显示/折叠后，内容显示对象和开关对象的大小和位置将由停靠面板自动调整，窗格显示也将随之改变。

有关用于配置由多个窗格组成的画面的功能的信息，请参阅以下内容。

停靠面板

什么是动画？

设置了隐现动画时的操作

## 示例操作

触摸停靠面板上的开关可折叠布局对象 (左窗格)；随后对齐的内容显示对象 (主窗格) 将展开以填充该空间。再次触摸开关以显示布局对象。

## 设置工作流程

1. 添加变量
2. 添加画面
3. 添加内容
4. 设置布局对象/部件

## 添加变量

添加一个变量，存储布局对象的 [隐现] 属性。

### 工程浏览器: [变量] → [全部变量]

添加以下变量。

#### 变量属性

[名称] | [数据类型]
Var1 | [INT]

## 添加画面

### 工程浏览器: [画面设计] → [画面]

添加以下画面。

#### 画面属性

[画面 Id] | [画面类型]
2 | [停靠面板]

### 工程浏览器: [画面设计] → [画面] → [Screen2]

要定义颜色等画面设置，在文档视图中，单击绘制区域并在属性窗口中定义设置。

#### 停靠面板属性

标签 | 属性 | 值
[基本] | [填充] | [颜色] | [值] | ID: 14

### 工程浏览器: [系统架构] → [Target01]

设置以下属性。

#### Target01 属性

标签 | Sub | 属性 | 值
[功能] | [基本] | [偏好] | [初始画面 ID] | 2

注： 该属性将本设置示例中配置的画面 (画面 ID: 2) 设置为启动运行时后首先显示。

## 添加内容

### 工程浏览器: [画面设计] → [内容]

添加以下内容。

#### 内容属性

[内容 ID] | [画面类型]
1 | [滚动画布]

### 工程浏览器: [画面设计] → [内容] → [Content1]

要定义颜色等内容设置，在文档视图中，单击绘制区域并在属性窗口中定义设置。

注： 使用 ID 指定颜色时，显示的颜色将根据 [工具箱] 中的 [颜色集] 而变化。
颜色集

#### 滚动画布属性

标签 | 属性 | 值
[基本] | [填充] | [颜色] | [值] | ID: 25

## 设置布局对象/部件

### 工程浏览器: [画面设计] → [画面] → [Screen2]

将以下对象从[工具箱]拖放到画面上。

注： 可以使用 [对象列表] 更改对象对齐顺序。

1. 布局对象 - 画布 (名称：Canvas1)
2. 布局对象 - 堆栈面板 (名称: StackPanel1)
3. 开关对象 (名称: Switch1)

4. 内容显示 (名称：ContentDisplay1)

注： 对齐对象时，请将它们拖放到布局对象的外部或画面区域之外，以防止它们重叠。请注意，当画面上没有选择任何对象时，也可以通过双击 [工具箱] 中的相关对象来对齐它们而不重叠。

#### 布局对象 - 画布 (名称: Canvas1) 属性

标签 | 属性 | 值
[基本] | [位置] | [停靠] | [顶部对齐]
[高度] | 80
[填充] | [颜色] | [值] | ID: 14

#### 布局对象 - 堆栈面板 (名称: StackPanel1) 属性

标签 | 属性 | 值
[基本] | [方向] | [垂直]
[位置] | [停靠] | [左]
[宽度] | 250
[填充] | [颜色] | [值] | ID: 11
[隐现] | [变量] [名称]: Var1

注： 在堆栈面板中安装折叠菜单。有关折叠菜单的信息，请参阅以下内容。
配置折叠菜单

#### 开关对象（名称: Switch1）属性

此开关更改窗格显示。触摸开关后，布局对象 - 堆栈面板 (名称: StackPanel1) 的 [隐现] 属性将变为 0 (显示) 或 2 (折叠)。

标签 | 子选项卡 | 属性 | 值 | 标签
[功能] | [触摸] | [操作] | [类型] | [字]
[操作] | [XOR]
[源] | 2
[目标] | [变量] [名称]: Var1
[形状] | [尺寸/位置] | [位置] | [停靠] | [左]
[宽度] | 25
[尺寸高度] | 50

#### 内容显示 (名称: ContentDisplay1) 属性

标签 | 子选项卡 | 属性 | 值
[功能] | [基本] | [内容 ID] | 1