Partager via

Menu, contrôle

  • Article

Le contrôle Menu vous permet de développer des menus qui s'affichent à la fois statiquement et dynamiquement pour vos pages Web ASP.NET. Vous pouvez configurer directement le contenu du contrôle Menu dans le contrôle lui-même, ou spécifier ce contenu en liant le contrôle à une source de données.

Pour ajouter un contrôle Menu à une page

  • Faites glisser le contrôle Menu du panneau Boîte à outils sur votre page.

Définition du contenu du menu

Vous pouvez définir le contenu du contrôle Menu de deux façons : en ajoutant des éléments de menu individuels interactivement (via un programme) ou en liant les données du contrôle à une source de données de type plan de site ou XML.

Pour définir les éléments du contrôle Menu

  1. En mode Création, cliquez avec le bouton droit sur le contrôle Menu , puis cliquez sur Afficher les tâches de contrôle courantes.

  2. Dans le menu Tâches DropDownList courantes, cliquez sur Modifier les éléments du menu.

  3. Dans la boîte de dialogue Éditeur d’éléments de menu, cliquez sur Ajouter un élément racineCc295472.ceca6b3c-d5cc-48da-9bd7-fffcc486d45d(fr-fr,Expression.40).jpg pour ajouter un élément.

  4. Dans la zone Propriétés, définissez les propriétés Texte et href , ainsi que toutes les autres propriétés que vous souhaitez définir pour l'élément du menu.

  5. Ajoutez des éléments racines supplémentaires ou ajoutez des éléments enfants à l’élément sélectionné en cliquant sur Ajouter un élément enfantCc295472.b6fcf26e-e12d-4faa-ad58-a448cb5d25b0(fr-fr,Expression.40).jpg.

  6. Une fois que vous avez ajouté plusieurs éléments de menu, vous pouvez ajuster l’ordre et le retrait en sélectionnant un élément, puis en cliquant sur Déplacer un élément vers le haut dans la liste de ses frèresCc295472.21730f68-38b2-45cd-980f-5a48feb6987d(fr-fr,Expression.40).jpg, Déplacer un élément vers le bas dans la liste de ses frèresCc295472.4cfe2717-2851-4922-bb52-9c38fdda20c4(fr-fr,Expression.40).jpg, Définir l’élément sélectionné en tant qu’enfant de son parentCc295472.b89d598e-1bab-4ec7-a256-e769699de3e6(fr-fr,Expression.40).jpg, Définir l’élément sélectionné en tant qu’enfant de son frère précédentCc295472.5d22e6e0-3cd4-4f0a-bc7d-69cd895fff90(fr-fr,Expression.40).jpg ou Supprimer un élémentCc295472.27e0c529-accb-4203-a5de-1deb9142cea6(fr-fr,Expression.40).jpg.

La liaison à un fichier XML vous permet de contrôler le contenu du menu à travers les modifications apportées au fichier plutôt qu'en utilisant le concepteur. Cela vous permet de mettre à jour l’aspect de la navigation dans votre site sans réviser le contrôle Menu ni modifier le code. Si le contenu de votre site est changeant par nature, vous pouvez utiliser un fichier XML pour l’organiser ; ce fichier peut être injecté dans le contrôle Menu pour veiller à ce que le contenu soit accessible aux utilisateurs du site.

Pour lier le contrôle Menu à une source de données

  1. En mode Création, cliquez avec le bouton droit sur le contrôle Menu , puis cliquez sur Afficher les tâches de contrôle courantes.

  2. Dans le menu Tâches courantes du contrôle DropDownList, cliquez sur une source de données existante ou sur <Nouvelle source de données> dans la liste déroulante Choisir une source de données.

    NoteRemarque :

    Il est possible de modifier les sources de données existantes dans le panneau Bibliothèque de sources de données.

  3. Si vous choisissez <Nouvelle source de données>, l’Assistant Configuration de source de données s’ouvre. Cliquez sur Plan de site ou Fichier XML dans la zone À partir d'où l'application obtiendra-t-elle les données ? et donnez un ID à la source de données dans la zone Spécifiez un ID pour la source de données.

  4. Si vous choisissez Fichier XML, dans la boîte de dialogue Configurer la source de données, spécifiez le fichier XML dans la zone Fichier de données et, éventuellement un fichier de transformation XSL ou une expression XPath pour la source de données XML.

  5. Cliquez sur OK dans la boîte de dialogue et dans l'assistant pour revenir au contrôle en mode Création.

  6. Cliquez avec le bouton droit sur le contrôle, puis cliquez sur Modifier les liaisons de données MenuItem dans le menu contextuel.

  7. Dans la liste Liaisons de données disponibles, sélectionnez un champ XML auquel vous voulez lier le menu, puis cliquez sur Ajouter.

  8. Sélectionnez le champ dans la liste Liaisons de données sélectionnées et définissez les valeurs des propriétés dans la zone Propriétés de liaison de données. Par exemple, pour spécifier le texte à afficher dans le menu, choisissez #InnerText dans la liste déroulante des propriétés TextField pour afficher le texte entre les balises de début et de fin de l'élément XML.

  9. Pour plus d’informations sur la liaison d’une source de données XML, ainsi que sur la programmation du contrôle Menu, voir Menu, classe Cc295472.xtlink_newWindow(fr-fr,Expression.40).png dans MSDN Library.

