Bagikan melalui

Hyperlink

  • Artikel

Hyperlink menavigasi pengguna ke bagian lain aplikasi, ke aplikasi lain, atau meluncurkan pengidentifikasi sumber daya seragam (URI) tertentu menggunakan aplikasi browser terpisah. Ada dua cara untuk menambahkan hyperlink ke aplikasi XAML: elemen teks Hyperlink dan kontrol HyperlinkButton .

Tombol hyperlink

Apakah ini kontrol yang tepat?

Gunakan hyperlink saat Anda memerlukan teks yang merespons saat ditekan dan menavigasi pengguna untuk informasi selengkapnya tentang teks yang ditekan.

Pilih jenis hyperlink yang tepat berdasarkan kebutuhan Anda:

  • Gunakan elemen teks Hyperlink sebaris di dalam kontrol teks. Elemen Hyperlink mengalir dengan elemen teks lain dan Anda bisa menggunakannya di InlineCollection apa pun. Gunakan hyperlink teks jika Anda ingin pembungkusan teks otomatis dan tidak selalu memerlukan target temuan besar. Teks hyperlink bisa kecil dan sulit ditargetkan, terutama untuk sentuhan.
  • Gunakan HyperlinkButton untuk hyperlink yang berdiri sendiri. HyperlinkButton adalah kontrol Tombol khusus yang dapat Anda gunakan di mana saja yang akan Anda gunakan Tombol.
  • Gunakan HyperlinkButton dengan Gambar sebagai kontennya untuk membuat gambar yang dapat diklik.

Rekomendasi

  • Hanya gunakan hyperlink untuk navigasi; jangan gunakan untuk tindakan lain.
  • Gunakan gaya Isi dari ramp jenis untuk hyperlink berbasis teks. Baca tentang font dan ramp tipe Windows.
  • Jauhkan hyperlink diskrit cukup jauh sehingga pengguna dapat membedakannya dan memiliki waktu yang mudah memilih masing-masing.
  • Tambahkan tipsalat ke hyperlink yang menunjukkan ke tempat pengguna akan diarahkan. Jika pengguna akan diarahkan ke situs eksternal, sertakan nama domain tingkat atas di dalam tipsalat, dan gaya teks dengan warna font sekunder.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

Membuat elemen teks Hyperlink

Contoh ini memperlihatkan cara menggunakan elemen teks Hyperlink di dalam 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>

Hyperlink muncul sebaris dan mengalir dengan teks di sekitarnya:

Contoh hyperlink sebagai elemen teks

Tip

Saat Anda menggunakan Hyperlink dalam kontrol teks dengan elemen teks lain di XAML, letakkan konten dalam kontainer Rentang dan terapkan xml:space="preserve" atribut ke Rentang untuk mempertahankan spasi kosong antara Hyperlink dan elemen lainnya.

Membuat HyperlinkButton

Buka aplikasi Galeri WinUI 3 dan lihat tindakan Hyperlink.

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Berikut cara menggunakan HyperlinkButton, baik dengan teks maupun dengan gambar.

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

Tombol hyperlink dengan konten teks muncul sebagai teks yang ditandai. Gambar logo Contoso juga merupakan hyperlink yang dapat diklik:

Contoh hyperlink sebagai kontrol tombol

Contoh ini memperlihatkan cara membuat HyperlinkButton dalam kode.

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

Menangani navigasi

Untuk kedua jenis hyperlink, Anda menangani navigasi dengan cara yang sama; Anda dapat mengatur properti NavigateUri , atau menangani peristiwa Klik .

Untuk menggunakan hyperlink untuk menavigasi ke URI, atur properti NavigateUri. Saat pengguna mengklik atau mengetuk hyperlink, URI yang ditentukan terbuka di browser default. Browser default berjalan dalam proses terpisah dari aplikasi Anda.

Catatan

URI diwakili oleh kelas Windows.Foundation.Uri . Saat memprogram dengan .NET, kelas ini disembunyikan dan Anda harus menggunakan kelas System.Uri . Untuk informasi selengkapnya, lihat halaman referensi untuk kelas ini.

Anda tidak perlu menggunakan http: atau https: skema. Anda dapat menggunakan skema seperti ms-appx:, ms-appdata:, atau ms-resources:, jika ada konten sumber daya di lokasi ini yang sesuai untuk dimuat di browser. Namun, file: skema secara khusus diblokir. Untuk informasi selengkapnya, lihat skema URI.

Saat pengguna mengklik hyperlink, nilai properti NavigateUri diteruskan ke handler sistem untuk jenis dan skema URI. Sistem kemudian meluncurkan aplikasi yang terdaftar untuk skema URI yang disediakan untuk NavigateUri.

Jika Anda tidak ingin hyperlink memuat konten di browser Web default (dan tidak ingin browser muncul), maka jangan atur nilai untuk NavigateUri. Sebagai gantinya, tangani peristiwa Klik, dan tulis kode yang melakukan apa yang Anda inginkan.

