Comment : personnaliser l'apparence des contrôles serveur Web SiteMapPath

Mise à jour : novembre 2007

Il est possible de personnaliser l'aspect visuel des contrôles de navigation de site en définissant leurs attributs, ou en configurant les modèles disponibles. Les modèles et les styles sont appliqués aux liens conformément à deux règles de priorité qui sont décrites dans la section Notes de SiteMapPath.

Ou bien, vous pouvez appliquer un thème ou une apparence à un contrôle, ou développer des contrôles de navigation de site personnalisés qui répondent à vos besoins en matière de rendu. Pour plus d'informations sur l'application de thèmes aux contrôles Web, consultez Comment : personnaliser le contrôle ASP.NET CreateUserWizard.

Le contrôle SiteMapPath affiche un chemin de navigation, également appelé fil d'Ariane (breadcrumbs) ou « sourcil » (eyebrow), qui affiche des liens sous la forme d'un chemin reliant la page active à la page d'accueil du site Web. Sur une page ASP.NET, le contrôle SiteMapPath affiche des éléments semblables aux suivants :

Home > Services > Training

Les contrôles TreeView et Menu restituent également des données sitemap et, de la même façon que le contrôle SiteMapPath, peuvent être personnalisés comme la plupart des autres contrôles Web. Cette rubrique décrit comment utiliser les fonctions de personnalisation suivantes du contrôle serveur Web SiteMapPath :

• Spécifier les caractères ou images qui sont affichés entre les liens.

• Inverser le sens du chemin de navigation.

• Spécifier le nombre de liens parents qui sont affichés.

Les procédures de cette rubrique supposent que vous avez déjà créé un plan de site et une page qui contient un contrôle SiteMapPath. Vous pouvez utiliser l'exemple de fichier Web.sitemap dans Plans de sites ASP.NET.

Pour personnaliser les propriétés de style du lien

1. Dans une page Web ASP.NET qui contient un contrôle SiteMapPath, ajoutez les propriétés suivantes au contrôle :

   RootNodeStyle-Font-Names="Verdana"
   RootNodeStyle-ForeColor="Orange"
   RootNodeStyle-BorderWidth=2
   

   Par exemple, le code du contrôle SiteMapPath pourra ressembler à celui-ci :

   <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
     SkipLinkText="Skip Menu"
     RootNodeStyle-Font-Names="Verdana"
     RootNodeStyle-ForeColor="Orange"
     RootNodeStyle-BorderWidth=2 >
   </asp:SiteMapPath>
   

   La plupart des propriétés décrites dans les classes Style et FontInfo sont disponibles, y compris la propriété CssClass.

2. Si vous souhaitez que le style de chaque lien soit différent, répétez l'étape précédente avec les propriétés ParentNodeStyle, CurrentNodeStyle et PathSeperatorStyle du contrôle SiteMapPath.

   Remarque :
   Pour améliorer les performances, vous pouvez utiliser la propriété NodeTemplate afin de personnaliser le style de tous les liens à la fois. Pour plus d'informations, consultez Modèles de contrôles serveur Web ASP.NET.

Pour personnaliser un caractère qui est affiché entre des liens

• Dans une page Web ASP.NET qui contient un contrôle SiteMapPath, ajoutez la propriété PathSeparator au contrôle :

  Par exemple, le code du contrôle SiteMapPath pourra ressembler à celui-ci :

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
    PathSeparator=" :: ">
  </asp:SiteMapPath>
  

  Le contrôle SiteMapPath affichera des éléments ressemblant aux suivants :

  Home :: Services :: Training

  Vous pouvez utiliser n'importe quelle chaîne pour séparer les liens, mais pour utiliser une image, procédez comme suit.

Pour spécifier une image qui soit affichée entre des liens

• Dans une page Web ASP.NET qui contient un contrôle SiteMapPath, ajoutez les lignes de code suivantes au contrôle :

  <PathSeparatorTemplate>
    <asp:Image ID="Image1" Runat="Server" 
      Width="20" 
      ImageUrl="Images/PathSeparatorImage.jpg" />
    </PathSeparatorTemplate>
  </PathSeparatorTemplate>
  

  Par exemple, le code du contrôle SiteMapPath pourra ressembler à celui-ci :

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server" >
    <PathSeparatorTemplate>
      <asp:Image ID="Image1" Runat="Server" 
        Width="20" 
        ImageUrl="Images/PathSeparatorImage.jpg" />
      </PathSeparatorTemplate>
    </PathSeparatorTemplate>
  </asp:SiteMapPath>
  

Pour inverser le sens du chemin d'accès affiché par le contrôle SiteMapPath

• Dans une page Web ASP.NET qui contient un contrôle SiteMapPath, ajoutez les propriétés PathDirection et PathSeparator au contrôle :

  Par exemple, le code du contrôle SiteMapPath pourra ressembler à celui-ci :

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
    PathDirection="CurrentToRoot"
    PathSeparator=" <-- " >
  </asp:SiteMapPath>
  

Pour limiter le nombre de liens parents affichés

• Dans une page Web ASP.NET qui contient un contrôle SiteMapPath, ajoutez la propriété ParentLevelsDisplayed au contrôle :

  Par exemple, le code pour un SiteMapPath contrôle qui affichera deux liens parents au maximum pourra ressembler à celui-ci :

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
    ParentLevelsDisplayed="2" >
  </asp:SiteMapPath>
  

Accessibilité

Les contrôles de navigation de site sont utilisés en général sur chaque page d'un site Web. Les lecteurs d'écran et autres périphériques d'aide lisent à haute voix le texte d'un contrôle de navigation à chaque visite d'une page et à chaque publication.

Les contrôles de navigation de site SiteMapPath, TreeView et Menu comportent chacun une propriété appelée SkipLinkText qui permet d'ignorer les informations répétées sur les pages suivantes ou les autres vues de la même page.

Pour utiliser la fonctionnalité d'annulation de l'accessibilité

• Dans une page Web ASP.NET qui contient un contrôle de navigation, ajoutez la propriété suivante au contrôle :

  SkipLinkText="Skipped Menu"
  

  Par exemple, le code d'un contrôle SiteMapPath pourra ressembler à celui-ci :

  <asp:SiteMapPath ID="SiteMapPath1" 
    Runat="server" 
    SkipLinkText="Skip Breadcrumb">
  </asp:SiteMapPath>
  

Voir aussi

Tâches

Comment : personnaliser le contrôle ASP.NET CreateUserWizard

Concepts

Vue d'ensemble de la navigation de site ASP.NET

Modèles de contrôles serveur Web ASP.NET

Vue d'ensemble du contrôle serveur Web SiteMapPath

Personnalisation de l'apparence du contrôle serveur Web TreeView

Sécurisation de la navigation de site ASP.NET

Sécurisation de l'accès aux données

Autres ressources

Sécurité des applications ASP.NET dans les environnements hébergés