WPF／UWP：テキストブロックの一部分だけをデータバインディングするには？［XAML］：.NET TIPS

.NET 4以降のWPF／UWPアプリで、RunコントロールのTextプロパティを使い、テキストの一部の内容だけをユーザーの入力に応じて変更する方法を解説する。

» 2016年02月10日 05時00分公開

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

対象：.NET 4以降

　テキストブロックに長いテキストを表示するとき、その一部分だけをデータバインディングしたいことはないだろうか？テキスト中の日付／名前／品名といった部分だけを、データバインディングによって変化させたいというような場合である。.NET 4のWPFからは、それが可能なのだ。本稿ではその方法を解説する。

実行例

　先に実行例をお見せしよう（次の画像）。上部の長いテキストで色の付いた太字の部分が、データバインディングしている部分である（2箇所）。この例では、下部に配置したテキストボックスに入力した文字列をバインドしている。このようにテキストの折り返しがある場合は、複数のテキストブロックを並べるという方法では実現するのは難しい。

テキストブロックの一部だけをバインドしている実行例（WPF）
WPFで作成したアプリをWindows 10で実行している。
下部に配置した二つのテキストボックスに入力した文字列を、上部の長いテキストで色の付いた太字の部分にデータバインディングしている。
下部のテキストボックスを編集すると、上部のテキストブロックにデータバインディングで反映される。二つの画像を比較すると、バインドしている文字列の長さが変わってもテキストブロックの自動折り返しが機能していると分かるだろう。

テキストブロックの一部分だけをデータバインディングするには？

　バインドしたい部分にRunコントロール（System.Windows.Documents名前空間）を配置し、そのTextプロパティにデータバインディングすればよい。ただし、RunコントロールはWPFの最初からあるのだが、Textプロパティにバインドできるのは.NET 4からなので、気を付けてほしい。

　上の画像の実行例のコードを示すと次のようだ。この例ではUIコントロール同士をバインドしているので、コードビハインドに追加するコードはない。

<TextBlock TextWrapping="Wrap" ……省略……>
長いテキストの一部、
例えば
「<Run Foreground="Green" FontWeight="Bold"
Text="{Binding Text, ElementName=textBox1}" />
は
<Run Foreground="DarkRed" FontWeight="Bold"
Text="{Binding Text, ElementName=textBox2}" />
です」
というように、バインドできます。
</TextBlock>
……省略……
<TextBlock ……省略……>バインド1</TextBlock>
<TextBox x:Name="textBox1" Foreground="Green" ……省略…… />
<TextBlock ……省略……>バインド2</TextBlock>
<TextBox x:Name="textBox2" Foreground="DarkRed" ……省略…… />

上の実行例のソースコード（XAML）
要所のみを掲載する。
なお、このコードはWPF用であるが、UWPでも同様だ。

　上のコードでは、RunコントロールのTextプロパティをデータバインディングしている。その他にForegroundプロパティとFontWeightプロパティも指定しているので、先の画像のように色付きで太字になっている（指定しなければ他の文字と同じになる）。また、Runコントロールの前後で改行しているため、それが画面では1文字分の空白が挿入されて表示される（他の文字との間に空白を入れたくないときは、改行しないようにする）。

　なお、データバインディングの必要がなければ、文字に色を付けたりするのにRunコントロールだけでなくSpan／Bold／Italic／Underlineといったコントロールも利用できる（いずれもSystem.Windows.Documents名前空間）。また、テキストブロック内で改行するにはLineBreakコントロール（System.Windows.Documents名前空間）を使う。