Partager via

Comment : Concevoir un écran Silverlight à l'aide du concepteur d'écran

  • Article

Vous pouvez modifier l'apparence d'un écran en utilisant le concepteur d'écran.Vous pouvez utiliser le concepteur d'écran pour accomplir les tâches de design suivantes :

Tâches de design de champ et commande

  • Ajouter un groupe d'informations à un écran.

  • Modifier la disposition d'un groupe.

  • Ajouter des boutons.

  • Ajouter des éléments.

  • Supprimer des éléments.

  • Déplacer des éléments.

  • Modifier le nom complet d'un élément.

  • Modifier la position de l'étiquette d'un élément.

  • Modifier la taille d'un élément.

  • Afficher ou masquer un élément.

  • Modifier le type de contrôle d'un élément.

  • Ajouter un contrôle personnalisé à un écran.

  • Annuler des modifications.

Tâches de design de la collecte de données

  • Choisir si une collection affiche des données lorsque l'écran est chargé pour la première fois.

  • Activer ou désactiver la pagination.

  • Activer ou désactiver le tri.

  • Activer ou désactiver la recherche.

Pour plus d'informations sur la façon d'accomplir des tâches de conception pendant que l'application s'exécute, consultez Comment : personnaliser un écran Silverlight dans une application en cours d'exécution.

Ajouter un groupe d'informations à un écran

  1. Dans l'Arborescence de contenu de l'écran, sélectionnez un groupe auquel vous aimeriez ajouter un groupe d'informations.

  2. En haut du Concepteur d'écran, cliquez sur Ajouter un élément de disposition, puis cliquez sur Groupe.

    Un nouveau groupe apparaît alors.

  3. Faites glisser des éléments vers le groupe.Vous pouvez faire glisser des éléments à partir de la Liste des membres de l'écran du concepteur ou d'autres zones de l'arborescence de contenu de l'écran.

Modifier la disposition d'un groupe

  1. Dans l'Arborescence de contenu de l'écran, cliquez sur la flèche bas en regard d'un groupe que vous voulez modifier.

    Une liste déroulante s'affiche.La liste déroulante affiche tous les types de contrôles qui sont disponibles pour le groupe.

  2. Dans la liste déroulante de contrôles, sélectionnez un type de contrôle.

    Le type de contrôle que vous sélectionnez affecte la disposition du groupe.Pour plus d'informations sur chaque type de contrôle, consultez Référence : propriétés du concepteur d'écran.

Ajouter des boutons

  1. Dans l'Arborescence de contenu de l'écran, sélectionnez un nœud Barre de commandes.

  2. En haut du Concepteur d'écran, cliquez sur Ajouter un élément de disposition, puis cliquez sur Bouton.

    Un bouton s'affiche sous le nœud Barre de commandes.

  3. Ajoutez du code qui s'exécute lorsque l'utilisateur clique sur le bouton.Pour plus d'informations, consultez Comment : ajouter une commande personnalisée à un écran Silverlight.

Ajouter des éléments

  • Dans la Liste des membres de l'écran du Concepteur d'écran, faites glisser un élément (par exemple, un champ ou une commande) vers l'emplacement souhaité dans l'Arborescence de contenu de l'écran.

    ConseilConseil

    L'arborescence de contenu de l'écran est la hiérarchie des objets d'écran affichés au centre du concepteur.

    Lorsque vous faites glisser l'élément, le curseur de la souris change pour indiquer si l'élément peut être placé dans une zone donnée.Si le curseur de la souris se transforme en symbole représentant une barre oblique dans un cercle, vous ne pouvez pas supprimer l'élément à cet emplacement.

    Vous pouvez également ajouter des champs personnalisés à un écran.Pour plus d'informations, consultez Comment : ajouter une propriété locale à un écran Silverlight.

Supprimer des éléments

  1. Dans l'Arborescence de contenu de l'écran, sélectionnez l'élément (par exemple, un champ ou une commande) que vous voulez supprimer de l'écran.

  2. En haut de l'Arborescence de contenu de l'écran, cliquez sur le bouton Supprimer.

Déplacer des éléments

  • Dans l'Arborescence de contenu de l'écran, faites glisser l'élément (par exemple, un champ ou commande) vers l'emplacement souhaité dans la liste d'éléments.

    Par exemple, faites glisser le champ PostalCode pour le placer sous le champ Country, ou faites glisser le bouton Modifier pour le placer au-dessus du bouton Supprimer.

    [!REMARQUE]

    Lorsque vous faites glisser un champ, le curseur de la souris change pour indiquer si l'élément peut être placé dans une zone donnée.Si le curseur de la souris se transforme en symbole représentant une barre oblique dans un cercle, vous ne pouvez pas supprimer l'élément à cet emplacement.

Modifier le nom complet d'un élément

  1. Dans l'Arborescence de contenu de l'écran, sélectionnez l'élément (par exemple, un champ ou commande).

  2. Dans la fenêtre Propriétés, sélectionnez la zone de texte sous Nom complet et tapez le nom souhaité pour l'élément.

    La modification du nom complet ne modifie pas le nom de l'élément.Cette opération ne modifie que le nom de cet élément tel qu'il apparaît à l'écran.

