次の方法で共有

ハイパーリンク

  • [アーティクル]

ハイパーリンクは、ユーザーをアプリの別の部分に移動するか、別のアプリに移動するか、別のブラウザー アプリを使用して特定の UNIFORM リソース識別子 (URI) を起動します。 XAML アプリにハイパーリンクを追加するには、 Hyperlink テキスト要素と HyperlinkButton コントロールの 2 つの方法があります。

ハイパーリンク ボタン

これは適切なコントロールですか?

押されたときに応答するテキストが必要な場合はハイパーリンクを使用し、押されたテキストに関する詳細情報にユーザーを移動します。

必要に応じて、適切な種類のハイパーリンクを選択します。

  • テキスト コントロール内のインライン Hyperlink テキスト要素を使用します。 Hyperlink 要素は他のテキスト要素と共に流れ、任意の InlineCollection で使用できます。 テキストの自動折り返しが必要で、必ずしも大きなヒット ターゲットが必要ない場合は、テキスト ハイパーリンクを使用します。 ハイパーリンクテキストは、特にタッチの場合、小さく、ターゲットにするのが難しい場合があります。
  • スタンドアロン ハイパーリンクには、 HyperlinkButton を使用します。 HyperlinkButton は、ボタンを使用する任意の場所で使用できる特殊な Button コントロールです。
  • HyperlinkButton Image をコンテンツとして使用して、クリック可能なイメージを作成します。

推奨事項

  • ナビゲーションにのみハイパーリンクを使用します。他のアクションには使用しないでください。
  • テキストベースのハイパーリンクには、タイプ ランプの Body スタイルを使用します。 フォントと Windows の種類のランプについて。
  • 個別のハイパーリンクを十分に離して、ユーザーがそれらを区別し、各ハイパーリンクを簡単に選択できるようにします。
  • ユーザーの移動先を示すヒントをハイパーリンクに追加します。 ユーザーが外部サイトに誘導される場合は、ヒント内に最上位のドメイン名を含め、テキストのスタイルを第 2 フォントの色で設定します。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。 プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

このコントロールの API は Windows.UI.Xaml.Controls 名前空間に存在します。

ハイパーリンク テキスト要素を作成する

この例では、 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>

ハイパーリンクはインラインで表示され、周囲のテキストと共に流れます。

テキスト要素としてのハイパーリンクの例

ヒント

XAML 内の他のテキスト要素と共にテキスト コントロールで Hyperlink を使用する場合は、コンテンツを Span コンテナーに配置し、 xml:space="preserve" 属性を Span に適用して、Hyperlink とその他の要素の間の空白を保持します。

HyperlinkButton を作成する

WinUI 3 ギャラリー アプリを開き、ハイパーリンクの動作を確認します。

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 に移動するには、NavigateUri プロパティを設定します。 ユーザーがハイパーリンクをクリックまたはタップすると、指定した URI が既定のブラウザーで開きます。 既定のブラウザーは、アプリとは別のプロセスで実行されます。

Note

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 イベントの処理

アプリ内のナビゲーションなど、ブラウザーで URI を起動する以外のアクションには、Click イベントを使用します。 たとえば、ブラウザーを開くのではなく新しいアプリ ページを読み込む場合は、Click イベント ハンドラー内で Frame.Navigate メソッドを呼び出して、新しいアプリ ページに移動します。 アプリにも存在する WebView コントロール内に絶対 URI を読み込むには、Click ハンドラー ロジックの一部として WebView.Navigate を呼び出します。

通常、Click イベントや NavigateUri 値の指定は処理しません。これは、ハイパーリンク要素を使用する 2 つの異なる方法を表します。 目的が既定のブラウザーで URI を開き、NavigateUri の値を指定している場合は、Click イベントを処理しないでください。 逆に、Click イベントを処理する場合は、NavigateUri を指定しないでください。

既定のブラウザーが NavigateUri に指定された有効なターゲットを読み込むのを防ぐために、Click イベント ハンドラー内でできることは何もありません。このアクションは、ハイパーリンクがアクティブ化されたときに自動的に (非同期的に) 実行され、Click イベント ハンドラー内から取り消すことはできません。

既定では、ハイパーリンクには下線が付けられます。 この下線は、アクセシビリティ要件を満たすのに役立つので重要です。 色覚障疵のあるユーザーは、下線を使用してハイパーリンクとその他のテキストを区別します。 下線を無効にする場合は、ハイパーリンクと他のテキスト (FontWeight や FontStyle など) を区別するために、他の種類の書式設定の違いを追加することを検討する必要があります。

ハイパーリンク テキスト要素

UnderlineStyle プロパティを設定して、下線を無効にすることができます。 その場合は、 FontWeight または FontStyle を使用してリンク テキストを区別することを検討してください。

HyperlinkButton

既定では、文字列を Content プロパティの値として設定すると、HyperlinkButton は下線付きのテキストとして表示されます。

テキストは、次の場合に下線が引かないように表示されます。

  • TextBlockを Content プロパティの値として設定し、TextBlock の Text プロパティを設定します。
  • HyperlinkButton を再テンプレート化し、 ContentPresenter テンプレート パーツの名前を変更します。

下線のないテキストとして表示されるボタンが必要な場合は、標準の Button コントロールを使用し、組み込みの TextBlockButtonStyle システム リソースを Style プロパティに適用することを検討してください。

ハイパーリンク テキスト要素のメモ

このセクションは、HyperlinkButton コントロールではなく、Hyperlink テキスト要素にのみ適用されます。

入力イベント

ハイパーリンクは UIElementではないため、Tapped、PointerPressed などの UI 要素入力イベントのセットはありません。 代わりに、ハイパーリンクには独自の Click イベントと、NavigateUri として指定された URI を読み込むシステムの暗黙的な動作があります。 システムは、ハイパーリンク アクションを呼び出す必要があるすべての入力アクションを処理し、応答で Click イベントを発生させます。

コンテンツ

ハイパーリンクには、 Inlines コレクションに存在できるコンテンツに制限があります。 具体的には、ハイパーリンクでは、別のハイパーリンクではない Run およびその他の Span 型のみが許可されます。 InlineUIContainer ハイパーリンクの Inlines コレクションに含めることはできません。 制限付きコンテンツを追加しようとすると、無効な引数の例外または XAML 解析例外がスローされます。

ハイパーリンクは Control から継承されないため、 Style プロパティや Template はありません。 Foreground や FontFamily など、 TextElement から継承されたプロパティを編集してハイパーリンクの外観を変更できますが、共通のスタイルやテンプレートを使用して変更を適用することはできません。 テンプレートを使用する代わりに、Hyperlink プロパティの値に共通のリソースを使用して一貫性を提供することを検討してください。 Hyperlink の一部のプロパティでは、システムによって提供される {ThemeResource} マークアップ拡張値の既定値が使用されます。 これにより、ユーザーが実行時にシステム テーマを変更したときに、ハイパーリンクの外観を適切な方法で切り替えることができます。

ハイパーリンクの既定の色は、システムのアクセント カラーです。 これをオーバーライドするには、 Foreground プロパティを設定できます。

サンプル コードの入手