Freigeben über

Hyperlinks

Links navigieren den Benutzer zu einem anderen Teil der App, zu einer anderen App oder starten einen bestimmten URI (Uniform Resource Identifier) mithilfe einer separaten Browser-App. Es gibt zwei Möglichkeiten, wie Sie einer XAML-App einen Link hinzufügen können: das Hyperlink-Textelement und das HyperlinkButton-Steuerelement.

Schaltfläche

Ist dies das richtige Steuerelement?

Verwenden Sie einen Link, wenn Sie Text benötigen, der beim Drücken reagiert, und navigiert den Benutzer zu weiteren Informationen zum gedrückten Text.

Wählen Sie den richtigen Linktyp basierend auf Ihren Anforderungen aus:

  • Verwenden Sie ein Inline-Hyperlink-Text-Element innerhalb eines Textsteuerelements. Ein Hyperlink-Element fließt mit anderen Textelementen, und Sie können es in jeder InlineCollection verwenden. Verwenden Sie einen Text-Hyperlink, wenn Sie einen automatischen Textrücklauf wünschen und nicht unbedingt ein großes Trefferziel haben müssen. Hyperlink-Text kann klein und schwierig anzutippen sein, insbesondere auf einem Touchscreen.
  • Verwenden Sie ein HyperlinkButton-Objekt für eigenständige Links. Ein HyperlinkButton ist ein spezielles Schaltflächen-Steuerelement, das Sie überall verwenden können, wo Sie eine Schaltfläche verwenden würden.
  • Verwenden Sie ein HyperlinkButton-Objekt mit einem Bild als Inhalt, um ein klickbares Bild zu erstellen.

Recommendations

  • Verwenden Sie nur Links für die Navigation; verwenden Sie sie nicht für andere Aktionen.
  • Verwenden Sie die Formatvorlage "Textkörper" aus der Typhierarchie für textbasierte Hyperlinks. Informationen zu Schriftarten und dem Windows-Typenverlauf.
  • Trennen Sie diskrete Links weit genug voneinander, damit der Benutzer zwischen ihnen unterscheiden kann und jede einzelne einfach auswählen kann.
  • Fügen Sie Tooltipps zu Links hinzu, die angeben, wohin der Benutzer weitergeführt wird. Wenn der Benutzer auf eine externe Website weitergeleitet wird, schließen Sie den Top-Level-Domain-Namen in den Tooltip ein und formatieren Sie den Text in einer sekundären Schriftfarbe.

Erstellen eines Hyperlinktextelements

In diesem Beispiel wird gezeigt, wie Sie ein Hyperlink-Textelement innerhalb eines TextBlock-Elements verwenden.

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

Der Link wird inline angezeigt und fließt mit dem umgebenden Text:

Beispiel für einen Link als Textelement

Tipp

Wenn Sie einen Hyperlink in einem Textsteuerelement mit anderen Textelementen in XAML verwenden, platzieren Sie den Inhalt in einem Span-Container , und wenden Sie das xml:space="preserve" Attribut auf span an, um den Leerraum zwischen dem Hyperlink und anderen Elementen beizubehalten.

Erstellen eines HyperlinkButton-Steuerelements

Öffnen Sie die WinUI Gallery-App, und sehen Sie die Links in Aktion.

Die WinUI 3 Gallery-App enthält interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Hier erfahren Sie, wie Sie ein HyperlinkButton-Objekt sowohl mit Text als auch mit einem Bild verwenden.

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

Die Linkschaltflächen mit Textinhalt werden als markierter Text angezeigt. Das Contoso-Logobild ist auch ein klickbarer Link:

Beispiel für einen Link als Schaltflächensteuerelement

Dieses Beispiel zeigt die Erstellung eines HyperlinkButton-Elements im Code.

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

Verwalten der Navigation

Bei beiden Arten von Links behandeln Sie die Navigation auf die gleiche Weise; Sie können die NavigateUri-Eigenschaft festlegen oder das Click-Ereignis behandeln.

Wenn Sie den Link verwenden möchten, um zu einem URI zu navigieren, legen Sie die NavigateUri-Eigenschaft fest. Wenn ein Benutzer auf den Link klickt oder tippt, wird der angegebene URI im Standardbrowser geöffnet. Der Standardbrowser wird in einem separaten Prozess von Ihrer App ausgeführt.

Hinweis

Ein URI wird durch die Klasse Windows.Foundation.Uri dargestellt. Da diese Klasse bei der Programmierung mit .NET verborgen ist, sollte die Klasse System.Uri verwendet werden. Weitere Informationen findest du auf den Referenzseiten für diese Klassen.

Du musst nicht das Schema http: oder https: verwenden. Stattdessen kannst du Schemas wie ms-appx:, ms-appdata: oder ms-resources: verwenden, falls dort Ressourceninhalte vorhanden sind, die in einem Browser geladen werden können. Das Schema file: ist allerdings ausdrücklich blockiert. Weitere Informationen finden Sie unter URI-Schemas.

Wenn ein Benutzer auf den Link klickt, wird der Wert der NavigateUri-Eigenschaft an einen Systemhandler für URI-Typen und -Schemas übergeben. Das System startet dann die App, die für das Schema des URI registriert ist, das für NavigateUri bereitgestellt wurde.

Wenn sie nicht möchten, dass der Link Inhalte in einem Standardwebbrowser lädt (und kein Browser angezeigt werden soll), legen Sie keinen Wert für NavigateUri fest. Behandeln Sie stattdessen das Click-Ereignis, und schreiben Sie Code, der tut, was Sie möchten.

