Hyperlänkar

Hyperlänkar navigerar användaren till en annan del av appen, till en annan app eller startar en specifik URI (uniform resource identifier) med en separat webbläsarapp. Det finns två sätt att lägga till en hyperlänk i en XAML-app: hyperlänktextelementet och hyperlänkknappskontrollen .

Är det här rätt kontroll?

Använd en hyperlänk när du behöver text som svarar när du trycker på och navigerar till användaren för att få mer information om texten som trycktes på.

Välj rätt typ av hyperlänk baserat på dina behov:

• Använd ett infogat hyperlänktextelement i en textkontroll. Ett hyperlänkelement flödar med andra textelement och du kan använda det i valfri InlineCollection. Använd en texthyperlänk om du vill ha automatisk figursättning och inte nödvändigtvis behöver ett stort träffmål. Hyperlänktext kan vara liten och svår att rikta in sig på, särskilt för touch.
• Använd hyperlänkknapp för fristående hyperlänkar. En Hyperlänkknapp är en specialiserad knappkontroll som du kan använda var som helst där du skulle använda en knapp.
• Använd en HyperlänkKnapp med en bild som innehåll för att skapa en klickbar bild.

Rekommendationer

• Använd endast hyperlänkar för navigering. använd dem inte för andra åtgärder.
• Använd formatmallen Brödtext från typhierarkin för textbaserade hyperlänkar. Läs om teckensnitt och Windows-typskalan.
• Håll diskreta hyperlänkar tillräckligt långt ifrån varandra så att användaren kan skilja mellan dem och enkelt välja var och en.
• Lägg till knappbeskrivningar i hyperlänkar som anger var användaren ska dirigeras. Om användaren dirigeras till en extern webbplats ska du inkludera domännamnet på den översta nivån i knappbeskrivningen och formatera texten med en sekundär teckenfärg.

Skapa ett hyperlänktextelement

Det här exemplet visar hur du använder ett hyperlänktextelement inuti en 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>

Hyperlänken visas infogad och flödar med den omgivande texten:

Skapa en hyperlänkknapp

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Så här använder du en Hyperlänkknapp, både med text och med en bild.

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

Hyperlänkknapparna med textinnehåll visas som markerad text. Contoso-logotypbilden är också en klickbar hyperlänk:

Det här exemplet visar hur du skapar en Hyperlänkknapp i kod.

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

Hantera navigering

För båda typerna av hyperlänkar hanterar du navigering på samma sätt. du kan ange egenskapen NavigateUri eller hantera händelsen Klicka .

Navigera till en webbadress

Om du vill använda hyperlänken för att navigera till en URI anger du egenskapen NavigateUri. När en användare klickar eller trycker på hyperlänken öppnas den angivna URI:n i standardwebbläsaren. Standardwebbläsaren körs i en separat process från din app.

Du behöver inte använda http: eller https: scheman. Du kan använda scheman som ms-appx:, ms-appdata:eller ms-resources:, om det finns resursinnehåll på dessa platser som är lämpliga att läsa in i en webbläsare. Men schemat för -filen: är särskilt blockerat. Mer information finns i URI-scheman.

När en användare klickar på hyperlänken skickas värdet för egenskapen NavigateUri till en systemhanterare för URI-typer och scheman. Systemet startar sedan appen som är registrerad för URI-schemat som erhålls från NavigateUri.

Om du inte vill att hyperlänken ska läsa in innehåll i en standardwebbläsare (och inte vill att en webbläsare ska visas) ska du inte ange något värde för NavigateUri. Hantera i stället händelsen Klicka och skriv kod som gör vad du vill.

Hantera klickhändelsen

Använd händelsen Klicka för andra åtgärder än att starta en URI i en webbläsare, till exempel navigering i appen. Om du till exempel vill läsa in en ny appsida i stället för att öppna en webbläsare anropar du metoden Frame.Navigate i händelsehanteraren Klicka för att gå till den nya appsidan. Om du vill att en extern, absolut URI ska läsas in i en WebView-kontroll som också finns i din app anropar du WebView.Navigate som en del av logiken för Klickhanteraren.

