Hyperlinks

  • Artikel

Über Hyperlinks können Benutzer zu einem anderen Teil der App oder zu einer anderen App navigieren oder mit einer separaten Browser-App einen bestimmten URI (Uniform Resource Identifier) starten. Es gibt zwei Möglichkeiten, einen Link zu einer XAML-App hinzuzufügen: das Hyperlink-Textelement und das HyperlinkButton-Steuerelement .

Eine Linkschaltfläche

Ist dies das richtige Steuerelement?

Verwenden Sie einen Link, wenn Sie Text benötigen, der beim Drücken antwortet und den Benutzer zu weiteren Informationen zu dem text navigiert, der gedrückt wurde.

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

  • Verwenden Sie ein Inline-Hyperlink-Textelement innerhalb eines Textsteuerelements. Ein Linkelement wird mit anderen Textelementen umgebrochen, und Sie können es in einem beliebigen InlineCollection-Element verwenden. Verwenden Sie einen Textlink, wenn Sie automatischen Textumbruch nutzen möchten und nicht unbedingt ein großes Tippziel benötigen. Der Linktext kann klein sein und sich nur schwer auswählen lassen, insbesondere bei der Toucheingabe.
  • Verwenden Sie einen HyperlinkButton für eigenständige Links. Ein HyperlinkButton-Element ist ein spezielles Schaltflächen-Steuerelement, das Sie überall dort verwenden können, wo Sie eine Schaltfläche verwenden würden.
  • Verwenden Sie einen HyperlinkButton mit einem Image als Inhalt, um ein klickbares Bild zu erstellen.

Empfehlungen

  • Verwenden Sie Links nur für die Navigation. Verwenden Sie sie nicht für andere Aktionen.
  • Verwenden Sie den Textstil aus dem Typenverlauf für textbasierte Links. Informieren Sie sich über Schriftarten und die Windows-Typrampe.
  • Separate Links sollten weit genug voneinander platziert werden, damit der Benutzer zwischen ihnen unterscheiden kann und sie mühelos einzeln auswählen kann.
  • Fügen Sie Hyperlinks QuickInfos hinzu, die dem Benutzer anzeigen, wohin er umgeleitet wird. Wenn der Benutzer zu einer externen Website weitergeleitet werden soll, schließen Sie den Namen der Domäne der obersten Ebene in die QuickInfo ein und formatieren den Text mit einer zweiten 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 Linktextelements

In diesem Beispiel wird veranschaulicht, wie Sie ein Linktextelement in einem TextBlock 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 mit dem umgebenden Text umbrochen:

Beispiel für einen Link als Textelement

Tipp

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

Erstellen eines HyperlinkButton-Elements

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie sich die Hyperlinks in Aktion an.

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 sehen Sie, wie Sie ein HyperlinkButton-Element sowohl mit Text als auch mit 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 ebenfalls 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");

Handhaben der Navigation

Die Navigation wird bei beiden Linktypen gleich gehandhabt. Sie können die Eigenschaft NavigateUri festlegen oder das Click-Ereignis behandeln.

Wenn Sie mit dem Link zu einem URI navigieren möchten, 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 URIs registriert ist, der für „NavigateUri“ angegeben wird.

