# Configuración de un menú acordeón

Se puede crear menús acordeón, en los que se muestran los contenidos ocultos al tocar la pantalla.

Después de cambiar la Visualización/Contraído de objetos de diseño con animación de visibilidad, la ubicación del objeto del interruptor será ajustada automáticamente por el Panel de apilamiento y la visualización del objeto cambiará.

Para más información sobre la función de visualización de objetos ocultos en pantalla, consulte lo siguiente.

Panel de apilamiento

¿Qué es la animación?

Funcionamiento cuando se configura la animación de visibilidad

## Operación de ejemplo

Toque el interruptor del Panel de apilamiento para mostrar un objeto de diseño contraído; los objetos alineados a continuación se desplazarán hacia abajo. Toque el interruptor de nuevo para contraer el objeto de diseño.

## Establecer el flujo de trabajo

Nota: Este ejemplo de configuración explica el procedimiento para configurar un menú acordeón además de una pantalla creada con "Configuración de una pantalla con varias secciones".
Configuración de una pantalla con varias secciones

1. Agregar variables
2. Agregar contenido
3. Configurar objetos/ disposición

## Agregar variables

Agregue una variable que almacene la propiedad [Visibilidad] del objeto de diseño.

### Explorador de proyectos: [Variables] → [Todas las variables]

Agregue la(s) siguiente(s) variable(s).

#### Propiedades de la variable

[Nombre] | [Tipo de datos] | [Valor Inicial]
Var2 | [INT] | 2
Var3 | [INT] | 2

## Agregar contenido

### Explorador de proyectos: [Diseño de la pantalla] → [Contenidos]

Agregue los siguientes contenidos.

#### Propiedades del contenido

[ID de contenido] | [Tipo de pantalla]
2 | [Desplazar lienzo]
3 | [Desplazar lienzo]
4 | [Desplazar lienzo]

Para establecer el color del contenido, haga clic en el área de dibujo en la vista del documento y defínalo en la ventana de propiedades.

Nota: Al designar colores con ID, los colores mostrados variarán en función del [Conjunto de colores] en la [Caja de herramientas].
Conjunto de colores

### Explorador de proyectos: [Diseño de la pantalla] → [Contenidos] → [Content2]

#### Propiedades de Desplazar lienzo

Pestaña | Propiedad | Valor
[Básico] | [Relleno] | [Color] | [Valor] | ID: 26

### Explorador de proyectos: [Diseño de la pantalla] → [Contenidos] → [Content3]

#### Propiedades de Desplazar lienzo

Pestaña | Propiedad | Valor
[Básico] | [Relleno] | [Color] | [Valor] | ID: 27

### Explorador de proyectos: [Diseño de la pantalla] → [Contenidos] → [Content4]

#### Propiedades de Desplazar lienzo

Pestaña | Propiedad | Valor
[Básico] | [Relleno] | [Color] | [Valor] | ID: 28

## Configurar objetos/ disposición

### Explorador de proyectos: [Diseño de la pantalla] → [Pantallas] → [Screen2]

Arrastre y suelte los siguientes objetos desde la [Caja de herramientas] al Objeto de diseño - Panel de apilamiento (Nombre: StackPanel1).

1. Propiedades del objeto del interruptor (Nombre: Switch2)
2. Objeto de diseño - Panel de apilamiento (Nombre: StackPanel2)
3. Propiedades del objeto del interruptor (Nombre: Switch3)
4. Objeto de diseño - Panel de apilamiento (Nombre: StackPanel3)

5. Objeto del interruptor (Nombre: Switch4 a Switch7)

Nota: Al alinear el Objeto del interruptor (nombre: Switch3) y el Panel de apilamiento (Nombre: StackPanel3), arrástrelos y suéltelos hacia el exterior del Panel de apilamiento (Nombre: StackPanel2) para que no se superpongan. Con el Panel de apilamiento (Nombre: StackPanel1) seleccionado, haga doble clic en el objeto correspondiente de la [Caja de herramientas] para alinearlo sin que se superpongan.

#### Propiedades del objeto del interruptor (Nombre: Switch2)

Este interruptor cambia la visualización del menú acordeón. Cuando se toca el interruptor, la propiedad [Visibilidad] del Objeto de diseño - Panel de apilamiento (nombre: StackPanel2) se cambia a 0 (Mostrar) o 2 (Colapsado).

