Configurando um menu acordeão

É possível criar menus acordeão, nos quais os conteúdos ocultos são exibidos ao tocar na tela.

Após alternar a exibição/recolhida de objetos de layout com animação de visibilidade, a localização do objeto de interruptor será ajustada automaticamente pelo Painel de pilha e a exibição do objeto será alterada.

Para obter informações sobre a função de exibição de objetos ocultos na tela, consulte o seguinte.

Painel de pilha

O que é Animação?

Operação quando a animação de visibilidade é configurada

Exemplo de operação

Toque o interruptor no Painel de pilha para exibir um objeto de layout recolhido; os objetos alinhados a seguir serão movidos para baixo. Toque novamente no interruptor para recolher o layout de objeto.

Configurar fluxo de trabalho

Observação: Esse exemplo de configuração explica o procedimento para configurar um menu acordeão além de uma tela criada com "Configurando uma tela com várias seções.
Configurando uma tela com várias seções

Adicionar variáveis
Adicionar conteúdos
Configurar peças/Layout

Adicionar variáveis

Adicione uma variável armazenando a propriedade [Visibilidade] do layout de objeto.

Explorador de projeto: [Variáveis] → [Todas as Variáveis]

Adicionar a(s) variável(eis) abaixo.

Propriedades da variável

[Nome]	[Tipo de dados]	[Valor inicial]
Var2	[INT]	2
Var3	[INT]	2

Adicionar conteúdos

Explorador de projeto: [Design de tela] → [Conteúdos]

Adicionar os conteúdos abaixo.

Propriedades dos conteúdo

[ID do conteúdo]	[Tipo de tela]
2	[Tela de rolagem]
3	[Tela de rolagem]
4	[Tela de rolagem]

Para definir a cor do conteúdo, clique na área de desenho na visualização do documento e defina na janela de propriedades.

Observação: Ao designar cores com ID, as cores exibidas variam de acordo com o [Conjunto de cores] na [Caixa da ferramentas].
Conjunto de cores

