Liens hypertexteHyperlinks

Les liens hypertexte redirigent l’utilisateur vers une autre partie de l’application ou une autre application, ou lancent un URI spécifique dans une application de navigateur distincte.Hyperlinks navigate the user to another part of the app, to another app, or launch a specific uniform resource identifier (URI) using a separate browser app. Vous pouvez ajouter un lien hypertexte à une application XAML de deux façons : à l’aide d’un élément de texte Hyperlink ou d’un contrôle HyperlinkButton.There are two ways that you can add a hyperlink to a XAML app: the Hyperlink text element and HyperlinkButton control.

API de plateforme  : élément de texte Hyperlink, contrôle HyperlinkButtonPlatform APIs : Hyperlink text element, HyperlinkButton control

Bouton Lien hypertexte

Est-ce le contrôle approprié ?Is this the right control?

Utilisez un lien hypertexte lorsque vous avez besoin de texte qui réponde lorsqu’il est sélectionné et dirige l’utilisateur vers plus d’informations.Use a hyperlink when you need text that responds when selected and navigates the user to more information about the text that was selected.

Choisissez le type de lien hypertexte approprié en fonction de vos besoins :Choose the right type of hyperlink based on your needs:

  • Utilisez un élément de texte Hyperlink inclus dans un contrôle de texte.Use an inline Hyperlink text element inside of a text control. Un élément Hyperlink comprend d’autres éléments de texte et vous pouvez l’utiliser dans toute collection InlineCollection.A Hyperlink element flows with other text elements and you can use it in any InlineCollection. Utilisez un lien hypertexte de type texte si vous souhaitez un saut de ligne automatique et si vous n’avez pas nécessairement besoin d’une cible large.Use a text hyperlink if you want automatic text wrapping and don't necessarily need a large hit target. Le texte du lien hypertexte peut être petit et difficile à cibler, notamment pour les fonctions tactiles.Hyperlink text can be small and difficult to target, especially for touch.
  • Utilisez un contrôle HyperlinkButton pour les liens hypertexte autonomes.Use a HyperlinkButton for stand-alone hyperlinks. Un contrôle HyperlinkButton est un contrôle Button spécialisé que vous pouvez utiliser à tout endroit où vous utiliseriez un bouton.A HyperlinkButton is a specialized Button control that you can use anywhere that you would use a Button.
  • Utilisez un contrôle HyperlinkButton avec un élément Image comme contenu pour créer une image sur laquelle vous pouvez cliquer.Use a HyperlinkButton with an Image as its content to make a clickable image.

ExemplesExamples

Galerie de contrôles XAMLXAML Controls Gallery
XAML controls gallery

Si vous disposez de l'application Galerie de contrôles XAML, cliquez ici pour ouvrir l’application et voir l'objet HyperlinkButton en action.If you have the XAML Controls Gallery app installed, click here to open the app and see the HyperlinkButton in action.

Cet exemple montre comment utiliser un élément de texte Hyperlink à l’intérieur d’un TextBlock.This example shows how to use a Hyperlink text element inside of a TextBlock.

<StackPanel Width="200">
    <TextBlock Text="Privacy" Style="{StaticResource SubheaderTextBlockStyle}"/>
    <TextBlock TextWrapping="WrapWholeWords">
        <Span xml:space="preserve"><Run>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Read the </Run><Hyperlink NavigateUri="http://www.contoso.com">Contoso Privacy Statement</Hyperlink><Run> in your browser.</Run> Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue.</Span>
    </TextBlock>
</StackPanel>

Le lien hypertexte s’affiche en ligne avec le texte qui l’entoure :The hyperlink appears inline and flows with the surrounding text:

Exemple de lien hypertexte en tant qu’élément de texte

Conseil  Quand vous utilisez un élément Hyperlink dans un contrôle de texte avec d’autres éléments de texte en XAML, placez le contenu dans un conteneur Span et appliquez l’attribut xml:space="preserve" au conteneur Span pour conserver l’espace blanc entre l’élément Hyperlink et les autres éléments.Tip  When you use a Hyperlink in a text control with other text elements in XAML, place the content in a Span container and apply the xml:space="preserve" attribute to the Span to keep the white space between the Hyperlink and other elements.

Créer un HyperlinkButtonCreate a HyperlinkButton

Voici comment utiliser un HyperlinkButton, avec un texte et une image.Here's how to use a HyperlinkButton, both with text and with an image.

