# Configuring a Screen with Multiple Sections

You can create a screen similar to an application user interface with multiple adjustable window panes.

After switching the Display/Collapsed of layout objects with visibility animation, the content display object and switch object size and location will be automatically adjusted by the Dock Panel, and the pane display will change.

For information about the function used to configure a screen composed of multiple panes, refer to the following.

Dock Panel

What is Animation?

Operation When Visibility Animation is Set Up

## Example Operation

Touch the switch on the Dock Panel to collapse the layout object (left pane); the content display object (main pane) aligned thereafter will expand to fill that space. Touch the switch again to display the layout object.

## Setting Workflow

1. Add Variables
2. Add Screen
3. Add Contents
4. Set Up Layout Objects/Parts

## Add Variables

Add a variable storing the [Visibility] property of the layout object.

### Project Explorer: [Variables] → [All Variables]

Add the below variable(s).

#### Variable Properties

[Name] | [Data Type]
Var1 | [INT]

## Add Screen

### Project Explorer: [Screen Design] → [Screens]

Add the below screen(s).

#### Screen Properties

[ScreenID] | [Screen Type]
2 | [Dock Panel]

### Project Explorer: [Screen Design] → [Screens] → [Screen2]

To define screen settings such as color, in the Document view, click the drawing area and define the settings in the properties window.

#### Dock Panel Properties

Tab | Property | Value
[Basic] | [Fill] | [Color] | [Value] | ID:14

### Project Explorer: [System Architecture] → [Target01]

Set the properties below.

#### Target01 properties

Tab | Sub | Property | Value
[Function] | [Basic] | [Preference] | [Initial Screen ID] | 2

Note: This property sets the screen configured in this setting example (Screen ID: 2) to be displayed first after starting the runtime.

## Add Contents

### Project Explorer: [Screen Design] → [Contents]

Add the below contents.

#### Content Properties

[Content ID] | [Screen Type]
1 | [Scroll Canvas]

### Project Explorer: [Screen Design] → [Contents] → [Content1]

To define contents settings such as color, in the Document view, click the drawing area and define the settings in the Properties window.

Note: When designating colors with ID, the displayed colors will vary depending on the [Color Set] in the [Tool Chest].
Color Set

#### Scroll Canvas Properties

Tab | Property | Value
[Basic] | [Fill] | [Color] | [Value] | ID:25

## Set Up Layout Objects/Parts

### Project Explorer: [Screen Design] → [Screens] → [Screen2]

Drag and drop the following objects from the [Tool Chest] to the screen.

Note: The object alignment order can be changed with the [Object List].

1. Layout Object - Canvas (Name: Canvas1)
2. Layout Object - Stack Panel (Name: StackPanel1)
3. Switch Object (Name: Switch1)

4. Content display (Name: ContentDisplay1)

Note: When aligning objects, drag and drop them to the outside of the layout object or outside the screen area in order to keep them from overlapping. Note that when none of the objects on the screen are selected, they can also be aligned without overlapping by double-clicking the relevant object in the [Tool Chest].

#### Layout Object - Canvas (Name: Canvas1) Properties

Tab | Property | Value
[Basic] | [Location] | [Dock] | [Top]
[Height] | 80
[Fill] | [Color] | [Value] | ID:14

#### Layout Object - Stack Panel (Name: StackPanel1) Properties

Tab | Property | Value
[Basic] | [Orientation] | [Vertical]
[Location] | [Dock] | [Left]
[Width] | 250
[Fill] | [Color] | [Value] | ID:11
[Visibility] | [Variable] [Name]: Var1

Note: Install the accordion menu in the Stack Panel. For information about the accordion menu, refer to the following.
Configuring an Accordion Menu

#### Switch Object (Name: Switch1) Properties

This switch changes the pane display. When the switch is touched, the [Visibility] property of the Layout Object - Stack Panel (name: StackPanel1) is changed to 0 (Display) or 2 (Collapsed).

Tab | Sub Tab | Property | Value | Tab
[Function] | [Touch] | [Operation] | [Type] | [Word]
[Operation] | [XOR]
[Source] | 2
[Destination] | [Variable] [Name]: Var1
[Shape] | [Size/Location] | [Location] | [Dock] | [Left]
[Width] | 25
[Height] | 50

#### Content Display (Name: ContentDisplay1) Properties

Tab | Sub Tab | Property | Value
[Function] | [Basic] | [Content ID] | 1