Udostępnij przez

Hyperlinks

Hiperłącza przechodzą do innej części aplikacji, do innej aplikacji lub uruchamiają określony jednolity identyfikator zasobu (URI) przy użyciu oddzielnej aplikacji przeglądarki. Istnieją dwa sposoby dodawania hiperłącza do aplikacji XAML: element tekstowy Hyperlink i kontrolka HyperlinkButton.

Przycisk hiperłącza

Czy jest to właściwa kontrola?

Użyj hiperlinku, gdy potrzebujesz tekstu, który odpowiada po naciśnięciu i nawiguje po użytkowniku, aby uzyskać więcej informacji na temat tekstu, który został naciśnięty.

Wybierz odpowiedni typ hiperlinku na podstawie Twoich potrzeb:

  • Użyj wbudowanego elementu tekstowego Hiperłącze wewnątrz kontrolki tekstu. Element hiperłącza harmonijnie integruje się z innymi elementami tekstowymi i można go używać w dowolnej kolekcji InlineCollection. Użyj hiperłącza tekstowego, jeśli chcesz automatycznie zawijać tekst i niekoniecznie potrzebujesz dużego obszaru kliknięcia. Tekst hiperłącza może być mały i trudny do trafienia, szczególnie w przypadku dotyku.
  • Użyj elementu HyperlinkButton dla autonomicznych hiperlinków. Przycisk Hiperłącza to wyspecjalizowana kontrolka przycisku, której można używać w dowolnym miejscu, gdzie używa się przycisku.
  • Użyj elementu HyperlinkButton z obrazem jako jego zawartością, aby utworzyć obraz klikalny.

Rekomendacje

  • Używaj tylko hiperlinków do nawigacji; nie używaj ich do innych akcji.
  • Użyj stylu Treść ze skali stylów dla hiperlinków opartych na tekście. Przeczytaj o czcionkach i rampie typu systemu Windows.
  • Zachowaj dyskretne hiperłącza wystarczająco daleko od siebie, aby użytkownik mógł je rozróżnić i mieć łatwy czas wybierania każdego z nich.
  • Dodaj etykietki narzędzi do hiperlinków, które wskazują, gdzie użytkownik zostanie skierowany. Jeśli użytkownik zostanie skierowany do witryny zewnętrznej, uwzględnij nazwę domeny najwyższego poziomu w etykietce narzędzia i wpisz tekst z pomocniczym kolorem czcionki.

Tworzenie elementu tekstowego hiperłącza

W tym przykładzie pokazano, jak używać elementu tekstowego Hiperłącze wewnątrz elementu 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>

Hiperlink pojawia się w tekście i współgra z otaczającym tekstem.

Przykład hiperłącza jako elementu tekstowego

Wskazówka

Jeśli używasz hiperłącza w kontrolce tekstu z innymi elementami tekstowymi w języku XAML, umieść zawartość w kontenerze Span i zastosuj atrybut xml:space="preserve" do elementu Span, aby zachować białe spacje między hiperłączem a innymi elementami.

Tworzenie Przycisku Hiperłącza

Otwórz aplikację Galeria WinUI 3 i zobacz hiperlinki w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Poniżej przedstawiono sposób użycia elementu HyperlinkButton, zarówno z tekstem, jak i obrazem.

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

Przyciski hiperłącza z zawartością tekstową są wyświetlane jako tekst oznaczony. Obraz logo firmy Contoso jest również hiperlinkiem, który można kliknąć:

Przykład hiperłącza jako kontrolki przycisku

W tym przykładzie pokazano, jak utworzyć element HyperlinkButton w kodzie.

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

Obsługa nawigacji

W przypadku obu rodzajów hiperlinków można obsługiwać nawigację w taki sam sposób; możesz ustawić właściwość NavigateUri lub obsłużyć zdarzenie Click .

Aby użyć hiperlinku do przejścia do identyfikatora URI, ustaw właściwość NavigateUri. Gdy użytkownik kliknie lub naciśnie hiperlink, określony adres URI zostanie otwarty w domyślnej przeglądarce. Domyślna przeglądarka jest uruchamiana w osobnym procesie od aplikacji.

Uwaga / Notatka

Identyfikator URI jest reprezentowany przez klasę Windows.Foundation.Uri . Podczas programowania za pomocą platformy .NET ta klasa jest ukryta i należy użyć klasy System.Uri . Aby uzyskać więcej informacji, zobacz strony referencyjne dla tych klas.

Nie musisz używać schematów http: ani https. Można użyć schematów, takich jak ms-appx:, ms-appdata:, lub ms-resources:, jeśli w tych lokalizacjach znajduje się zawartość zasobu, która jest odpowiednia do załadowania w przeglądarce. Jednak plik: schemat jest w szczególności blokowany. Aby uzyskać więcej informacji, zobacz Schematy identyfikatorów URI.

Gdy użytkownik kliknie hiperlink, wartość właściwości NavigateUri jest przekazywana do programu obsługi systemu dla typów i schematów identyfikatorów URI. Następnie system uruchamia aplikację zarejestrowaną dla schematu URI podanego dla jednostki nawigacyjnej NavigateUri.