<StackPanel>
    <TextBlock Text="About" Style="{StaticResource TitleTextBlockStyle}"/>
    <HyperlinkButton NavigateUri="http://www.contoso.com">
        <Image Source="Assets/ContosoLogo.png"/>
    </HyperlinkButton>
    <TextBlock Text="Version: 1.0.0001" Style="{StaticResource CaptionTextBlockStyle}"/>
    <HyperlinkButton Content="Contoso.com" NavigateUri="http://www.contoso.com"/>
    <HyperlinkButton Content="Acknowledgments" NavigateUri="http://www.contoso.com"/>
    <HyperlinkButton Content="Help" NavigateUri="http://www.contoso.com"/>
</StackPanel>

Les boutons de lien hypertexte incluant du texte s’affichent en tant que texte marqué.The hyperlink buttons with text content appear as marked-up text. L’image du logo Contoso est également un lien hypertexte sur lequel vous pouvez cliquer :The Contoso logo image is also a clickable hyperlink:

Exemple de lien hypertexte en tant que contrôle de bouton

Cet exemple montre comment créer un contrôle HyperlinkButton dans le code.This example shows how to create a HyperlinkButton in code.

var helpLinkButton = new HyperlinkButton();
helpLinkButton.Content = "Help";
helpLinkButton.NavigateUri = new Uri("http://www.contoso.com");

Gérer la navigationHandle navigation

Pour les deux types de liens hypertexte, vous gérez navigation de la même manière. Vous pouvez définir la propriété NavigateUri ou gérez l’événement Click.For both kinds of hyperlinks, you handle navigation the same way; you can set the NavigateUri property, or handle the Click event.

Accéder à un URINavigate to a URI

Pour utiliser le lien hypertexte afin d’accéder à un URI, définissez la propriété NavigateUri.To use the hyperlink to navigate to a URI, set the NavigateUri property. Lorsqu’un utilisateur clique ou appuie sur le lien hypertexte, l’URI spécifié s’ouvre dans le navigateur par défaut.When a user clicks or taps the hyperlink, the specified URI opens in the default browser. Le navigateur par défaut s’exécute dans un processus distinct de votre application.The default browser runs in a separate process from your app.

Notes

Un URI est représenté par la classe Windows.Foundation.Uri.A URI is represented by the Windows.Foundation.Uri class. Lors de la programmation avec .NET, cette classe est masquée et vous devez utiliser la classe System.Uri.When programming with .NET, this class is hidden and you should use the System.Uri class. Pour plus d’informations, consultez les pages de référence de ces classes.For more info, see the reference pages for these classes.

Vous n’êtes pas tenu d’utiliser les schémas http: ou https: .You don't have to use http: or https: schemes. Vous pouvez utiliser des schémas tels que ms-appx: , ms-appdata: ou ms-ressources: si le contenu des ressources à ces emplacements peut être chargé dans un navigateur.You can use schemes such as ms-appx: , ms-appdata: , or ms-resources: , if there's resource content at these locations that's appropriate to load in a browser. Toutefois, le schéma file: est bloqué.However, the file: scheme is specifically blocked. Pour plus d’informations, voir Schémas d’URI.For more info, see URI schemes.

Quand un utilisateur clique sur le lien hypertexte, la valeur de la propriété NavigateUri est transmise à un gestionnaire de système pour les schémas et types d’URI.When a user clicks the hyperlink, the value of the NavigateUri property is passed to a system handler for URI types and schemes. Ensuite, le système lance l’application qui est inscrite pour le schéma d’URI fourni pour NavigateUri.The system then launches the app that is registered for the scheme of the URI provided for NavigateUri.

Si vous ne souhaitez pas que le lien hypertexte charge du contenu dans un navigateur web par défaut (et que vous ne voulez pas qu’un navigateur apparaisse), alors ne définissez pas de valeur pour NavigateUri.If you don't want the hyperlink to load content in a default Web browser (and don't want a browser to appear), then don't set a value for NavigateUri. À la place, gérez l’événement Click et écrivez le code correspondant à ce que vous voulez faire.Instead, handle the Click event, and write code that does what you want.

Gérer l’événement ClickHandle the Click event