Modifier la position de l'étiquette d'un élément

  1. Dans l'Arborescence de contenu de l'écran, sélectionnez le champ.

  2. Dans la fenêtre Propriétés, cliquez sur la liste déroulante sous Position de l'étiquette et sélectionnez la valeur souhaitée.

    Le tableau suivant décrit chaque option.

    Position de l'étiquette

    Description

    Aligné à gauche

    L'étiquette s'affiche à gauche du contrôle.

    Aligné à droite

    L'étiquette s'affiche à droite du contrôle.

    Top

    L'étiquette s'affiche au-dessus du contrôle.

    Bottom

    L'étiquette s'affiche au-dessous du contrôle.

    Aucun

    Aucune étiquette ne s'affiche pour le champ de données sélectionné.

    Collapsed

    Le champ est placé dans l'emplacement habituellement réservé à l'étiquette.

Modifier la taille d'un élément

  1. Dans l'Arborescence de contenu de l'écran, sélectionnez l'élément (par exemple, un champ ou commande).

  2. Dans la fenêtre Propriétés, sous Dimensionnement, sélectionnez la taille souhaitée pour la largeur et la hauteur du contrôle.

    Pour plus d'informations sur chaque paramètre, consultez Référence : propriétés du concepteur d'écran.

Afficher ou masquer un élément

  1. Dans l'Arborescence de contenu de l'écran, sélectionnez l'élément (par exemple, un champ ou commande).

  2. Dans la fenêtre Propriétés, activez ou désactivez la propriété Est visible.

    Si vous activez Est visible, l'élément s'affiche sur l'écran lorsque l'application s'exécute.Si vous désactivez Est visible, l'élément n'est pas visible sur l'écran lorsque l'application s'exécute.

    [!REMARQUE]

    L'étiquette (Non visible) s'affiche en regard des éléments qui ne sont pas visibles sur l'écran lorsque l'application s'exécute.

Modifier le type de contrôle d'un élément

  1. Dans l'Arborescence de contenu de l'écran, sélectionnez la liste déroulante en regard de l'élément.

  2. Dans la liste déroulante, sélectionnez le type de contrôle souhaité.

    La plupart des types de contrôles sont des types de contrôles intégrés.Vous pouvez également affecter au type de contrôle un contrôle personnalisé que vous créez à l'aide d'autres outils.Pour plus d'informations sur les contrôles personnalisés, consultez Comment : ajouter un contrôle personnalisé à un écran Silverlight.

Ajouter un contrôle personnalisé à un écran.

  1. Dans l'Arborescence de contenu de l'écran, sélectionnez un groupe.

  2. En haut du Concepteur d'écran, cliquez sur Ajouter un élément de disposition, puis cliquez sur Contrôle personnalisé.

    Pour plus d'informations, consultez Comment : ajouter un contrôle personnalisé à un écran Silverlight.

Annuler des modifications

  • Dans le menu Edition, cliquez sur Annuler.

    ConseilConseil

    Si vous annulez par erreur une modification dans le Concepteur d'écran, dans le menu Edition, cliquez sur Rétablir.

Choisir si une collection affiche des données lorsque l'écran est chargé pour la première fois

  1. Dans la Listes des membres de l'écran du Concepteur d'écran, sélectionnez le titre d'une collection (par exemple, le titre OrderCollection ).

  2. Dans la fenêtre Propriétés, désactivez la case à cocher Exécution automatique de la requête si vous ne voulez pas que la collection affiche des données lorsque l'écran s'ouvre.Activez la case à cocher Exécution automatique de la requête, si vous voulez que la collection affiche des données lorsque l'écran s'affiche.

Activer ou désactiver la pagination

  1. Dans la Listes des membres de l'écran du Concepteur d'écran, sélectionnez le titre d'une collection (par exemple, le titre OrderCollection ).

  2. Dans la fenêtre Propriétés, désactivez la case à cocher Prendre en charge la pagination si vous voulez que les utilisateurs consultent toutes les lignes retournées par une requête même si la collection de lignes est volumineuse.Activez la case à cocher Prendre en charge la pagination si vous voulez limiter le nombre d'enregistrements qui s'affichent à l'utilisateur lorsqu'une requête retourne un grand nombre d'enregistrements.

  3. Si vous sélectionnez Prendre en charge la pagination, sous Nombre d' éléments à afficher par page, spécifiez le nombre de lignes que vous voulez afficher à l'utilisateur.

    [!REMARQUE]

    Les utilisateurs peuvent faire défiler des ensembles de lignes en cliquant sur un lien à l'écran.

Activer ou désactiver le tri

  1. Dans la Listes des membres de l'écran du Concepteur d'écran, sélectionnez le titre d'une collection (par exemple, le titre OrderCollection ).

  2. Dans la fenêtre Propriétés, désactivez la case à cocher Prendre en charge le tri si vous ne voulez pas que les utilisateurs trient les données qui s'affichent pour la collection.Activez la case à cocher Prendre en charge la pagination, si vous voulez permettre aux utilisateurs de trier les données qui s'affichent pour la collection.

Activer ou désactiver la recherche

  1. Dans la Listes des membres de l'écran du Concepteur d'écran, sélectionnez le titre d'une collection (par exemple, le titre OrderCollection ).

  2. Dans la fenêtre Propriétés, désactivez la case à cocher Prendre en charge la recherche si vous ne voulez pas qu'une zone de recherche s'affiche au-dessus de la collection.Activez la case à cocher Prendre en charge la requête, si vous voulez qu'une zone de recherche s'affiche au-dessus de la collection.Pour plus d'informations sur la façon de permettre aux utilisateurs de rechercher des données, consultez How to: Enable the User to Search Data.

Voir aussi

Tâches

Comment : personnaliser un écran Silverlight dans une application en cours d'exécution

Comment : ajouter une propriété locale à un écran Silverlight

Comment : ajouter une commande personnalisée à un écran Silverlight

Comment : Ajouter des données à un écran

Autres ressources

Écrans : l'interface utilisateur de votre application