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

## Configuration du flux de travail

1. Ajouter des variables
2. Ajouter un écran
3. Ajouter du contenu
4. Configuration des objets 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].

1. Objet de mise en page - Toile (Nom : Canvas1)
2. Objet de mise en page - Panneau de pile (Nom : StackPanel1)
3. Objet de commutateur (Nom : Switch1)

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