# Configuration d'un menu accordéon

Il est possible de créer des menus accordéon, dans lesquels les contenus masqués sont affichés en touchant l'écran.

Après avoir basculé l'affichage/réduit des objets de mise en page avec une animation de visibilité, l'emplacement de l'objet de commutation est automatiquement ajusté par le panneau d'ancrage, et l'affichage de l'objet changera.

Pour plus d'informations sur la fonction d'affichage des objets masqués sur l'écran, reportez-vous à ce qui suit.

Panneau d'ancrage

Qu’est-ce que l’animation ?

Opération lorsque l'animation de visibilité est configurée

## Exemple d'opération

Touchez le commutateur de l'écran de pile pour afficher un objet de mise en page réduit ; les objets alignés par la suite seront déplacés vers le bas. Touchez à nouveau le commutateur pour réduire l'objet de mise en page.

## Configuration du flux de travail

Remarque : cet exemple de configuration explique la procédure de configuration d'un menu en accordéon en plus d'un écran créé avec « Configuration d'un écran avec plusieurs sections ».
Configuration d'un écran avec plusieurs sections

1. Ajouter des variables
2. Ajouter du contenu
3. Mise en place des objets/mise en page

## Ajouter des variables

Ajoutez une variable stockant la propriété [Visibilité] de l'objet de mise en page.

### Explorateur de projets : [Variables] → [Toutes les variables]

Ajoutez la ou les variables ci-dessous.

#### Propriétés de variable

[Nom] | [Type de données] | [Valeur initiale]
Var2 | [INT] | 2
Var3 | [INT] | 2

## Ajouter du contenu

### Explorateur de projets : [Conception d'écran] → [Contenu]

Ajoutez le contenu ci-dessous.

#### Propriétés du contenu

