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

Ajouter des variables
Ajouter du contenu
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).

Objet de commutateur (Nom : Switch2)
Objet de mise en page - Panneau de pile (Nom : StackPanel2)
Objet de commutateur (Nom : Switch3)
Objet de mise en page - Panneau de pile (Nom : StackPanel3)
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) :

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