Partager via

Liens hypertexte

  • Article

Les liens hypertexte naviguent l’utilisateur vers une autre partie de l’application, vers une autre application ou lancez un URI (Uniform Resource Identifier) spécifique à l’aide d’une application de navigateur distincte. Il existe deux façons d’ajouter un lien hypertexte à une application XAML : l’élément de texte Hyperlink et le contrôle HyperlinkButton.

Bouton Lien hypertexte

Est-ce le contrôle approprié ?

Utilisez un lien hypertexte lorsque vous avez besoin d’un texte qui répond lorsque vous appuyez sur l’utilisateur et navigue vers plus d’informations sur le texte appuyé.

Choisissez le type de lien hypertexte approprié en fonction de vos besoins :

  • Utilisez un élément de texte lien hypertexte inline à l’intérieur d’un contrôle de texte. Un élément Hyperlink circule avec d’autres éléments de texte et vous pouvez l’utiliser dans n’importe quel inlineCollection. Utilisez un lien hypertexte de texte si vous souhaitez encapsuler automatiquement du texte et n’avez pas nécessairement besoin d’une cible atteinte importante. Le texte du lien hypertexte peut être petit et difficile à cibler, en particulier pour l’interaction tactile.
  • Utilisez un HyperlinkButton pour les liens hypertexte autonomes. Un HyperlinkButton est un contrôle Button spécialisé que vous pouvez utiliser n’importe où vous utiliseriez un bouton.
  • Utilisez un HyperlinkButton avec une image comme contenu pour créer une image cliquable.

Recommandations

  • Utilisez uniquement des liens hypertexte pour la navigation ; ne les utilisez pas pour d’autres actions.
  • Utilisez le style Corps de la rampe de type pour les liens hypertexte textuels. Découvrez les polices et la rampe de type Windows.
  • Conservez les liens hypertexte discrets assez éloignés pour que l’utilisateur puisse les différencier et avoir un temps facile à sélectionner chacun d’eux.
  • Ajoutez des info-bulles aux liens hypertexte qui indiquent où l’utilisateur sera dirigé. Si l’utilisateur est dirigé vers un site externe, incluez le nom de domaine de niveau supérieur à l’intérieur de l’info-bulle et stylez le texte avec une couleur de police secondaire.

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d'application Windows et WinUI 3, mais qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.

Les API de ce contrôle existent dans l’espace de noms Windows.UI.Xaml.Controls.

Créer un élément de texte Hyperlink

Cet exemple montre comment utiliser un élément de texte Hyperlink à l’intérieur d’un 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 apparaît inline et circule avec le texte environnant :

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

Conseil

Lorsque vous utilisez un lien hypertexte 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" à l’étendue pour conserver l’espace blanc entre le lien hypertexte et d’autres éléments.

Créer un HyperlinkButton

Ouvrez l’application galerie WinUI 3 et consultez les liens hypertexte en action.

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Voici comment utiliser un HyperlinkButton, à la fois avec du texte et une 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 avec du contenu texte apparaissent sous forme de texte marqué. L’image du logo Contoso est également un lien hypertexte cliquable :

Exemple de lien hypertexte en tant que contrôle bouton

Cet exemple montre comment créer un contrôle HyperlinkButton dans le code.

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

Gérer la navigation

Pour les deux types de liens hypertexte, vous gérez la navigation de la même façon ; vous pouvez définir la propriété NavigateUri ou gérer l’événement Click .

Pour utiliser le lien hypertexte pour accéder à un URI, définissez la propriété NavigateUri. Lorsqu’un utilisateur clique ou appuie sur le lien hypertexte, l’URI spécifié s’ouvre dans le navigateur par défaut. Le navigateur par défaut s’exécute dans un processus distinct de votre application.

Remarque

Un URI est représenté par la classe Windows.Foundation.Uri. Lors de la programmation avec .NET, cette classe est masquée et vous devez utiliser la classe System.Uri. Pour plus d’informations, consultez les pages de référence de ces classes.

Vous n’êtes pas tenu d’utiliser les schémas http: ou https:. 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. Toutefois, le schéma file: est bloqué. Pour plus d’informations, consultez schémas d’URI.

Lorsqu’un utilisateur clique sur le lien hypertexte, la valeur de la propriété NavigateUri est transmise à un gestionnaire système pour les types et schémas d’URI. Le système lance ensuite l’application inscrite pour le schéma de l’URI fourni pour NavigateUri.

Si vous ne souhaitez pas que le lien hypertexte charge le contenu dans un navigateur Web par défaut (et que vous ne souhaitez pas qu’un navigateur apparaisse), ne définissez pas de valeur pour NavigateUri. Au lieu de cela, gérez l’événement Click et écrivez du code qui fait ce que vous souhaitez.