Behandeln des Click-Ereignisses

Verwenden Sie das Click-Ereignis für andere Aktionen als das Starten eines URI in einem Browser, z. B. die Navigation innerhalb der App. Wenn Sie beispielsweise eine neue App-Seite laden möchten, anstatt einen Browser zu öffnen, rufen Sie eine Frame.Navigate-Methode in Ihrem Click-Ereignishandler auf, um zur neuen App-Seite zu navigieren. Wenn ein externer, absoluter URI in einem WebView-Steuerelement geladen werden soll, das auch in Ihrer App vorhanden ist, rufen Sie WebView.Navigate als Teil der Click-Handler-Logik auf.

Normalerweise behandeln Sie nicht das Click-Ereignis und geben einen NavigateUri-Wert an, da es sich um zwei unterschiedliche Methoden zur Verwendung des Hyperlinkelements handelt. Wenn Sie beabsichtigen, den URI im Standardbrowser zu öffnen, und Sie einen Wert für NavigateUri angegeben haben, behandeln Sie das Click-Ereignis nicht. Wenn Sie das Click-Ereignis behandeln, geben Sie dagegen keinen NavigateUri an.

Es gibt nichts, was Sie im Click-Ereignishandler tun können, um zu verhindern, dass der Standardbrowser ein gültiges Ziel lädt, das für NavigateUri angegeben ist. diese Aktion wird automatisch (asynchron) ausgeführt, wenn der Link aktiviert wird und nicht innerhalb des Click-Ereignishandlers abgebrochen werden kann.

Links werden standardmäßig unterstrichen. Diese Unterstreichung ist wichtig, da sie die Anforderungen an die Barrierefreiheit erfüllt. Farbenblinde Benutzer verwenden die Unterstreichung, um zwischen Links und anderem Text zu unterscheiden. Wenn Sie Unterstreichungen deaktivieren, sollten Sie einen anderen Formatierungsunterschied hinzufügen, um Links von anderem Text zu unterscheiden, z. B. FontWeight oder FontStyle.

Linktextelemente

Sie können die UnderlineStyle-Eigenschaft festlegen, um die Unterstreichung zu deaktivieren. Wenn Sie dies tun, ziehen Sie die Verwendung von FontWeight oder FontStyle in Betracht, um den Linktext zu unterscheiden.

Hyperlink-Schaltfläche

Standardmäßig wird das HyperlinkButton-Objekt als unterstrichener Text angezeigt, wenn Sie eine Zeichenfolge als Wert für die Content-Eigenschaft festlegen.

Der Text wird in den folgenden Fällen nicht unterstrichen angezeigt:

Wenn Sie eine Schaltfläche benötigen, die als nicht unterstrichener Text erscheint, sollten Sie ein Standard-Schaltflächen-Steuerelement verwenden und die integrierte Systemressource auf die Style-Eigenschaft TextBlockButtonStyle anwenden.

Notizen für Hyperlinktextelement

Dieser Abschnitt gilt nur für das Hyperlink-Textelement und nicht für das HyperlinkButton-Steuerelement.

Eingabeereignisse

Da ein Hyperlink kein UIElement ist, verfügt er nicht über den Satz von Eingabeereignissen für UI-Elemente wie Tapped, PointerPressed usw. Stattdessen verfügt ein Hyperlink über ein eigenes Click-Ereignis sowie das implizite Verhalten des Systems, das einen URI lädt, der als NavigateUri angegeben ist. Das System behandelt alle Eingabeaktionen, die die Hyperlinkaktionen aufrufen sollen, und löst das Click-Ereignis als Antwort aus.

Content

Der Hyperlink hat Einschränkungen für den Inhalt, der in der Inlines-Auflistung vorhanden sein kann. Insbesondere erlaubt ein Hyperlink nur Run und andere Span-Typen, die nicht ein anderer Hyperlink sind. InlineUIContainer kann sich nicht in der Inlines-Auflistung eines Hyperlinks befinden. Beim Versuch, eingeschränkte Inhalte hinzuzufügen, wird eine ungültige Argumentausnahme oder XAML-Analyseausnahme ausgelöst.

Ein Hyperlink erbt nicht von Steuerelement, sodass er nicht über eine Style-Eigenschaft oder eine Vorlage verfügt. Sie können die Eigenschaften bearbeiten, die von TextElement geerbt werden, z. B. "Foreground" oder "FontFamily", um die Darstellung eines Links zu ändern, sie können jedoch keine gängige Formatvorlage oder Vorlage verwenden, um Änderungen anzuwenden. Anstatt eine Vorlage zu verwenden, sollten Sie allgemeine Ressourcen für Werte von Hyperlinkeigenschaften verwenden, um Konsistenz zu gewährleisten. Einige Eigenschaften von Hyperlink verwenden Standardwerte aus einem vom System bereitgestellten {ThemeResource}-Markuperweiterungswert. Auf diese Weise kann die Darstellung von Hyperlinks passend geändert werden, wenn der Benutzer zur Laufzeit das Systemdesign ändert.

Die Standardfarbe des Links ist die Akzentfarbe des Systems. Sie können die Foreground-Eigenschaft so festlegen, dass dies außer Kraft gesetzt wird.

UWP und WinUI für UWP

Von Bedeutung

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind im Windows.UI.Xaml.Controls-Namespace vorhanden.

  • Last updated on