[ID du contenu] | [Type d'écran]
2 | [Défiler la toile]
3 | [Défiler la toile]
4 | [Défiler la toile]

Pour définir la couleur du contenu, cliquez sur la zone de dessin dans la vue du document et définissez-la dans la fenêtre des propriétés.

Remarque : lors de la désignation des couleurs avec ID, les couleurs affichées varient en fonction du [Jeu de couleurs] dans la [Bibliothèque d'objets].
Jeu de couleurs

### Explorateur de projets : [Conception d'écran] → [Contenu] → [Content2]

#### Propriétés de la toile de défilement

Onglet | Propriété | Valeur
[Basique] | [Remplissage] | [Couleur] | [Valeur] | ID : 26

### Explorateur de projets : [Conception d'écran] → [Contenu] → [Content3]

#### Propriétés de la toile de défilement

Onglet | Propriété | Valeur
[Basique] | [Remplissage] | [Couleur] | [Valeur] | ID : 27

### Explorateur de projets : [Conception d'écran] → [Contenu] → [Content4]

#### Propriétés de la toile de défilement

Onglet | Propriété | Valeur
[Basique] | [Remplissage] | [Couleur] | [Valeur] | ID : 28

## Mise en place des objets/mise en page

### Explorateur de projets : [Conception d'écran] → [Écrans] → [Screen2]

Faites glisser et déposez les objets suivants de la [Bibliothèque d'objets] vers l'objet de disposition - Panneau de pile (nom : StackPanel1).

1. Objet de commutateur (Nom : Switch2)
2. Objet de mise en page - Panneau de pile (Nom : StackPanel2)
3. Objet de commutateur (Nom : Switch3)
4. Objet de mise en page - Panneau de pile (Nom : StackPanel3)

5. Objet de commutateur (Nom : Switch4 à Switch7)

Remarque : lors de l'alignement de l'objet de commutation (nom : Switch3) et du panneau de pile (nom : StackPanel3), faites-les glisser et déposez-les à l'extérieur du panneau de pile (nom : StackPanel2) de manière à ce qu'ils ne se chevauchent pas. Lorsque le panneau de pile (nom : StackPanel1) est sélectionné, double-cliquez sur l'objet correspondant dans la [Bibliothèque d'objets] pour l'aligner sans qu'il ne se chevauche.

#### Propriétés de l'objet de commutateur (Nom : Switch2) :

Ce commutateur modifie l'affichage du menu accordéon. Lorsque le commutateur est touché, la propriété [Visibilité] de l'objet de disposition - Panneau de pile (nom : StackPanel2) passe à 0 (Afficher) ou 2 (Réduit).

Onglet | Sous-onglet | Propriété | Valeur
[Fonction] | [Toucher] | [Opération] | [Type] | [Mot]
[Opération] | [XOR]
[Source] | 2
[Destination] | [Variable] [Nom] : Var2

#### Objet de mise en page - Panneau de pile (Nom : StackPanel2) Propriétés

Onglet | Propriété | Valeur
[Basique] | [Orientation] | [Vertical]
[Hauteur] | 100
[Visibilité] | [Variable] [Nom] : Var2

#### Propriétés de l'objet de commutateur (Nom : Switch3) :

Ce commutateur modifie l'affichage du menu accordéon. Lorsque le commutateur est touché, la propriété [Visibilité] de l'objet de disposition - Panneau de pile (nom : StackPanel3) passe à 0 (Afficher) ou 2 (Réduit).

Onglet | Sous-onglet | Propriété | Valeur
[Fonction] | [Toucher] | [Opération] | [Type] | [Mot]
[Opération] | [XOR]
[Source] | 2
[Destination] | [Variable] [Nom] : Var3

#### Objet de mise en page - Panneau de pile (Nom : StackPanel3) Propriétés

Onglet | Propriété | Valeur
[Basique] | [Orientation] | [Vertical]
[Hauteur] | 100
[Visibilité] | [Variable] [Nom] : Var3

#### Propriétés de l'objet de commutateur (Nom : Switch4) :

Alignez le commutateur sur le dessus de l'objet de disposition - Panneau de pile (nom : StackPanel2).

Onglet | Sous-onglet | Propriété | Valeur
[Fonction] | [Toucher] | [Opération] | [Type] | [Mot]
[Opération] | [Définir]
[Source] | 1
[Destination] | [Objet graphique] [Écran/Contenu]: ContentDisplay1 [Propriété source]: ScreenId
[Forme] | [Taille/Emplacement] | [Largeur] | 200
[Hauteur] | 50
[Alignement de l'objet] | [Horizontal] | Aligné à droite

#### Propriétés de l'objet de commutateur (Nom : Switch5) :

Alignez le commutateur sur le dessus de l'objet de disposition - Panneau de pile (nom : StackPanel2).

Onglet | Sous-onglet | Propriété | Valeur
[Fonction] | [Toucher] | [Opération] | [Type] | [Mot]
[Opération] | [Définir]
[Source] | 2
[Destination] | [Objet graphique] [Écran/Contenu]: ContentDisplay1 [Propriété source]: ScreenId
[Forme] | [Taille/Emplacement] | [Largeur] | 200
[Hauteur] | 50
[Alignement de l'objet] | [Horizontal] | Aligné à droite

#### Propriétés de l'objet de commutateur (Nom : Switch6) :

Alignez le commutateur sur le dessus de l'objet de disposition - Panneau de pile (nom : StackPanel3).

Onglet | Sous-onglet | Propriété | Valeur
[Fonction] | [Toucher] | [Opération] | [Type] | [Mot]
[Opération] | [Définir]
[Source] | 3
[Destination] | [Objet graphique] [Écran/Contenu]: ContentDisplay1 [Propriété source]: ScreenId
[Forme] | [Taille/Emplacement] | [Largeur] | 200
[Hauteur] | 50
[Alignement de l'objet] | [Horizontal] | Aligné à droite

#### Propriétés de l'objet de commutateur (Nom : Switch7) :

Alignez le commutateur sur le dessus de l'objet de disposition - Panneau de pile (nom : StackPanel3).

Onglet | Sous-onglet | Propriété | Valeur
[Fonction] | [Toucher] | [Opération] | [Type] | [Mot]
[Opération] | [Définir]
[Source] | 4
[Destination] | [Objet graphique] [Écran/Contenu]: ContentDisplay1 [Propriété source]: ScreenId
[Forme] | [Taille/Emplacement] | [Largeur] | 200
[Hauteur] | 50
[Alignement de l'objet] | [Horizontal] | Aligné à droite