WPF：テキストボックスで選択されたテキストの背景色を変えるには？［XAML］：.NET TIPS

WPFアプリにおいて、SelectionBrushプロパティを使いテキストボックスやリッチテキストボックスの選択範囲の背景色を変更する方法を解説する。

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Platform Development]

　

連載目次

対象：.NET 4.0以降

　テキストボックスでテキストを選択するとその部分が強調表示（ハイライト）される。そのハイライト部分の背景色（正確には「前景」の色、後述）を変えたいと思ったことはないだろうか？ 例えば、テキストボックスに背景色を設定したとき、その色によってはハイライトが見づらくなってしまう（次の画像）。ハイライトの色を変更できれば見やすくなるだろう。そこで本稿では、WPFのテキストボックスで選択された文字列のハイライト色を設定する方法を説明する。

ハイライトが見づらいテキストボックス（2倍に拡大、上：Windows 7、下：Windows 8.1）
テキストボックスの背景色を黒に、文字を明るい緑に設定した。表示されている「テキストボックス」という文字列がハイライトされているのだが、分かりにくい。見やすくするために、ハイライト色を変更できないだろうか？
なお、XAMLコードでフォントサイズを12ポイントに設定している（以下の画像も同じ）。フォントファミリーは指定していないので、既定のフォントで表示されている（Windows 7では「メイリオ」、Windows 8.1では「Meiryo UI」）。

テキストボックスのハイライト色を変えるには？

　TextBoxコントロール（System.Windows.Controls名前空間）のSelectionBrushプロパティを設定すればよい。また、透明度を指定するSelectionOpacityプロパティも、必要に応じて利用できる（後述）。なお、RichTextBoxコントロール（System.Windows.Controls名前空間）でも同様である。

　SelectionBrushプロパティに単色を設定するには、次のコードのようにする。

<TextBox Foreground="LimeGreen" Background="Black" SelectionBrush="Yellow" ……省略…… />

ハイライトに単色を設定するコード例（XAML）
フォントサイズなどの指定は省略してある（以下同じ）。

　すると、次の画像のような表示になる。

単色を指定したハイライト（2倍に拡大、上：Windows 7、下：Windows 8.1）

　SelectionBrushプロパティはBrush型（System.Windows.Media名前空間）であるから、タイルブラシやグラデーションブラシなども設定できる。次のコードは、グラデーションブラシを設定する例だ。

<TextBox Foreground="LimeGreen" Background="Black" ……省略……>
  <TextBox.SelectionBrush>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Transparent"/>
      <GradientStop Color="Transparent" Offset="0.5"/>
      <GradientStop Color="Red" Offset="0.9"/>
      <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
  </TextBox.SelectionBrush>
</TextBox>

ハイライトにグラデーションブラシを設定するコード例（XAML）
XAMLでプロパティを指定するには、前出の単色を設定するコード例のようにXMLの属性として指定する方法と、このコードのようにXMLの子要素として指定する方法がある。単純な文字列として表せないオブジェクトを指定するには、このように子要素としてオブジェクトを表現する。
ここで使っているLinearGradientBrushクラス（System.Windows.Media名前空間）は、直線的に色が変化するグラデーションブラシだ。StartPoint／EndPoint属性で、上端を開始点、下端を終了点として色を変化させると指定している（ブラシによって塗りつぶされる領域は左上角が（0, 0）、右下角が（1, 1）となる。この例におけるStartPoint属性の「0.5, 0」は塗りつぶされる領域の上端中央を、EndPoint属性の「0.5, 1」は下端中央を意味し、ブラシで塗りつぶされる領域の上端から下端に向けて垂直に色が変化していくことになる）。<GradientStop>要素はOffset属性で指定される位置における色を示すものだ。上端、すなわち「Offset="0"」（これは省略可能なので、上のコードでは省略している）における色は「"Transparent"」（＝透明）、上端から50％離れたところ（＝「Offset="0.5"」）にも「"Transparent"」と指定してあり、この間は全て「"Transparent"」になる。続いて、上端から90％離れたところ（＝「Offset="0.9"」）には「"Red"」と指定してあり、先ほどの50％離れたところからここまでの色は直線的に色が変化するように自動的に計算される。最後に下端（＝「Offset="1"」）でも「"Red"」が指定されており、90％の位置から下端までは「"Red"」になる。

　このグラデーションブラシを設定したハイライトは、次の画像のようになる。

グラデーションブラシを指定したハイライト（2倍に拡大、上：Windows 7、下：Windows 8.1）

SelectionOpacityプロパティの効果とは？

　テキストボックスのハイライトは、文字よりも「手前」に表示されている。

　ハイライトは既定では半透明になっていて、ハイライトを透かす形で文字が見えているのだ。次のコードのようにSelectionOpacityプロパティに「1」を指定して、完全に不透明にしてみるとはっきりする。

<TextBox Foreground="LimeGreen" Background="Black" ……省略……
         SelectionBrush="Yellow" SelectionOpacity="1"/>

ハイライトを不透明に設定するコード例（XAML）
Opacity（＝不透明度）の指定は、0で完全な透明に、1で完全な不透明になる。

　すると、次の画像のように、選択した文字が完全に隠されてしまう。

不透明にしたハイライト（2倍に拡大、上：Windows 7、下：Windows 8.1）

　なお、SelectionOpacityプロパティの既定値（指定しなかったときの値）は、筆者の調べた範囲では「0.4」であった。

補足：Windowsの既定のハイライト色について

　冒頭に掲げた画像では、ハイライト色は薄い青色に見える。これは既定の色であるが、どこで設定されているのだろうか？

　XAMLコードから参照するには、SystemColors.HighlightBrushKeyプロパティなどを使用する。実際に定義されている場所は、システムレジストリの「HKEY_CURRENT_USER\Control Panel\Colors」にある［Hilight］キーである（変更の反映には再起動が必要）。これは、Windows 7ではコントロールパネルから設定できる（次の画像）。ただし、画面をハイコントラストに切り替えた場合は、その設定が優先される。

［ウィンドウの色とデザイン］ダイアログでハイライト色を変更できる（Windows 7）
コントロールパネルで［デスクトップのカスタマイズ］−［個人設定］−［ウィンドウの色とデザイン］を開き、そこで［デザインの詳細設定］リンクをクリックすると、この［ウィンドウの色とデザイン］ダイアログが出てくる。［指定する部分］ドロップダウンで［選択項目］を選び、その右にある［色 1］ドロップダウンでハイライト色を変更する。
なお、Windows 8からはこのダイアログは廃止されている。

利用可能バージョン：.NET Framework 4.0以降
カテゴリ：WPF／XAML　処理対象：TextBoxコントロール
使用ライブラリ：TextBoxコントロール（System.Windows.Controls名前空間）
関連TIPS：WPF：テキストボックスのカーソルの色を変えるには？［XAML］

■この記事と関連性の高い別の.NET TIPS

• WPF：テキストボックスのカーソルの色を変えるには？
• DataGridコントロールで入力中のセルをハイライト表示するには？
• コンソール・アプリケーションで文字色や背景色を変えるには？
• 画像の背景部分を透明にするには？
• Visual Studio 2012のXAMLデザイナで「色名」により色を指定するには？

「.NET TIPS」