Utilisez l’événement Click pour les actions autres que le lancement d’un URI dans un navigateur, tel que la navigation au sein de l’application.Use the Click event for actions other than launching a URI in a browser, such as navigation within the app. Par exemple, si vous souhaitez charger une nouvelle page d’application plutôt que d’ouvrir un navigateur, appelez une méthode Frame.Navigate au sein de votre gestionnaire d’événements Click pour naviguer vers la nouvelle page d’application.For example, if you want to load a new app page rather than opening a browser, call a Frame.Navigate method within your Click event handler to navigate to the new app page. Si vous souhaitez qu’un URI absolu et externe effectue le chargement dans un contrôle WebView qui existe également dans votre application, appelez WebView.Navigate dans le cadre de votre logique de gestionnaire d’événements Click.If you want an external, absolute URI to load within a WebView control that also exists in your app, call WebView.Navigate as part of your Click handler logic.

En règle générale, vous n’avez pas à gérer l’événement Click et à spécifier de valeur pour NavigateUri en même temps, puisqu’il s’agit de deux méthodes distinctes d’utilisation de l’élément de lien hypertexte.You don't typically handle the Click event as well as specifying a NavigateUri value, as these represent two different ways of using the hyperlink element. Si vous souhaitez que l’URI s’ouvre dans le navigateur par défaut, et que vous avez spécifié une valeur pour NavigateUri, ne gérez pas l’événement Click.If your intent is to open the URI in the default browser, and you have specified a value for NavigateUri, don't handle the Click event. À l’inverse, si vous gérez l’événement Click, ne spécifiez pas de valeur pour NavigateUri.Conversely, if you handle the Click event, don't specify a NavigateUri.

Vous ne pouvez rien faire au niveau du gestionnaire d’événements Click pour empêcher le navigateur par défaut de charger toute cible valide spécifiée pour NavigateUri. En effet, cette action se déclenche automatiquement (de manière asynchrone) lorsque le lien hypertexte est activé et ne peut être annulée à partir du gestionnaire d’événements Click.There's nothing you can do within the Click event handler to prevent the default browser from loading any valid target specified for NavigateUri; that action takes place automatically (asynchronously) when the hyperlink is activated and can't be canceled from within the Click event handler.

Par défaut, les liens hypertexte sont soulignés.By default, hyperlinks are underlined. Ce trait de soulignement est important, car il permet de répondre aux exigences d’accessibilité.This underline is important because it helps meet accessibility requirements. Les utilisateurs daltoniens utilisent le trait de soulignement pour distinguer les liens hypertexte du reste du texte.Color-blind users use the underline to distinguish between hyperlinks and other text. Si vous désactivez les traits de soulignement, pensez à ajouter un type de format spécial permettant de distinguer les liens hypertexte du reste du texte, tel que FontWeight ou FontStyle.If you disable underlines, you should consider adding some other type of formatting difference to distinguish hyperlinks from other text, such as FontWeight or FontStyle.

Éléments de texte HyperlinkHyperlink text elements

Vous pouvez définir la propriété UnderlineStyle pour désactiver le trait de soulignement.You can set the UnderlineStyle property to disable the underline. Si vous le désactivez, pensez à utiliser FontWeight ou FontStyle pour différencier le texte du lien du reste du texte.If you do, consider using FontWeight or FontStyle to differentiate your link text.

HyperlinkButtonHyperlinkButton

Par défaut, l’élément HyperlinkButton s’affiche sous forme de texte souligné lorsque vous définissez une chaîne comme valeur pour la propriété Content.By default, the HyperlinkButton appears as underlined text when you set a string as the value for the Content property.

Le texte n’apparaît pas souligné dans les cas suivants :The text does not appear underlined in the following cases:

  • Si vous définissez un TextBlock comme valeur pour la propriété Content et définissez la propriété Text sur TextBlock.You set a TextBlock as the value for the Content property, and set the Text property on the TextBlock.
  • Si vous redéfinissez le modèle de l’élément HyperlinkButton et modifiez le nom de la partie du modèle ContentPresenter.You re-template the HyperlinkButton and change the name of the ContentPresenter template part.

Si vous avez besoin d’un bouton qui apparaît sous forme de texte non souligné, pensez à utiliser un contrôle Button standard et à appliquer la ressource du système TextBlockButtonStyle intégrée à sa propriété Style.If you need a button that appears as non-underlined text, consider using a standard Button control and applying the built-in TextBlockButtonStyle system resource to its Style property.

Cette section s’applique uniquement à l’élément de texte Hyperlink et non au contrôle HyperlinkButton.This section applies only to the Hyperlink text element, not to the HyperlinkButton control.

Événements d’entréeInput events