Du hanterar vanligtvis inte click-händelsen och anger ett NavigateUri-värde, eftersom dessa representerar två olika sätt att använda hyperlänkelementet. Om din avsikt är att öppna URI:n i standardwebbläsaren och du har angett ett värde för NavigateUri ska du inte hantera händelsen Klicka. Om du däremot hanterar Click-händelsen ska du inte ange en NavigateUri.

Det finns inget du kan göra i händelsehanteraren Klicka för att förhindra att standardwebbläsaren läser in ett giltigt mål som angetts för NavigateUri. åtgärden sker automatiskt (asynkront) när hyperlänken aktiveras och inte kan avbrytas inifrån händelsehanteraren Klicka.

Understrykningar av hyperlänkar

Hyperlänkar är som standard understrukna. Den här understrykningen är viktig eftersom den hjälper dig att uppfylla tillgänglighetskraven. Färgblinda användare använder understrykningen för att skilja mellan hyperlänkar och annan text. Om du inaktiverar understrykningar bör du överväga att lägga till någon annan typ av formateringsskillnad för att skilja hyperlänkar från annan text, till exempel FontWeight eller FontStyle.

Hyperlänktextelement

Du kan ange egenskapen UnderlineStyle för att inaktivera understrykningen. Om du gör det kan du överväga att använda FontWeight eller FontStyle för att särskilja länktexten.

Hyperlänkknapp

Hyperlänkknappen visas som understruken text som standard när du anger en sträng som värde för egenskapen Innehåll .

Texten visas inte understruken i följande fall:

• Du anger en TextBlock som värde för egenskapen Content och anger egenskapen Text på TextBlock.
• Du mallar hyperlänken på nytt och ändrar namnet på malldelen ContentPresenter .

Om du behöver en knapp som visas som text som inte är understruken bör du överväga att använda en standardknappkontroll och tillämpa den inbyggda TextBlockButtonStyle systemresursen på dess formategenskap.

Anteckningar för hyperlänktextelement

Det här avsnittet gäller endast för textelementet Hyperlänk, inte hyperlänkknappskontrollen.

Inmatningshändelser

Eftersom en hyperlänk inte är ett UIElement har den inte uppsättningen med indatahändelser för användargränssnittselement, till exempel Tapped, PointerPressed och så vidare. I stället har en hyperlänk en egen Klick-händelse, plus det implicita beteendet för systemet som läser in alla URI:er som anges som NavigateUri. Systemet hanterar alla indataåtgärder som ska anropa hyperlänkåtgärderna och genererar click-händelsen som svar.

Innehåll

Hyperlänken har begränsningar för det innehåll som kan finnas i dess Inlines-samling. Mer specifikt tillåter en Hyperlänk endast Run och andra Span typer som inte är en annan Hyperlänk. InlineUIContainer kan inte finnas i Inlines-kollektionen för en hyperlänk. Om du försöker lägga till begränsat innehåll genereras ett ogiltigt argumentfel eller XAML-parsningsfel.

Hyperlänk och tema/stilbeteende

Hyperlänken ärver inte från Kontroll, så den har ingen formategenskap eller mall. Du kan redigera de egenskaper som ärvs från TextElement, till exempel Foreground eller FontFamily, för att ändra utseendet på en hyperlänk, men du kan inte använda ett gemensamt format eller en mall för att tillämpa ändringar. I stället för att använda en mall bör du överväga att använda vanliga resurser för värden för hyperlänkegenskaper för att ge konsekvens. Vissa egenskaper för Hyperlänk använder standardvärden från ett {ThemeResource} markeringstilläggsvärde som tillhandahålls av systemet. Detta möjliggör att hyperlänkens utseende kan ändras på lämpliga sätt när användaren ändrar systemtemat under körning.

Standardfärgen för hyperlänken är systemets accentfärg. Du kan ange egenskapen Foreground för att åsidosätta detta.

UWP och WinUI 2

API:er för den här kontrollen finns i namnområdet Windows.UI.Xaml.Controls .

Relaterade artiklar

• Textkontroller
• Riktlinjer för verktygstips
• Hyperlänkklass
• Hyperlink-knappklass