Gérer l’événement Click

Utilisez l’événement Click pour les actions autres que le lancement d’un URI dans un navigateur, comme la navigation dans l’application. Par exemple, si vous souhaitez charger une nouvelle page d’application plutôt que d’ouvrir un navigateur, appelez une méthode Frame.Navigate dans votre gestionnaire d’événements Click pour accéder à la nouvelle page d’application. Si vous souhaitez qu’un URI absolu externe soit chargé dans un contrôle WebView qui existe également dans votre application, appelez WebView.Navigate dans le cadre de votre logique de gestionnaire Click.

Vous ne gérez généralement pas l’événement Click, ainsi que la spécification d’une valeur NavigateUri, car elles représentent deux façons différentes d’utiliser l’élément lien hypertexte. Si votre intention est d’ouvrir l’URI dans le navigateur par défaut et que vous avez spécifié une valeur pour NavigateUri, ne gérez pas l’événement Click. À l’inverse, si vous gérez l’événement Click, ne spécifiez pas de NavigateUri.

Vous ne pouvez rien faire dans le gestionnaire d’événements Click pour empêcher le navigateur par défaut de charger une cible valide spécifiée pour NavigateUri ; cette action a lieu automatiquement (de façon asynchrone) lorsque le lien hypertexte est activé et ne peut pas être annulé à partir du gestionnaire d’événements Click.

Par défaut, les liens hypertexte sont soulignés. Ce soulignement est important, car il permet de répondre aux exigences d’accessibilité. Les utilisateurs aveugles en couleur utilisent le soulignement pour faire la distinction entre les liens hypertexte et d’autres textes. Si vous désactivez les soulignements, vous devez envisager d’ajouter un autre type de différence de mise en forme pour distinguer les liens hypertexte d’autres textes, tels que FontWeight ou FontStyle.

Éléments de texte Hyperlink

Vous pouvez définir la propriété UnderlineStyle pour désactiver le soulignement. Si vous le faites, envisagez d’utiliser FontWeight ou FontStyle pour différencier votre texte de lien.

HyperlinkButton

Par défaut, hyperlinkButton apparaît sous forme de texte souligné lorsque vous définissez une chaîne comme valeur pour la propriété Content .

Le texte n’apparaît pas souligné dans les cas suivants :

Si vous avez besoin d’un bouton qui apparaît sous forme de texte non souligné, envisagez d’utiliser un contrôle Button standard et d’appliquer la ressource système intégrée TextBlockButtonStyle à sa propriété Style.

Remarques relatives à l’élément de texte Lien hypertexte

Cette section s’applique uniquement à l’élément de texte Hyperlink, et non au contrôle HyperlinkButton.

Événements d’entrée

Étant donné qu’un lien hypertexte n’est pas un élément UIElement, il n’a pas l’ensemble d’événements d’entrée d’élément d’interface utilisateur tels que Tapped, PointerPressed, etc. Au lieu de cela, un lien hypertexte a son propre événement Click, ainsi que le comportement implicite du système qui charge n’importe quel URI spécifié en tant que 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.

Contenu

Le lien hypertexte a des restrictions sur le contenu qui peut exister dans sa collection Inlines . Plus précisément, un lien hypertexte autorise uniquement l’exécution et d’autres types d’étendues qui ne sont pas un autre lien hypertexte. InlineUIContainer ne peut pas se trouver dans la collection Inlines d’un lien hypertexte. La tentative d’ajout de contenu restreint lève une exception d’argument non valide ou une exception d’analyse XAML.

Le lien hypertexte n’hérite pas du contrôle. Il n’a donc pas de propriété Style ou de modèle. Vous pouvez modifier les propriétés héritées de TextElement, telles que Foreground ou FontFamily, pour modifier l’apparence d’un lien hypertexte, mais vous ne pouvez pas utiliser de style ou de modèle commun pour appliquer des modifications. Au lieu d’utiliser un modèle, envisagez d’utiliser des ressources courantes pour les valeurs des propriétés hyperlink afin de fournir une cohérence. Certaines propriétés de Hyperlink utilisent par défaut une valeur d’extension de balisage {ThemeResource} fournie par le système. Cela permet à l’apparence du lien hypertexte de basculer de manière appropriée lorsque l’utilisateur modifie le thème système au moment de l’exécution.

La couleur par défaut du lien hypertexte est la couleur d’accentuation du système. Vous pouvez définir la propriété de premier plan pour la remplacer.

Obtenir l’exemple de code