超連結

超連結會將使用者導覽到應用程式的另一部分、到另一個應用程式，或使用單獨的瀏覽器應用程式啟動特定的統一資源識別碼 (URI)。 可以透過兩種方式將超連結新增至 XAML 應用程式：Hyperlink 文字元素和 HyperlinkButton 控制項。

這是正確的控制項嗎？

當您需要文字在按下時回應，並導覽使用者以取得所按下文字的更多資訊時，請使用超連結。

根據您的需求選擇正確的超連結類型：

• 在文字控制項內使用內嵌超連結文字元素。 超連結元素會與其他文字元素一起流動，您可以在任何 InlineCollection 中使用它。 如果您想要自動換行並且不一定需要較大的點擊目標，請使用文字超連結。 超連結文字可能很小且難以定位，尤其是對於觸控而言。
• 使用 HyperlinkButton 作為獨立的超連結。 HyperlinkButton 是一種專用按鈕控制項，您可以在任何需要使用按鈕的地方使用它。
• 使用以影像作為內容的 HyperlinkButton 來製作可按式影像。

建議

• 只將超連結用於導覽; 請勿將其用於其他動作。
• 使用類型坡形中的本文樣式來建立文字型超連結。 了解字型和 Windows 類型坡形。
• 將離散的超連結保持足夠遠的距離，以便使用者可以區分它們並輕鬆選擇每個連結。
• 將工具提示新增至超連結，以指示使用者將會被引導至何處。 如果使用者將被引導到外部網站，請在工具提示中包含最上層網域名稱，並使用次要字型色彩設定文字樣式。

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

此控制項的 API 位在 Windows.UI.Xaml.Controls 命名空間中。

• UWP API：Hyperlink 文字元素、HyperlinkButton 控制項
• 開啟 WinUI 2 資源庫應用程式，並查看 Hyperlinks 運作情形。 WinUI 2 資源庫應用程式包含大部分 WinUI 2 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 Github 上取得原始程式碼。

建立 Hyperlink 文字元素

• 重要 API：Hyperlink 文字元素

此範例示範如何在 TextBlock 內使用 Hyperlink 文字元素。

<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 與 XAML 中其他文字元素搭配使用時，請將內容放在 Span 容器，並將 xml:space="preserve" 屬性套用至 Span，以保留 Hyperlink 和其他元素之間的空格。

建立 HyperlinkButton

• 重要 API：HyperlinkButton 控制項

開啟 WinUI 3 資源庫應用程式，並查看 Hyperlinks 運作情形。

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

以下說明如何使用帶有文字和帶有影像的 HyperlinkButton。

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

帶有文字內容的超連結按鈕顯示為標記文字。 Contoso 標誌影像也是可按式超連結：

此範例顯示如何在程式碼中建立 HyperlinkButton。

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

處理導覽

對於這兩種超連結，您可以以相同的方式處理導覽。您可以設定 NavigateUri 屬性，或處理 Click 事件。

瀏覽至 URI

若要使用超連結導覽至 URI，請設定 NavigateUri 屬性。 當使用者點擊或點選超連結時，指定的 URI 將在預設瀏覽器中開啟。 預設瀏覽器會在與您應用程式不同的程序中執行。

注意

URI 是以 Windows.Foundation.Uri 類別表示。 使用 .NET 進行程式設計時，此類別會隱藏，您應該使用 System.Uri 類別。 如需詳細資訊，請參閱這些類別的參考頁面。

您不一定要使用 http: 或 https: 配置。 如果適合在瀏覽器中載入這些位置的資源內容，您可以使用 ms-appx:ms-appdata: 或 ms-resources: 這類配置。 不過，會特別封鎖 file: 配置。 如需更多資訊，請參閱 URI 配置。

當使用者按一下超連結時，NavigateUri 屬性的值將傳遞到 URI 類型和配置的系統處理常式。 然後，系統會啟動為 NavigateUri 提供的 URI 配置註冊的應用程式。

如果您不希望超連結在預設 Web 瀏覽器中載入內容 (並且不希望顯示瀏覽器)，則不要為 NavigateUri 設定值。 而是處理 Click 事件，並編寫可執行您想要操作的程式碼。

