Configuration d’un écran avec plusieurs sections

Vous pouvez créer un écran semblable à une interface utilisateur d'une application avec plusieurs volets de fenêtre réglables.

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

Pour plus d'informations sur la fonction permettant de configurer un écran composé de plusieurs volets, 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 du panneau d'accueil pour réduire l'objet de mise en page (volet gauche) ; l'objet d'affichage du contenu (volet principal) aligné par la suite se développera pour remplir cet espace. Touchez à nouveau le commutateur pour afficher l'objet de 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]
Var1	[INT]

Ajouter un écran

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

Ajoutez le(s) écran(s) ci-dessous.

Propriétés de l'écran

[ID d’écran]	[Type d'écran]
2	[Panneau d'ancrage]

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

Pour définir des paramètres d'écran tels que la couleur, dans la vue Document, cliquez sur la zone de dessin et définissez les paramètres dans la fenêtre de propriétés.

Propriétés de l'écran d'ancrage

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

Explorateur de projet : [Architecture du système] → [Target01]

Définissez les propriétés ci-dessous.

Propriétés de Target01

Onglet	Sub	Propriété		Valeur
[Fonction]	[Basique]	[Préférence]	[ID de l'écran initial]	2

Remarque : cette propriété définit l'écran configuré dans cet exemple de configuration (Screen ID: 2) à afficher en premier après le démarrage de l'exécution.

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]
1	[Défiler la toile]

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

Pour définir des paramètres de contenu tels que la couleur, dans la vue Document, cliquez sur la zone de dessin et définissez les paramètres dans la fenêtre 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

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

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

Configuration des objets de 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'écran.

Remarque : l'ordre d'alignement des objets peut être modifié à l'aide de la [Liste d'objets].

Objet de mise en page - Toile (Nom : Canvas1)
Objet de mise en page - Panneau de pile (Nom : StackPanel1)
Objet de commutateur (Nom : Switch1)
Affichage du contenu (Nom : ContentDisplay1)

Remarque : lorsque vous alignez des objets, faites-les glisser et déposez-les à l'extérieur de l'objet de mise en page ou à l'extérieur de la zone d'écran afin d'éviter qu'ils ne se chevauchent. Notez que si aucun des objets à l'écran n'est sélectionné, ils peuvent également être alignés sans se chevaucher en double-cliquant sur l'objet concerné dans la [Bibliothèque d'objets].

Objet de mise en page - Toile (Nom : Canvas1) Propriétés

Onglet	Propriété			Valeur
[Basique]	[Emplacement]	[Ancrage]		[Haut]
	[Hauteur]			80
	[Remplissage]	[Couleur]	[Valeur]	ID : 14

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

Onglet	Propriété			Valeur
[Basique]	[Orientation]			[Vertical]
	[Emplacement]	[Ancrage]		[Gauche]
	[Largeur]			250
	[Remplissage]	[Couleur]	[Valeur]	ID : 11
	[Visibilité]			[Variable] [Nom] : Var1

Remarque : installez le menu en accordéon dans le panneau de pile. Pour plus d'informations sur le menu accordéon, reportez-vous à ce qui suit.
Configuration d'un menu accordéon

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

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

Onglet	Sous-onglet	Propriété	Valeur	Onglet
[Fonction]	[Toucher]	[Opération]	[Type]	[Mot]
			[Opération]	[XOR]
			[Source]	2
			[Destination]	[Variable] [Nom] : Var1
[Forme]	[Taille/Emplacement]	[Emplacement]	[Ancrage]	[Gauche]
		[Largeur]		25
		[Hauteur]		50

Propriétés de l'objet d'affichage de contenu (Nom : ContentDisplay1)

Onglet	Sous-onglet	Propriété	Valeur
[Fonction]	[Basique]	[ID du contenu]	1