Delen via

Hyperlinks

Hyperlinks verwijzen de gebruiker naar een ander deel van de app, naar een andere app, of starten een specifieke URI (Uniform Resource Identifier) met behulp van een externe browser-app. Er zijn twee manieren om een hyperlink toe te voegen aan een XAML-app: het Hyperlink-textelement en de HyperlinkButton besturingselement.

Hyperlinkknop

Is dit de juiste controle?

Gebruik een hyperlink wanneer u tekst nodig hebt die reageert wanneer erop wordt gedrukt en navigeert de gebruiker naar meer informatie over de tekst die is ingedrukt.

Kies het juiste type hyperlink op basis van uw behoeften:

  • Gebruik een inline Hyperlink tekstelement binnen een tekstcontrole. Een hyperlinkelement stroomt met andere tekstelementen en u kunt dit gebruiken in elke InlineCollection. Gebruik een teksthyperlink als u automatische tekstterugloop wilt en niet per se een groot klikgebied nodig hebt. Hyperlinktekst kan klein en moeilijk te bereiken zijn, met name voor aanraking.
  • Gebruik een HyperlinkButton voor zelfstandige hyperlinks. Een HyperlinkButton is een gespecialiseerd knoppenbesturingselement dat u overal kunt gebruiken waar u een knop zou gebruiken.
  • Gebruik een HyperlinkButton met een afbeelding als inhoud om een klikbare afbeelding te maken.

Aanbevelingen

  • Gebruik alleen hyperlinks voor navigatie; gebruik ze niet voor andere acties.
  • Gebruik de stijl Hoofdtekst van het type ramp voor hyperlinks op basis van tekst. Lees meer over lettertypen en de Windows-lettertypenramp.
  • Houd discrete koppelingen ver genoeg uit elkaar, zodat de gebruiker onderscheid kan maken tussen hen en gemakkelijk elke koppeling kan selecteren.
  • Knopinfo toevoegen aan hyperlinks die aangeven waar de gebruiker naartoe wordt geleid. Als de gebruiker wordt omgeleid naar een externe site, neemt u de domeinnaam op het hoogste niveau op in de knopinfo en typt u de tekst met een secundaire tekstkleur.

Een hyperlinktekstelement maken

In dit voorbeeld ziet u hoe u een hyperlinktekstelement in een TextBlock gebruikt.

<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>

De hyperlink wordt inline weergegeven en stroomt mee met de omringende tekst.

Voorbeeld van een hyperlink als tekstelement

Aanbeveling

Wanneer u een hyperlink in een tekst besturingselement gebruikt met andere tekstelementen in XAML, plaatst u de inhoud in een container Span en past u het kenmerk xml:space="preserve" toe op de spanruimte om de witruimte tussen de hyperlink en andere elementen te behouden.

Een hyperlinkbutton maken

Open de WinUI 3 Gallery-app en bekijk de hyperlinks in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

U kunt als volgt een HyperlinkButton gebruiken, zowel met tekst als met een afbeelding.

<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>

De hyperlinkknoppen met tekstinhoud worden weergegeven als gemarkeerde tekst. De afbeelding van het Contoso-logo is ook een klikbare hyperlink:

Voorbeeld van een hyperlink als knop

In dit voorbeeld ziet u hoe u een HyperlinkButton maakt in code.

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

Navigatie afhandelen

Voor beide soorten hyperlinks verwerkt u navigatie op dezelfde manier; u kunt de eigenschap NavigateUri instellen of de gebeurtenis Click afhandelen.

Als u de hyperlink wilt gebruiken om naar een URI te navigeren, stelt u de eigenschap NavigateUri in. Wanneer een gebruiker op de hyperlink klikt of tikt, wordt de opgegeven URI geopend in de standaardbrowser. De standaardbrowser wordt uitgevoerd in een afzonderlijk proces van uw app.

Opmerking

Een URI wordt vertegenwoordigd door de klasse Windows.Foundation.Uri . Bij het programmeren met .NET is deze klasse verborgen en moet u de klasse System.Uri gebruiken. Zie de referentiepagina's voor deze klassen voor meer informatie.

Je hoeft geen http: of https: schema's te gebruiken. U kunt schema's zoals ms-appx:, ms-appdata:of ms-resources:gebruiken, indien er resource-inhoud is op deze locaties, die geschikt is voor het laden in een browser. Het bestandsschema wordt echter specifiek geblokkeerd. Zie URI-schema's voor meer informatie.

Wanneer een gebruiker op de hyperlink klikt, wordt de waarde van de eigenschap NavigateUri doorgegeven aan een systeemhandler voor URI-typen en -schema's. Het systeem start vervolgens de app die is geregistreerd voor het URI-schema dat is opgegeven voor NavigateUri.

Als u niet wilt dat de hyperlink inhoud in een standaardwebbrowser laadt (en niet wilt dat een browser wordt weergegeven), stelt u geen waarde in voor NavigateUri. In plaats daarvan moet u de gebeurtenis Click afhandelen en code schrijven die doet wat u wilt.

De gebeurtenis Click afhandelen