Menangani peristiwa Klik

Gunakan peristiwa Klik untuk tindakan selain meluncurkan URI di browser, seperti navigasi dalam aplikasi. Misalnya, jika Anda ingin memuat halaman aplikasi baru daripada membuka browser, panggil metode Frame.Navigate dalam penanganan aktivitas Klik Anda untuk menavigasi ke halaman aplikasi baru. Jika Anda ingin URI eksternal absolut dimuat dalam kontrol WebView yang juga ada di aplikasi Anda, panggil WebView.Navigate sebagai bagian dari logika Penangan Klik Anda.

Anda biasanya tidak menangani peristiwa Klik serta menentukan nilai NavigateUri, karena ini mewakili dua cara berbeda untuk menggunakan elemen hyperlink. Jika niat Anda adalah membuka URI di browser default, dan Anda telah menentukan nilai untuk NavigateUri, jangan tangani peristiwa Klik. Sebaliknya, jika Anda menangani peristiwa Klik, jangan tentukan NavigateUri.

Tidak ada yang dapat Anda lakukan dalam penanganan aktivitas Klik untuk mencegah browser default memuat target valid yang ditentukan untuk NavigateUri; tindakan tersebut terjadi secara otomatis (secara asinkron) saat hyperlink diaktifkan dan tidak dapat dibatalkan dari dalam penanganan aktivitas Klik.

Secara default, hyperlink digaris bawahi. Garis bawah ini penting karena membantu memenuhi persyaratan aksesibilitas. Pengguna buta warna menggunakan garis bawah untuk membedakan antara hyperlink dan teks lainnya. Jika Anda menonaktifkan garis bawah, Anda harus mempertimbangkan untuk menambahkan beberapa tipe perbedaan pemformatan lainnya untuk membedakan hyperlink dari teks lain, seperti FontWeight atau FontStyle.

Elemen teks hyperlink

Anda dapat mengatur properti UnderlineStyle untuk menonaktifkan garis bawah. Jika Anda melakukannya, pertimbangkan untuk menggunakan FontWeight atau FontStyle untuk membedakan teks tautan Anda.

HyperlinkButton

Secara default, HyperlinkButton muncul sebagai teks bergaris bawah saat Anda mengatur string sebagai nilai untuk properti Konten .

Teks tidak muncul digaris bawahi dalam kasus berikut:

Jika Anda memerlukan tombol yang muncul sebagai teks yang tidak bergaris bawah, pertimbangkan untuk menggunakan kontrol Tombol standar dan menerapkan sumber daya sistem bawaan TextBlockButtonStyle ke properti Gayanya.

Catatan untuk elemen teks Hyperlink

Bagian ini hanya berlaku untuk elemen teks Hyperlink, bukan ke kontrol HyperlinkButton.

Peristiwa input

Karena Hyperlink bukan UIElement, Hyperlink tidak memiliki serangkaian peristiwa input elemen UI seperti Tapped, PointerPressed, dan sebagainya. Sebagai gantinya, Hyperlink memiliki peristiwa Klik sendiri, ditambah perilaku implisit sistem yang memuat URI apa pun yang ditentukan sebagai NavigateUri. Sistem menangani semua tindakan input yang harus memanggil tindakan Hyperlink dan menaikkan peristiwa Klik sebagai respons.

Konten

Hyperlink memiliki batasan pada konten yang bisa ada di koleksi Sebarisnya. Secara khusus, Hyperlink hanya mengizinkan Eksekusi dan jenis Rentang lainnya yang bukan Hyperlink lain. InlineUIContainer tidak dapat berada di kumpulan Inlines hyperlink. Mencoba menambahkan konten terbatas melempar pengecualian argumen yang tidak valid atau pengecualian penguraian XAML.

Hyperlink tidak mewarisi dari Kontrol, sehingga tidak memiliki properti Gaya atau Templat. Anda bisa mengedit properti yang diwariskan dari TextElement, seperti Latar Depan atau FontFamily, untuk mengubah tampilan Hyperlink, tetapi Anda tidak dapat menggunakan gaya atau templat umum untuk menerapkan perubahan. Alih-alih menggunakan templat, pertimbangkan untuk menggunakan sumber daya umum untuk nilai properti Hyperlink untuk memberikan konsistensi. Beberapa properti Hyperlink menggunakan default dari nilai ekstensi markup {ThemeResource} yang disediakan oleh sistem. Ini memungkinkan tampilan Hyperlink beralih dengan cara yang sesuai saat pengguna mengubah tema sistem pada run-time.

Warna default hyperlink adalah warna aksen sistem. Anda dapat mengatur properti Latar Depan untuk mengambil alih ini.

Mendapatkan kode sampel

  • Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.