Créez un écran que les utilisateurs peuvent faire défiler pour afficher différents éléments. Par exemple, vous souhaiterez peut-être créer une application permettant d’afficher des données dans un histogramme et un graphique en courbes. En ajoutant un écran de défilement, vous pouvez ajouter plusieurs contrôles que les utilisateurs peuvent afficher s’ils font défiler l’écran.

Lorsque vous ajoutez plusieurs contrôles dans une section, les contrôles conservent leur position relative dans cette section, peu importe s’il s’agit d’une application pour téléphone ou pour tablette. Notez que la taille et l’orientation de l’écran peuvent déterminer la façon dont les sections sont disposées.

 

Conditions préalables

Créer un écran de défilement

  1. Dans l’onglet Home (Accueil), cliquez ou appuyez sur New Screen (Nouvel écran) :

    Option permettant d’ajouter un écran à une application

  2. Dans l’onglet Home (Accueil), cliquez ou appuyez sur Layouts (Dispositions), puis cliquez ou appuyez sur l’option permettant d’ajouter un canevas de défilement infini :

    Option permettant d’ajouter un canevas de défilement infini

    Le canevas est ajouté :

    Écran avec un canevas de défilement infini, telle qu’il s’affiche par défaut

Ajouter des éléments

À présent, nous allons ajouter des contrôles au canevas pour voir comment l’écran de défilement fonctionne.

  1. Dans le canevas que vous avez ajouté, cliquez ou appuyez sur Add an item from the Insert tab (Ajouter un élément à partir de l’onglet Insertion).

  2. Dans l’onglet Insert (Insertion), cliquez ou appuyez sur Charts (Graphiques), puis sur Column Chart (Histogramme).

    Option permettant d’ajouter un histogramme

    Un histogramme s’affiche dans la première carte à l’écran :

    Histogramme par défaut

  3. Dans l’onglet Insert (Insertion), cliquez ou appuyez sur Text (Texte), puis sur Pen input (Entrée du stylo) :

    Option permettant d’ajouter un contrôle Pen (Stylo)

  4. Déplacez le contrôle Pen (Stylo) sous le graphique et redimensionnez ce contrôle de sorte qu’il recouvre la partie inférieure de la carte :

    Déplacer et redimensionner le contrôle Pen (Stylo)

Ajouter une section

À présent, nous allons ajouter une autre carte avec un autre contrôle.

  1. Au bas de l’écran, cliquez ou appuyez sur Add section (Ajouter une section) :

    Option permettant d’ajouter une section

    Une nouvelle carte est ajoutée à l’écran :

    Nouvelle carte sous la section par défaut

  2. En laissant la carte sélectionnée, cliquez sur l’onglet Insert (Insertion), cliquez ou appuyez sur Charts (Graphiques), puis sur Line chart (Graphique en courbes).

    Le nouveau graphique est trop grand pour s’afficher à l’écran avec les autres contrôles :

    Graphique en courbes ajouté au bas de la nouvelle carte

  3. Ouvrez le mode Aperçu en appuyant sur F5 (ou en cliquant ou appuyant sur l’icône de lecture dans l’angle supérieur droit).

    Ouvrir le mode Aperçu

  4. Faites défiler l’écran pour afficher le nouveau graphique en courbes.

    Aperçu affichant le graphique en courbes