[WinUI3] テキスト中に出てくるリンクをつくりたい1(没)

もくじ
https://tera1707.com/entry/2022/02/06/144447

やりたいこと

下の図のような感じで、文章中のリンク表示をつくりたい。

そこだけリンクだと分かるように色を変えて、かつ下線も引いた見た目にしたい。

※後日追記

もっと簡単で良いやり方があった。下記参照。

qiita.com

前提

  • VisualStudio2022 Community 17.2.6
  • WinUI3.0
  • Windows App SDK 1.1.4
  • 2022年8月の時点で調査実施

やりかた

HyperlinkButton を使う。

サンプルコード

<Window
    x:Class="InlineLinkTextJikken.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:InlineLinkTextJikken"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="ご意見・ご感想は" />
        <HyperlinkButton NavigateUri="https://www.google.com" BorderThickness="0" Padding="0" IsTabStop="False">
            <TextBlock Text="https://www.google.com" TextDecorations="Underline"/>
        </HyperlinkButton>
        <TextBlock Text="まで。" />
    </StackPanel>
</Window>

ポイント

シンプルに下記のようにも書けるが、

<HyperlinkButton Content="https://www.google.com" NavigateUri="https://www.google.com" />        

これだと、Button的動作もして、文章中に出てきてる感じではなく「ボタン」という感じになってしまう。

なので、文章中に出てくるようにPaddingを0にして余計なスペースをなくして、Tabを押してもフォーカス当たらなくして、念のため、ボタンの縁(Thickness)も0にした。

これで、ボタンっぽさは消えて、文章中のリンクっぽくなった。

まだ、マウスオーバー時に背景色が変わる動作はするが、もしこれも不要とかあれば、以前の「テーマカラーを扱った記事」を参考に、HyperlinkButtonのマウスオーバー時の色を変わらないようにするとよい。(未検証)

参考

コントロールのマウスオーバー時等の色を変えたい

https://tera1707.com/entry/2022/04/04/224347

WinUI3でテーマカラー(ダーク/ライト/ハイコントラスト)対応する

https://tera1707.com/entry/2022/04/14/232415

WinUI3ではStyle.Triggersがないので代替手段でマウスオーバー時の背景色変更する

https://tera1707.com/entry/2022/05/12/002758