Pestaña | Subpestaña | Propiedad | Valor
[Función] | [Pulsación] | [Operación] | [Tipo] | [Palabra]
[Operación] | [XOR]
[Origen] | 2
[Destino] | [Variable] [Nombre]: Var2

#### Propiedades de Objeto de diseño - Panel de apilamiento (Nombre: StackPanel2)

Pestaña | Propiedad | Valor
[Básico] | [Orientación] | [Vertical]
[Altura] | 100
[Visibilidad] | [Variable] [Nombre]: Var2

#### Propiedades del objeto del interruptor (Nombre: Switch3)

Este interruptor cambia la visualización del menú acordeón. Cuando se toca el interruptor, la propiedad [Visibilidad] del Objeto de diseño - Panel de apilamiento (nombre: StackPanel3) se cambia a 0 (Mostrar) o 2 (Colapsado).

Pestaña | Subpestaña | Propiedad | Valor
[Función] | [Pulsación] | [Operación] | [Tipo] | [Palabra]
[Operación] | [XOR]
[Origen] | 2
[Destino] | [Variable] [Nombre]: Var3

#### Propiedades de Objeto de diseño - Panel de apilamiento (Nombre: StackPanel3)

Pestaña | Propiedad | Valor
[Básico] | [Orientación] | [Vertical]
[Altura] | 100
[Visibilidad] | [Variable] [Nombre]: Var3

#### Propiedades del objeto del interruptor (Nombre: Switch4)

Alinee el interruptor encima del Objeto de diseño - Panel de apilamiento (Nombre: StackPanel2).

Pestaña | Subpestaña | Propiedad | Valor
[Función] | [Pulsación] | [Operación] | [Tipo] | [Palabra]
[Operación] | [Definir]
[Origen] | 1
[Destino] | [Objeto gráfico] [Pantalla/Contenido]: ContentDisplay1 [Propiedad Origen]: ScreenId
[Forma] | [Tamaño/Ubicación] | [Ancho] | 200
[Altura] | 50
[Alineación del objeto] | [Horizontal] | Alineado a la derecha

#### Propiedades del objeto del interruptor (Nombre: Switch5)

Alinee el interruptor encima del Objeto de diseño - Panel de apilamiento (Nombre: StackPanel2).

Pestaña | Subpestaña | Propiedad | Valor
[Función] | [Pulsación] | [Operación] | [Tipo] | [Palabra]
[Operación] | [Definir]
[Origen] | 2
[Destino] | [Objeto gráfico] [Pantalla/Contenido]: ContentDisplay1 [Propiedad Origen]: ScreenId
[Forma] | [Tamaño/Ubicación] | [Ancho] | 200
[Altura] | 50
[Alineación del objeto] | [Horizontal] | Alineado a la derecha

#### Propiedades del objeto del interruptor (Nombre: Switch6)

Alinee el interruptor encima del Objeto de diseño - Panel de apilamiento (Nombre: StackPanel3).

Pestaña | Subpestaña | Propiedad | Valor
[Función] | [Pulsación] | [Operación] | [Tipo] | [Palabra]
[Operación] | [Definir]
[Origen] | 3
[Destino] | [Objeto gráfico] [Pantalla/Contenido]: ContentDisplay1 [Propiedad Origen]: ScreenId
[Forma] | [Tamaño/Ubicación] | [Ancho] | 200
[Altura] | 50
[Alineación del objeto] | [Horizontal] | Alineado a la derecha

#### Propiedades del objeto del interruptor (Nombre: Switch7)

Alinee el interruptor encima del Objeto de diseño - Panel de apilamiento (Nombre: StackPanel3).

Pestaña | Subpestaña | Propiedad | Valor
[Función] | [Pulsación] | [Operación] | [Tipo] | [Palabra]
[Operación] | [Definir]
[Origen] | 4
[Destino] | [Objeto gráfico] [Pantalla/Contenido]: ContentDisplay1 [Propiedad Origen]: ScreenId
[Forma] | [Tamaño/Ubicación] | [Ancho] | 200
[Altura] | 50
[Alineación del objeto] | [Horizontal] | Alineado a la derecha