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

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.

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)

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