# 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

1. Adicionar variáveis
2. Adicionar conteúdos
3. 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)

1. Objeto de interruptor (Nome: Switch2)
2. Layout de objeto - Painel de pilha (Nome: StackPanel2)
3. Objeto de interruptor (Nome: Switch3)
4. Layout de objeto - Painel de pilha (Nome: StackPanel3)

5. 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