WPFのテキストボックスで、行と行のあいだに罫線を入れたいです。

Question

こんにちは。
Windows10でWPFのアプリケーションを開発しています。
Visual Studio 2015 Communityを使っています。

###前提・実現したいこと
テキストボックスで、行と行のあいだに罫線を入れたいです。
現在は、テキストボックスを配置し、背景を透明にして、背景に罫線をあらかじめ描いてあるpngを表示しています。
これだと、テキストのサイズを変更するとか、スクロールしたりすると、罫線とずれてしまいます。

たとえばStackPanelに
1行分のテキスト(TextBox1)
罫線(Image1)
1行分のテキスト(TextBox2)
罫線(Image2)
のように配置すれば目的を達成できますが、TextBox1と2...にテキストを分割したり、結合したりすることはとてもむずかしいと感じています。

そもそもこういうことをするときにはどのようにするものなのでしょう?
ヒントをいただけないでしょうか。

###補足情報(言語/FW/ツール等のバージョンなど)
Microsoft Visual Studio Community 2015
Version 14.0.25424.00 Update 3
Microsoft .NET Framework
Version 4.6.01038

インストールしているバージョン:Community

Visual C# 2015 00322-20000-00000-AA575
Microsoft Visual C# 2015

です。
よろしくお願いします。

Answer 1

どのような目的で実現したいかと、テキスト量にもよりますが、自分で実装する場合、ItemsControlを使用するか、RichTextBoxを試してみると思います。

ItemsControl(ListBox等)の場合、文字列のラップクラスと行間用のクラスを用意してDataTemplateで処理。

RichTextBoxはあまり実際に使用していないので、案としての提議だけしておきます。

Comments

[cancat]

アイデアありがとうございます。
テキスト量はそこそこあります。30文字×200行くらいかな。
それでスクロールしたいという。

自分用の日記&メールビューアーなのです。
RichTextBoxもすこし調べてみます。
ありがとうございます。

Answer 2

下線属性で文字が存在する場所だけは罫線ぽくできなくはないですが罫線とは言えないのでそれではきっとだめですよね？

そもそもこういうことをするときにはどのようにするものなのでしょう?

TextBoxの能力を超えている気がするのでそれほど一般的ではないように思いますがどうなのでしょう。それはさておきTextBox自身に罫線を表現する機能はないと思うので基本方針は質問者さんがされているようにTextBoxの背景を透明にして奥に罫線を表現するコントロールを置くということになると思います。まずはスクロールの動作を適切にするために下記のような構造が考えられます。

ScrollViewer
  + Canvas(下の子供のサイズに追従させる)
      + 罫線コントロール(TextBoxの大きさに追従させる)
      + TextBox(スクロールバーは無効にし、大きさをテキストの内容に追従させる)

「罫線コントロール」と書きましたが実際はShape(Line?)を必要な本数だけ並べるといった感じにするのかなと思います。問題は行間の高さや文字のベースライン位置などTextBoxが自動的に計算してくれているものを自分で計算しなくてはならないことですがTextBoxのプロパティを見た感じフォントサイズ等の間接的な情報はあるものの位置計算の基礎データに直接使えそうなもの（行間の高さ）はないように思いました(見落としてたらすみません)

もし業務目的でないなら実際にやってみてフォントの大きさなどの情報を元にちょうどよい高さを調整するという方法でよさそうな気がします。しかしもし業務目的で開発しているならその方法では適当すぎるのでコントロールの仕様を調べてきちんと設計する必要がありそうです。

Comments

[cancat]

アイデアありがとうございます。
業務用ではなく、自分で使っているエディタ用なので、まあある程度てきとうでもかまわないのです。
わたしもずいぶん見てみたのですが、行間データとかは見つからず、なかなか難儀だな～と思ってます。

[KSwordOfHaste]

ただの思い付きですが・・・罫線の描画のために下線属性をつけてタブ文字などだけを置いたTextBlock or TextBoxを使ったら割合簡単になるのではないかと思いました。フォントを表側のTextBoxに合わせることに注意すれば行間の高さの計算は気にしなくてよくなります。Widthに応じて１行あたりに適当な数のタブを設定しなければなりませんが、それは比較的簡単に思えました。

[cancat]

おお。なるほど。
罫線は凝った画像にしたいので、下線だけだと微妙ですが、それは面白いアイデアです。
思いつき、感謝します。