Links

  • Artikel

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 Inlinelinktextelement innerhalb eines Textsteuerelements. Ein Hyperlink-Element fließt mit anderen Textelementen, und Sie können es in jeder InlineCollection verwenden. Verwenden Sie einen Textlink, wenn Sie einen automatischen Textumbruch benötigen und nicht unbedingt ein großes Trefferziel benötigen. Linktext kann klein und schwierig sein, insbesondere für die Toucheingabe.
  • Verwenden Sie ein HyperlinkButton-Objekt für eigenständige Links. Ein HyperlinkButton-Steuerelement ist ein spezielles Button-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.

Empfehlungen

  • 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 der Windows-Typhierarchie.
  • Trennen Sie diskrete Links weit genug voneinander, damit der Benutzer zwischen ihnen unterscheiden kann und jede einzelne einfach auswählen kann.
  • Fügen Sie QuickInfos zu Links hinzu, die angeben, wo der Benutzer weitergeleitet wird. Wenn der Benutzer an eine externe Website weitergeleitet wird, schließen Sie den Domänennamen der obersten Ebene in die QuickInfo ein, und formatieren Sie den Text mit einer sekundären Schriftfarbe.

UWP und WinUI 2

Wichtig

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.

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 3 Gallery-App, und sehen Sie die Links in Aktion.

Die WinUI 3-Katalog-App umfasst 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");

Behandeln 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 für NavigateUri bereitgestellten URI registriert ist.

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 ihren Vorstellungen entspricht.

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-Handlerlogik auf.

Normalerweise behandeln Sie das Click-Ereignis nicht und geben einen NavigateUri-Wert an, da diese zwei verschiedene Methoden zur Verwendung des Hyperlinkelements darstellen. 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.

HyperlinkButton

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 angezeigt wird, sollten Sie ein Standardmäßig-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.

Inhalt

Der Hyperlink hat Einschränkungen für den Inhalt, der in der Inlines-Auflistung vorhanden sein kann. Insbesondere lässt ein Hyperlink "Ausführen" und andere Span-Typen nur zu, die kein 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.

Der Link 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 Hyperlinkdarstellung entsprechend geändert werden, wenn der Benutzer das Systemdesign zur Laufzeit ä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.

Beispielcode herunterladen