Jeśli nie chcesz, aby hiperlink ładował zawartość w domyślnej przeglądarce sieci Web (i nie chcesz, aby przeglądarka pojawiła się), nie ustawiaj wartości dla elementu NavigateUri. Zamiast tego obsłuż zdarzenie Click i napisz kod, który wykonuje żądane czynności.

Obsługa zdarzenia kliknięcia

Użyj zdarzenia kliknięcia do akcji innych niż uruchomienie identyfikatora URI w przeglądarce, takich jak nawigacja w aplikacji. Jeśli na przykład chcesz załadować nową stronę aplikacji zamiast otwierać przeglądarkę, wywołaj metodę Frame.Navigate w programie obsługi zdarzeń Click, aby przejść do nowej strony aplikacji. Jeśli chcesz, aby zewnętrzny bezwzględny URI został załadowany w kontrolce WebView, która również istnieje w aplikacji, wywołaj element WebView.Navigate jako część logiki obsługi kliknięcia.

Zazwyczaj nie obsługujesz zdarzenia Click, a także nie określasz wartości NavigateUri, ponieważ reprezentują one dwa różne sposoby używania elementu hiperłącza. Jeśli twoim zamiarem jest otwarcie identyfikatora URI w domyślnej przeglądarce i określono wartość dla NavigateUri, nie obsługuj zdarzenia Click. Z drugiej strony, jeśli obsłużysz zdarzenie Click, nie określ identyfikatora NavigateUri.

W zdarzeniu Click nie można nic zrobić, aby uniemożliwić domyślnej przeglądarce ładowanie dowolnego prawidłowego celu określonego dla NavigateUri; ta akcja odbywa się automatycznie (asynchronicznie) po aktywowaniu hiperłącza i nie można jej anulować z poziomu zdarzenia Click.

Domyślnie hiperlinki są podkreślone. To podkreślnie jest ważne, ponieważ pomaga spełnić wymagania dotyczące ułatwień dostępu. Użytkownicy niewidomi kolorów używają podkreśleń, aby odróżnić hiperłącza od innego tekstu. Jeśli wyłączysz podkreślenia, rozważ dodanie innego typu różnicy formatowania w celu odróżnienia hiperlinków od innego tekstu, takiego jak FontWeight lub FontStyle.

Elementy tekstowe hiperłącza

Możesz ustawić właściwość UnderlineStyle , aby wyłączyć podkreślenie. Jeśli tak, rozważ użycie metody FontWeight lub FontStyle , aby odróżnić tekst linku.

Przycisk Hiperłącza

Domyślnie przycisk hiperłącza wyświetla się jako tekst podkreślony, gdy ciąg znaków jest ustawiony jako wartość właściwości Content.

Tekst nie jest podkreślony w następujących przypadkach:

  • Jako wartość właściwości Content należy ustawić element TextBlock i ustawić właściwość Text w obiekcie TextBlock.
  • Przekształcasz ponownie szablon HyperlinkButton i zmieniasz nazwę części szablonu ContentPresenter.

Jeśli potrzebujesz przycisku, który jest wyświetlany jako tekst bez podkreślenia, rozważ użycie standardowej kontrolki Przycisk i zastosowanie wbudowanego zasobu systemu TextBlockButtonStyle do jego właściwości Style.

Uwagi dla elementu tekstowego hiperłącza

Ta sekcja dotyczy tylko elementu tekstowego Hiperłącze, a nie kontrolki HyperlinkButton.

Zdarzenia wejściowe

Ponieważ hiperłącze nie jest elementem interfejsu użytkownika , nie ma zestawu zdarzeń wejściowych elementu interfejsu użytkownika, takich jak Tapped, PointerPressed itd. Zamiast tego hiperłącze ma własne zdarzenie Click oraz niejawne zachowanie systemu, jakim jest ładowanie dowolnego identyfikatora URI, który jest określony jako NavigateUri. System obsługuje wszystkie akcje wejściowe, które powinny wywoływać akcje hiperłącza, i zgłasza zdarzenie kliknięcia w odpowiedzi.

Content

Hiperłącze ma ograniczenia dotyczące zawartości, która może istnieć w kolekcji Linii wbudowanych . W szczególności hiperłącze zezwala tylko na Run i inne typy Span, które nie są innym hiperłączem. InlineUIContainer nie może znajdować się w kolekcji Inlines hiperłącza. Próba dodania zawartości z ograniczeniami zgłasza nieprawidłowy wyjątek argumentu lub wyjątek analizy XAML.

Hiperłącze nie dziedziczy z kontrolki, więc nie ma właściwości Style ani szablonu. Możesz edytować właściwości dziedziczone z elementu TextElement, takiego jak Foreground lub FontFamily, aby zmienić wygląd hiperłącza, ale nie można użyć wspólnego stylu ani szablonu, aby zastosować zmiany. Zamiast używać szablonu, rozważ użycie typowych zasobów dla wartości właściwości hiperłącza w celu zapewnienia spójności. Niektóre właściwości hiperłącza używają wartości domyślnych z wartości rozszerzenia znaczników {ThemeResource} dostarczonej przez system. Dzięki temu wygląd hiperłącza może się zmieniać w zależności od tematu systemu, kiedy użytkownik zmienia go podczas działania.

Domyślny kolor hiperłącza to kolor wyróżniający systemu. Możesz ustawić właściwość Foreground, aby zastąpić to ustawienie.

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

  • Last updated on