Apparence et comportement

Vous pouvez ajuster le comportement du contrôle Menu grâce à ses propriétés. En outre, vous pouvez contrôler le comportement d'affichage dynamique, notamment la durée pendant laquelle un nœud de menu reste visible une fois affiché. Par exemple, pour transformer l'orientation du menu du mode horizontal en vertical, vous pouvez définir la propriété Orientation sur Verticale.

Pour appliquer des modes de mise en forme de base au contrôle Menu

  1. En mode Création, cliquez avec le bouton droit sur le contrôle Menu , puis cliquez sur Afficher les tâches de contrôle courantes.

  2. Dans le menu Tâches de menu courantes, cliquez sur Mise en forme automatique.

  3. Dans la boîte de dialogue Format automatique, sélectionnez un mode dans la liste Sélectionner un mode. L'effet de votre mode sur le contrôle Menu est affiché dans la zone Aperçu.

  4. Cliquez sur OK pour appliquer le mode de mise en forme et fermer la boîte de dialogue ou sur Appliquer pour appliquer le mode de mise en forme sans fermer la boîte de dialogue.

Le Menu se compose de différentes zones de modèle. Vous pouvez également créer ces zones de façon interactive.

Pour concevoir un modèle de manière interactive

  1. En mode Création, cliquez avec le bouton droit sur le contrôle Menu , puis cliquez sur Afficher les tâches de contrôle courantes.

  2. Dans le menu Tâches de menu courantes, cliquez sur Modifier les modèles. Cela entraîne le basculement du Menu en Mode de modification des modèles.

  3. Dans le menu déroulant Affichage, sélectionnez le modèle à modifier.

  4. Ajoutez du texte ou des contrôles, ou modifiez le modèle.

  5. Une fois la conception des modèles terminée, cliquez sur Terminer la modification du modèle dans le menu Tâches de menu courantes, pour retourner au mode de création de menu standard.

Comme avec tous les contrôles ASP.NET, vous pouvez spécifier l'apparence et le comportement en définissant les propriétés dans le panneau Propriétés de la balise. Pour une description complète de toutes les propriétés du contrôle Menu, voir Membres Menu Cc295472.xtlink_newWindow(fr-fr,Expression.40).png dans MSDN Library.

Affichage statique et dynamique

Le contrôle Menu dispose de deux modes d’affichage : statique et dynamique. L'affichage statique signifie que le contrôle Menu est entièrement développé en permanence. La structure entière est visible et un utilisateur peut cliquer sur n'importe laquelle de ses parties. Dans un menu affiché dynamiquement, seules les parties que vous spécifiez sont statiques, tandis que leurs éléments de menu enfants s'affichent lorsque l'utilisateur maintient le pointeur de la souris au-dessus du nœud parent.

Vous pouvez choisir l’affichage du contrôle Menu en mode Création en tant que menu statique ou dynamique.

Pour concevoir des menus dynamiques ou statiques

  1. En mode Création, cliquez avec le bouton droit sur le contrôle Menu , puis cliquez sur Afficher les tâches de contrôle courantes.

  2. Dans le menu Tâches de menu courantes, choisissez Dynamique ou Statique dans la liste déroulante Vues. Le modèle bascule vers l'affichage choisi.

    • Comportement d'affichage statique

      Vous pouvez contrôler le comportement d'affichage statique à l'aide de la propriété StaticDisplayLevels du contrôle Menu. La propriété StaticDisplayLevels indique combien de niveaux doivent s'afficher statiquement à partir de la racine du menu. Par exemple, si StaticDisplayLevels a la valeur 3, votre menu sera développé de façon à afficher ses trois premiers niveaux statiquement. Le niveau d’affichage statique minimal est de 1 et le contrôle lève une exception si la valeur est 0 ou un nombre négatif.

    • Comportement d'affichage dynamique

      La propriété MaximumDynamicDisplayLevels spécifie combien de niveaux de nœuds de menu apparaissant dynamiquement doivent s'afficher après le niveau d'affichage statique. Par exemple, si votre menu a un niveau statique de 3 et un niveau dynamique de 2, les trois premiers niveaux de votre menu s’afficheront statiquement tandis que les deux niveaux suivants seront dynamiques.

      Si MaximumDynamicDisplayLevels a la valeur 0, aucun nœud de menu ne s’affichera dynamiquement. Si MaximumDynamicDisplayLevels a pour valeur un nombre négatif, une exception sera levée.

      Un des paramètres des menus dynamiques est le temps nécessaire pour que la partie du menu apparaissant dynamiquement disparaisse. Cette valeur s’exprime en millisecondes et peut être réglée à l’aide de la propriété DisappearAfter , par exemple, en lui attribuant la valeur 1 000 pour une seconde.

      La valeur par défaut s'élève à 500 millisecondes, soit une demi-seconde. Si la valeur de DisappearAfter est 0, une pause en dehors du contrôle Menu le fait immédiatement disparaître. Attribuer -1 à la valeur indique que le temps de pause doit être infini, et que ce n’est qu’en cliquant en dehors du contrôle Menu que la partie dynamique disparaîtra.

Voir aussi

Concepts

contrôles de navigation ASP.NET
SiteMapPath, contrôle
TreeView, contrôle