Wenn der Link keine Inhalte in einem Standardwebbrowser laden soll (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 die gewünschte Aktion ausführt.

Behandeln des Click-Ereignisses

Verwenden Sie das Click-Ereignis für alle Aktionen außer für das Starten eines URIs in einem Browser (also beispielsweise für die Navigation innerhalb der App). Wenn Sie beispielsweise keinen Broswer öffnen, sondern eine neue App-Seite laden möchten, 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 Ihrer Klickhandlerlogik auf.

In der Regel behandeln Sie nicht das Click-Ereignis und legen gleichzeitig einen NavigateUri-Wert fest, da dies zwei verschiedene Methoden zur Verwendung des Linkelements darstellen. Wenn Sie den URI im Standardbrowser öffnen möchten und einen Wert für „NavigateUri“ angegeben haben, behandeln Sie das Click-Ereignis nicht. Im umgekehrten Fall geben Sie kein NavigateUri-Element an, wenn Sie das Click-Ereignis behandeln.

Sie können im Click-Ereignishandler nicht verhindern, dass der Standardbrowser ein für „NavigateUri“ angegebenes gültiges Ziel lädt. Die Aktion wird automatisch (asynchron) ausgeführt, wenn der Link aktiviert wird und kann nicht im Click-Ereignishandler abgebrochen werden.

Links sind standardmäßig unterstrichen. Diese Unterstreichung ist wichtig, da dadurch Anforderungen für Barrierefreiheit erfüllt werden. Farbenblinde Benutzer können anhand der Unterstreichung zwischen Links und anderem Text unterscheiden. Wenn Sie die Unterstreichung deaktivieren, sollten Sie eine andere Art der Formatierung in Betracht ziehen (z. B. „FontWeight“ oder „FontStyle“), um Links von anderem Text abzuheben.

Linktextelemente

Sie können die UnderlineStyle-Eigenschaft festlegen, um die Unterstreichung zu deaktivieren. Ziehen Sie in diesem Fall die Verwendung von FontWeight oder FontStyle in Betracht, um Ihren Linktext zu differenzieren.

HyperlinkButton

„HyperlinkButton“ wird standardmäßig 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:

  • Sie legen TextBlock als Wert für die Content-Eigenschaft und die Text-Eigenschaft für „TextBlock“ fest.
  • Sie passen die Vorlage für „HyperlinkButton“ an und ändern den Namen des ContentPresenter-Vorlagenteils.

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

Hinweise zum Linktextelement

Dieser Abschnitt gilt nur für das Linktextelement, nicht das HyperlinkButton-Steuerelement.

Eingabeereignisse

Da es sich bei einem Link nicht um ein UIElement handelt, enthält er nicht den Satz von Eingabeereignissen für UI-Elemente wie „Tapped“, „PointerPressed“ usw. Stattdessen enthält ein Link ein eigenes Click-Ereignis sowie das implizite Verhalten des Systems, das jeden als „NavigateUri“ angegebenen URI lädt. Das System verarbeitet alle Eingabeaktionen, die die Linkaktionen aufrufen sollten, und löst als Reaktion das Click-Ereignis aus.

Inhalt

Für den Link liegen Einschränkungen in Bezug auf den Inhalt vor, der in der Inlines-Sammlung enthalten sein darf. Genauer gesagt: Ein Link lässt nur Run- und andere Span-Typen zu, die keinen anderen Link darstellen. InlineUIContainer darf nicht in der Inlines-Sammlung eines Links enthalten sein. Beim Versuch, eingeschränkte Inhalte hinzuzufügen, wird eine Ausnahme für ein ungültiges Argument oder eine XAML-Analyseausnahme ausgelöst.

Links erben nicht von Control. Daher enthalten sie keine Style- oder Template-Eigenschaft. Sie können die von TextElement geerbten Eigenschaften wie „Foreground“ oder „FontFamily“ bearbeiten, um das Erscheinungsbild eines Links zu ändern. Sie können jedoch keinen allgemeinen Stil bzw. keine allgemeine Vorlage zum Anwenden von Änderungen verwenden. Verwenden Sie anstelle einer Vorlage allgemeine Ressourcen für Werte der Linkeigenschaften, um die Konsistenz zu gewährleisten. Einige Linkeigenschaften verwenden Standardwerte aus einem vom System bereitgestellten {ThemeResource}-Markuperweiterungswert. Dadurch kann die Linkdarstellung entsprechend angepasst werden, wenn der Benutzer das Systemdesign während der Laufzeit ändert.

Die Standardfarbe des Links ist die Akzentfarbe des Systems. Dieses Verhalten können Sie mit der Foreground-Eigenschaft außer Kraft setzen.

Beispielcode herunterladen