Onglets

Général

Lorsque vous ajoutez la commande Onglet (Tab), trois onglets s'affichent par défaut (Tab 1,Tab 2,Tab 3). Le développement de chaque onglet dans la commande affiche les propriétés suivantes :

• Nom de l'onglet (Tab name) : le nom complet de l'onglet.
• Source de la page (Page source) : la page d'applications à importer dans cet onglet.
• Masqué (Hidden) : si la valeur est true, masque la commande au moment du runtime.
• Désactivé (Disabled) : si la valeur est true, désactive la commande au moment du runtime.

Les propriétés suivantes s'appliquent à l'ensemble de la commande Onglet (Tab).

• Ajouter un nouvel onglet (Add new tab) : ajoutez un nouvel onglet à vos données en cliquant sur l'icône plus « + ».

• Index des onglets actifs (Active tab index) : accédez à un onglet spécifique à l'aide de cette propriété. L'index commence à 0. Par exemple, si vous avez quatre onglets consécutifs nommés « Tab1 », « Tab2 », « Tab3 » et « Tab4 », alors « Tab1 » a l'index 0, « Tab2 » a l'index 1, « Tab3 » a l'index 2 et « Tab4 » a l'index 3.

• Masqué (Hidden) : si la valeur est true, masque la commande au moment du runtime.

• Désactivé (Disabled) : si la valeur est true, désactive la commande au moment du runtime.

Events

• Valeur modifiée (Value changed) : configurez ce qui se passe lorsque la valeur est modifiée.

Style

• Alignement de commande (Control Alignment) : par défaut, cette option est définie sur Étirer (Stretch. Un autre alignement peut être défini.

  Remarque : l'alignement dépend de la mise en page sélectionnée pour le parent (Vertical vs Horizontal).

• Style : la taille des onglets et la couleur d'un onglet actif.

• Bordure (Border) : la bordure de la commande. L'épaisseur (Thickness), la couleur (Color) et le rayon (Radius) peuvent être configurés.

• Police (Font) : les attributs de police du texte de l'onglet, tels que la famille de polices, la taille ou la couleur. Par défaut, la commande hérite de la famille de polices de son conteneur parent immédiat, qui est indiqué par le mot-clé « Inherited ».

• Marge (Margin) : la marge de la commande. Par défaut, une marque de 4px est définie. Les propriétés des marges Haut/Bas (Top/Bottom)et Gauche/Droite (Left/Right) sont combinées. Ces propriétés peuvent être dissociées à l'aide du bouton Lier (Link) sur le côté droit de la section Marge (Margin).

• Taille (Size) : largeur et hauteur de la commande. Par défaut, la taille est définie sur auto. Pour définir des valeurs minimales ou maximales, cliquez sur l'icône à trois points (...).Si la taille du champ est inférieure à celle des options, une barre de défilement s'affiche.

Raccourcis clavier

Pour une meilleure accessibilité, vous pouvez utiliser les raccourcis clavier suivants dans la liste des onglets de l'onglet Général (General) du panneau de configuration :

• Touches fléchéeshaut et bas pour modifier l'onglet sélectionné
• Alt+ Flèche vers lehaut pour déplacer l'onglet sélectionné vers le haut
• Alt+ Flèche vers lebas pour déplacer l'onglet sélectionné vers le bas

Exemple : navigation vers l'onglet suivant

Cet exemple montre comment naviguer vers l'onglet suivant d'une commande Onglets (Tabs).

1. Dans votre application, ajoutez une commande Onglets (Tabs). Cela a automatiquement créé 3 onglets : « Tab 1 », « Tab 2 » et « Tab 3 ».
2. Ajoutez deux nouvelles pages et une commande Bouton (Button) sur chacune. Nommez les boutons « Tab 1 -> Suivant » et « Tab 2 -> Suivant » respectivement.
3. Pour « Tab 1 » dans le champ Source de la page (Page source), référencez la page précédemment ajoutée avec le bouton « Tab 1 -> Suivant ».
4. Pour « Tab 2 », dans le champ Source de la page (Page source), référencez la page précédemment ajoutée avec le bouton « Tab 2 -> Suivant ». Votre application doit ressembler à l'image suivante :
   
5. Créez une règle pour chaque commande Bouton (Button). La règle indique à l'application de naviguer vers l'onglet suivant lorsque vous cliquez sur le bouton.
6. Créez une variable d'application de type Int32 et nommez-la « var_tab_index ».
7. Sélectionnez la commande Onglets (Tabs) et attribuez la variable var_tab_index au champ Index de l'onglet actif (Active tab index).
   
8. Sélectionnez la page principale qui contient la commande Onglets (Tabs), accédez à l'onglet Événements (Events) et créez une règle pour l'événement Chargé (Loaded).
   1. Ajoutez la règle Définir la valeur (Set Value) et configurez-la comme suit :
      • Élément à définir (Item To Set) : var_tab_index
      • Valeur (Value) : 0, qui est l'index Tab 1.
9. Sélectionnez la page qui contient la commande Bouton (Button) nommée « Tab 1 -> Suivant », accédez à l'onglet Événements (Events) et créez une règle pour l'événement Cliqué (Clicked on).
   1. Ajoutez la règle Définir la valeur (Set Value) et configurez-la comme suit :
      • Élément à définir (Item To Set) : var_tab_index
      • Valeur (Value) : 1, qui est l'index Tab 2.
10. Sélectionnez la page qui contient la commande Bouton (Button) nommée « Tab 2 -> Suivant », accédez à l'onglet Événements (Events) et créez une règle pour l'événement Cliqué (Clicked on).
    1. Ajoutez la règle Définir la valeur (Set Value) et configurez-la comme suit :
       • Élément à définir (Item To Set) : var_tab_index
       • Valeur (Value) : 2, qui est l'index Tab 3.

Lorsque vous prévisualisez votre application, cliquez sur le bouton dans « Tab 1 » pour accéder à « Tab 2 », et ainsi de suite.