連載
» 2016年02月10日 05時00分 UPDATE

.NET TIPS:WPF/UWP:テキストブロックの一部分だけをデータバインディングするには?[XAML]

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

[山本康彦,BluewaterSoft/Microsoft MVP for Windows Development]
.NET TIPS
Insider.NET

 

「.NET TIPS」のインデックス

連載目次

対象:.NET 4以降


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

実行例

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

テキストブロックの一部だけをバインドしている実行例(WPF)
テキストブロックの一部だけをバインドしている実行例(WPF) テキストブロックの一部だけをバインドしている実行例(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名前空間)を使う。

まとめ

 テキストブロックの一部分だけをデータバインディングするにはRunコントロールを使う。ただし、バインドできるようになったのは.NET 4からなので注意してほしい。

利用可能バージョン:.NET Framework 4以降
カテゴリ:WPF 処理対象:データバインディング
カテゴリ:WPF/XAML 処理対象:TextBlockコントロール
使用ライブラリ:Runコントロール(System.Windows.Documents名前空間)
関連TIPS:[WPF、Silverlight 2]リストボックス内でTextBlockコントロールの文字列を折り返すには?[XAML]
関連TIPS:WPF:テキストボックスのカーソルの色を変えるには?[XAML]
関連TIPS:WPF:テキストボックスで選択されたテキストの背景色を変えるには?[XAML]


「.NET TIPS」のインデックス

.NET TIPS

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。