Explorador de projeto: [Design de tela] → [[Conteúdos] → [Content2]

Propriedades da tela de rolagem

Guia	Propriedade			Valor
[Básico]	[Preencher]	[Cor]	[Valor]	ID: 26

Explorador de projeto: [Design de tela] → [[Conteúdos] → [Content3]

Propriedades da tela de rolagem

Guia	Propriedade			Valor
[Básico]	[Preencher]	[Cor]	[Valor]	ID: 27

Explorador de projeto: [Design de tela] → [[Conteúdos] → [Content4]

Propriedades da tela de rolagem

Guia	Propriedade			Valor
[Básico]	[Preencher]	[Cor]	[Valor]	ID: 28

Configurar peças/Layout

Explorador de projeto: [Design de tela] → [Telas] → [Screen2]

Arraste e solte os seguintes objetos da [Caixa da ferramentas] para o Layout de objeto - Painel de pilha (nome: StackPanel1)

Objeto de interruptor (Nome: Switch2)
Layout de objeto - Painel de pilha (Nome: StackPanel2)
Objeto de interruptor (Nome: Switch3)
Layout de objeto - Painel de pilha (Nome: StackPanel3)
Objeto de interruptor (Nome: Switch4 para Switch7)

Observação: Ao alinhar o Objeto de interruptor (nome: Switch3) e o Painel de pilha (nome: StackPanel3), arraste e solte-os na parte externa do Painel de pilha (nome: StackPanel2) para que não se sobreponham a ele. Com o Painel de pilha (nome: StackPanel1) selecionado, clique duas vezes no objeto relevante na [Caixa da ferramentas] para alinhá-lo sem sobreposição.

Propriedades do objeto do interruptor (Nome: Switch2)

Esse interruptor altera a exibição do menu acordeão. Quando o interruptor é tocado, a propriedade [Visibilidade] do layout de objeto - Painel de pilha (nome: StackPanel2) é alterado para 0 (Exibir) ou 2 (Recolhido).

Guia	Sub-tela	Propriedade		Valor
[Função]	[Toque]	[Operação]	[Tipo]	[Word]
			[Operação]	[XOR]
			[Origem]	2
			[Destino]	[Variável] [Nome]: Var2

Propriedades do Layout de objeto - Painel de pilha (Nome: StackPanel2)

Guia	Propriedade	Valor
[Básico]	[Orientação]	[Vertical]
	[Altura]	100
	[Visibilidade]	[Variável] [Nome]: Var2

Propriedades do objeto do interruptor (Nome: Switch3)

Esse interruptor altera a exibição do menu acordeão. Quando o interruptor é tocado, a propriedade [Visibilidade] do layout de objeto - Painel de pilha (nome: StackPanel3) é alterado para 0 (Exibir) ou 2 (Recolhido).

Guia	Sub-tela	Propriedade		Valor
[Função]	[Toque]	[Operação]	[Tipo]	[Word]
			[Operação]	[XOR]
			[Origem]	2
			[Destino]	[Variável] [Nome]: Var3

Propriedades do Layout de objeto - Painel de pilha (Nome: StackPanel3)

Guia	Propriedade	Valor
[Básico]	[Orientação]	[Vertical]
	[Altura]	100
	[Visibilidade]	[Variável] [Nome]: Var3

Propriedades do objeto do interruptor (Nome: Switch4)

Alinhe o interruptor na parte superior do layout de objeto - Painel de pilha (nome: StackPanel2).

Guia	Sub-tela	Propriedade		Valor
[Função]	[Toque]	[Operação]	[Tipo]	[Word]
			[Operação]	[Definir]
			[Origem]	1
			[Destino]	[Objeto gráfico] [Tela/conteúdo]: ContentDisplay1 [Propriedade de origem]: ScreenId
[Forma]	[Tamanho/Localização]	[Largura]		200
		[Altura]		50
		[Alinhamento do objeto]	[Horizontal]	Alinhado à direita

Propriedades do objeto do interruptor (Nome: Switch5)

Alinhe o interruptor na parte superior do layout de objeto - Painel de pilha (nome: StackPanel2).

Guia	Sub-tela	Propriedade		Valor
[Função]	[Toque]	[Operação]	[Tipo]	[Word]
			[Operação]	[Definir]
			[Origem]	2
			[Destino]	[Objeto gráfico] [Tela/conteúdo]: ContentDisplay1 [Propriedade de origem]: ScreenId
[Forma]	[Tamanho/Localização]	[Largura]		200
		[Altura]		50
		[Alinhamento do objeto]	[Horizontal]	Alinhado à direita

Propriedades do objeto do interruptor (Nome: Switch6)

Alinhe o interruptor na parte superior do layout de objeto - Painel de pilha (nome: StackPanel3).

Guia	Sub-tela	Propriedade		Valor
[Função]	[Toque]	[Operação]	[Tipo]	[Word]
			[Operação]	[Definir]
			[Origem]	3
			[Destino]	[Objeto gráfico] [Tela/conteúdo]: ContentDisplay1 [Propriedade de origem]: ScreenId
[Forma]	[Tamanho/Localização]	[Largura]		200
		[Altura]		50
		[Alinhamento do objeto]	[Horizontal]	Alinhado à direita

Propriedades do objeto do interruptor (Nome: Switch7)

Alinhe o interruptor na parte superior do layout de objeto - Painel de pilha (nome: StackPanel3).

Guia	Sub-tela	Propriedade		Valor
[Função]	[Toque]	[Operação]	[Tipo]	[Word]
			[Operação]	[Definir]
			[Origem]	4
			[Destino]	[Objeto gráfico] [Tela/conteúdo]: ContentDisplay1 [Propriedade de origem]: ScreenId
[Forma]	[Tamanho/Localização]	[Largura]		200
		[Altura]		50
		[Alinhamento do objeto]	[Horizontal]	Alinhado à direita