Gebruik de gebeurtenis Klikken voor andere acties dan het starten van een URI in een browser, zoals navigatie in de app. Als u bijvoorbeeld een nieuwe app-pagina wilt laden in plaats van een browser te openen, roept u een Frame.Navigate-methode aan in de click-gebeurtenis-handler om naar de nieuwe app-pagina te navigeren. Als u een externe, absolute URI wilt laden binnen een WebView-besturingselement dat ook in uw app aanwezig is, roept u WebView.Navigate aan als onderdeel van de logica van de klik-handler.

Normaal gesproken verwerkt u de Click-gebeurtenis niet, net zo min als dat u een NavigateUri-waarde opgeeft, omdat dit twee verschillende manieren vertegenwoordigt om het hyperlinkelement te gebruiken. Als u de URI in de standaardbrowser wilt openen en u een waarde voor NavigateUri hebt opgegeven, moet u de gebeurtenis Click niet verwerken. Als u daarentegen de click-gebeurtenis afhandelt, geeft u geen NavigateUri op.

Er is niets wat u kunt doen in de Click-gebeurtenishandler om te voorkomen dat de standaardbrowser een geldig doel laadt dat is opgegeven voor NavigateUri; deze actie wordt automatisch uitgevoerd (asynchroon) wanneer de hyperlink is geactiveerd en niet kan worden geannuleerd vanuit de gebeurtenis-handler Klik.

Hyperlinks worden standaard onderstreept. Deze onderstreping is belangrijk omdat het helpt te voldoen aan toegankelijkheidsvereisten. Kleurenblinde gebruikers gebruiken de onderstreping om onderscheid te maken tussen hyperlinks en andere tekst. Als u onderstrepingen uitschakelt, kunt u overwegen om een ander type opmaakverschil toe te voegen om hyperlinks te onderscheiden van andere tekst, zoals FontWeight of FontStyle.

Hyperlinktekstelementen

U kunt de eigenschap UnderlineStyle instellen om de onderstreping uit te schakelen. Als u dit doet, kunt u FontWeight of FontStyle gebruiken om uw koppelingstekst te onderscheiden.

Hyperlinkknop

De HyperlinkButton wordt standaard weergegeven als onderstreepte tekst wanneer u een tekenreeks instelt als de waarde voor de eigenschap Inhoud .

De tekst wordt in de volgende gevallen niet onderstreept weergegeven:

  • U stelt een TextBlock- in als de waarde voor de eigenschap Inhoud en stelt de eigenschap Text in op TextBlock.
  • U wijzigt de hyperlinkbutton opnieuw en wijzigt de naam van het sjabloononderdeel ContentPresenter .

Als u een knop nodig hebt die wordt weergegeven als niet-onderstreepte tekst, kunt u overwegen een standaardknopbesturingselement te gebruiken en de ingebouwde TextBlockButtonStyle systeemresource toe te passen op de eigenschap Stijl.

Notities voor hyperlinktekstelement

Deze sectie is alleen van toepassing op het Hyperlinktekst-element, niet op de HyperlinkButton.

Invoer gebeurtenissen

Omdat een hyperlink geen UIElement is, beschikt deze niet over de set invoergebeurtenissen van ui-elementen, zoals Getikt, PointerPressed, enzovoort. In plaats daarvan heeft een hyperlink een eigen Click-gebeurtenis, plus het impliciete gedrag van het systeem dat een URI laadt die is opgegeven als de NavigateUri. Het systeem verwerkt alle invoeracties die de hyperlinkacties moeten aanroepen en genereert de klik-gebeurtenis als reactie.

Content

Hyperlink heeft beperkingen voor de inhoud die in de verzameling Inlines kan bestaan. Hyperlink staat specifiek alleen Run en andere typen zoals Span toe, die geen andere hyperlink zijn. InlineUIContainer kan zich niet in de verzameling Inlines van een hyperlink bevinden. Als u beperkte inhoud probeert toe te voegen, wordt een ongeldige argument-uitzondering of XAML-parserings uitzondering gegenereerd.

Hyperlink erft niet van Besturingselement, dus heeft het geen Stijl eigenschap of een Sjabloon. U kunt de eigenschappen bewerken die zijn overgenomen van TextElement, zoals Foreground of FontFamily, om het uiterlijk van een hyperlink te wijzigen, maar u kunt geen algemene stijl of sjabloon gebruiken om wijzigingen toe te passen. In plaats van een sjabloon te gebruiken, kunt u algemene resources gebruiken voor waarden van hyperlinkeigenschappen om consistentie te bieden. Sommige eigenschappen van Hyperlink gebruiken standaardwaarden van een extensiewaarde voor {ThemeResource} die door het systeem wordt geleverd. Hierdoor kan het uiterlijk van de hyperlink op de juiste manieren worden overgeschakeld wanneer de gebruiker het systeemthema tijdens runtime wijzigt.

De standaardkleur van de hyperlink is de accentkleur van het systeem. Door de eigenschap Voorgrond in te stellen, kunt u dit overrulen.

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API's voor deze controle bevinden zich in de naamruimte Windows.UI.Xaml.Controls.

  • Last updated on