Dans la mesure où un élément Hyperlink n’est pas un UIElement, il n’a pas l’ensemble des événements d’entrée d’élément d’interface utilisateur tels que Tapped, PointerPressed, etc.Because a Hyperlink is not a UIElement, it does not have the set of UI element input events such as Tapped, PointerPressed, and so on. À la place, un élément Hyperlink possède son propre événement Click et le comportement implicite du système qui charge tout URI spécifié en tant que valeur pour NavigateUri.Instead, a Hyperlink has its own Click event, plus the implicit behavior of the system loading any URI specified as the NavigateUri. Le système gère toutes les actions d’entrée qui doivent appeler les actions Hyperlink et déclenche l’événement Click en réponse.The system handles all input actions that should invoke the Hyperlink actions and raises the Click event in response.

ContenuContent

L’élément Hyperlink a des restrictions sur le contenu qui peut exister dans sa collection Inlines.Hyperlink has restrictions on the content that can exist in its Inlines collection. Plus précisément, un élément Hyperlink autorise uniquement les types Run et d’autres types Span qui ne sont pas un autre élément Hyperlink.Specifically, a Hyperlink only permits Run and other Span types that aren't another Hyperlink. InlineUIContainer ne peut pas être dans la collection Inlines d’un élément Hyperlink.InlineUIContainer can't be in the Inlines collection of a Hyperlink. Toute tentative d’ajout de contenu restreint lève une exception d’argument invalide ou une exception d’analyse XAML.Attempting to add restricted content throws an invalid argument exception or XAML parse exception.

Élément Hyperlink et comportement de thème/styleHyperlink and theme/style behavior

L’élément Hyperlink n’hérite pas de Control, il n’a donc pas de propriété Style ni de Template.Hyperlink doesn't inherit from Control, so it doesn't have a Style property or a Template. Vous pouvez modifier les propriétés qui sont héritées de TextElement, tel que Foreground ou FontFamily, pour changer l’apparence d’un élément Hyperlink. Cependant, vous ne pouvez pas utiliser de style ou de modèle commun pour appliquer des modifications.You can edit the properties that are inherited from TextElement, such as Foreground or FontFamily, to change the appearance of a Hyperlink, but you can't use a common style or template to apply changes. Au lieu d’utiliser un modèle, pensez à utiliser des ressources communes pour les valeurs des propriétés de l’élément Hyperlink afin de garantir la cohérence.Instead of using a template, consider using common resources for values of Hyperlink properties to provide consistency. Certaines propriétés de l’élément Hyperlink utilisent par défaut la valeur d’extension de balisage {ThemeResource} fournie par le système.Some properties of Hyperlink use defaults from a {ThemeResource} markup extension value provided by the system. Cela permet à l’apparence de l’élément Hyperlink de s’adapter aux modifications du thème du système apportées par l’utilisateur au moment de l’exécution.This enables the Hyperlink appearance to switch in appropriate ways when the user changes the system theme at run-time.

La couleur par défaut du lien hypertexte est la couleur d’accentuation du système.The default color of the hyperlink is the accent color of the system. Vous pouvez définir la propriété Foreground pour remplacer celle-ci.You can set the Foreground property to override this.

RecommandationsRecommendations

  • Utilisez uniquement les liens hypertexte pour la navigation. Ne les utilisez pas pour d’autres actions.Only use hyperlinks for navigation; don't use them for other actions.
  • Utilisez le style Body de la gamme de types pour les liens hypertexte de type texte.Use the Body style from the type ramp for text-based hyperlinks. Voir fonts and the Windows 10 type ramp.Read about fonts and the Windows 10 type ramp.
  • Gardez les liens hypertexte suffisamment éloignés les uns des autres pour que l’utilisateur puisse les distinguer et les sélectionner aisément.Keep discrete hyperlinks far enough apart so that the user can differentiate between them and has an easy time selecting each one.
  • Ajoutez des info-bulles aux liens hypertexte pour indiquer à l’utilisateur l’emplacement vers lequel il va être dirigé.Add tooltips to hyperlinks that indicate to where the user will be directed. Si l’utilisateur est dirigé vers un site externe, insérez le nom de domaine de niveau supérieur dans l’info-bulle, puis appliquez un style au texte avec une couleur de police secondaire.If the user will be directed to an external site, include the top-level domain name inside the tooltip, and style the text with a secondary font color.

Obtenir l’exemple de codeGet the sample code

Pour les développeurs (XAML)For developers (XAML)