處理 Click 事件

使用 Click 事件執行除在瀏覽器中啟動 URI 之外的其他動作，例如應用程式內的導覽。 例如，如果您想要載入新的應用程式頁面而不是開啟瀏覽器，請在 Click 事件處理常式中呼叫 Frame.Navigate 方法以導覽至新的應用程式頁面。 如果您想將外部絕對 URI 載入您應用程式中也存在的 WebView 控制項中，請呼叫 WebView.Navigate 作為 Click 處理常式邏輯的一部分。

您通常不會處理 Click 事件以及指定 NavigateUri 值，因為它們代表使用超連結元素的兩種不同方式。 如果您的目的是在預設瀏覽器中開啟 URI，並且您已指定 NavigateUri 的值，則不要處理 Click 事件。 相反地，如果您處理 Click 事件，則不要指定 NavigateUri。

您無法在 Click 事件處理常式中執行任何動作，來阻止預設瀏覽器載入任何為 NavigateUri 指定的有效目標; 當超連結啟動並且無法從 Click 事件處理常式中取消時，該動作會自動 (非同步) 進行。

超連結底線

預設情況下，超連結會帶有下劃線。 這個底線很重要，因為它有助於滿足可存取性需求。 色盲使用者可透過底線來區分超連結和其他文字。 如果停用底線，則應考慮新增一些其他類型的格式差異以區分超連結與其他文字，例如 FontWeight 或 FontStyle。

Hyperlink 文字元素

您可以設定 UnderlineStyle 屬性來停用底線。 如果停用，請考慮使用 FontWeight 或 FontStyle 來區分連結文字。

HyperlinkButton

預設情況下，當您將字串設定為 Content 屬性的值時，HyperlinkButton 會顯示為加底線的文字。

在以下情況下，文字不會顯示底線：

• 您將 TextBlock 設定為 Content 屬性的值，並在 TextBlock 上設定 Text 屬性。
• 您重新建立 HyperlinkButton 範本，並變更 ContentPresenter 範本組件的名稱。

如果需要顯示無底線文字的按鈕，請考慮使用標準 Button 控制項，並將內建 TextBlockButtonStyle 系統資源套用到其 Style 屬性。

Hyperlink 文字元素的附註

本節僅適用於 Hyperlink 文字元素，不適用於 HyperlinkButton 控制項。

輸入事件

由於 Hyperlink 不是 UIElement，因此它不具有 UI 元素輸入事件集，例如 Tapped、PointerPressed 等。 相反地，Hyperlink 有自己的 Click 事件，以及系統載入任何指定為 NavigateUri 的 URI 的隱含行為。 系統會處理所有應呼叫 Hyperlink 動作的輸入動作，並引發 Click 事件作為回應。

Content

Hyperlink 對其 Inlines 集合中可以存在的內容有限制。 具體來說，Hyperlink 僅允許 Run 和其他不是另一個 Hyperlink 的 Span 類型。 InlineUIContainer 不能位於 Hyperlink 的 Inlines 集合中。 嘗試新增受限內容會引發無效參數例外狀況或 XAML 剖析例外狀況。

Hyperlink 和佈景主題/樣式行為

Hyperlink 不會從 Control 繼承，因此它沒有 Style 屬性或 Template。 您可以編輯從 TextElement 繼承的屬性 (例如 Foreground 或 FontFamily) 來變更超連結的外觀，但不能使用通用樣式或範本來套用變更。 考慮使用 Hyperlink 屬性值的通用資源來提供一致性，而不是使用範本。 Hyperlink 的某些屬性會使用系統提供的 {ThemeResource} 標記擴充值的預設值。 當使用者在執行階段變更系統主題時，這可讓 Hyperlink 外觀以適當的方式切換。

超連結的預設色彩是系統的強調色。 您可以設定 Foreground 屬性來覆寫此項。

取得範例程式碼

• WinUI 資源庫範例 - 以互動式格式查看所有 XAML 控制項。

相關文章

• 文字控制項
• 工具提示的指導方針
• Hyperlink 類別
• HyperlinkButton 類別