タイトルの通りなのですが、WPFでテキストにルビをつける方法が分からないのです。
Canvasあたりにゴリゴリとコードビハインドで描画すればでき……そう?な気はしますが、どうせなら何らかのプロパティ(コレクションでしょうか)に本文やルビを設定すると表示できるようなUserControl/CustomControlを作る方法が分かればありがたいところです。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するおそらくWebBrowserコントロールを使って<ruby>タグでルビを付ける方法が、最も安全で手っ取り早いと思われます。
ユーザコントロールなどにWebBrowserコントロールを配置して、以下のようにNavigateToStringを呼び出すことでルビ付きのHTMLを表示させることができます。
webBrowser.NavigateToString("<html><body><ruby>螺鈿<rt>らでん</rt></ruby></body></html>");
試しに上記の原理で動くラベル風のカスタムコントロールを作ってみました。
リンク先のカスタムコントロールをビルドしてdllを参照することで、上記スクリーンショットのように青空文庫風にルビを振ったり、 Append(string text, string ruby)
メソッドを呼び出してルビ付きのhtmlを生成したりすることができます。
もしどなたかが同様のコントロールを作成するときの参考になれば幸いです。
manabu24さんが書かれていた本家SOでの回答を参考にXAMLで頑張ってみました。
<TextBlock FontSize="14" LineHeight="28" LineStackingStrategy="BlockLineHeight" FontFamily="Meiryo">
<TextBlock LineHeight="14" TextAlignment="Center">
<Run FontSize="8" Typography.Variants="Ruby">がっこう</Run><LineBreak/>
学校
</TextBlock>
へ
<TextBlock LineHeight="14" TextAlignment="Center">
<Run FontSize="8" Typography.Variants="Ruby">い</Run><LineBreak/>
行
</TextBlock>
きました。<LineBreak/>
<TextBlock LineHeight="14" TextAlignment="Center">
<Run FontSize="8" Typography.Variants="Ruby">たぶん</Run><LineBreak/>
多分
</TextBlock>
。
</TextBlock>
Typography.Variants="Ruby"
を指定することで、OpenTypeフォントに含まれるルビ用のグリフを選択します。メイリオで見た感じだと、少し文字が潰れて、太字気味になった気がします。LineStackingStrategy.BlockLineHeight
が必要です。ここまでするぐらいなら、ブラウザコンポーネントを使いたくなりますね・・・。
既に解決されてるかもしれませんが、同様の内容の質問がありましたのでリンクを貼り付けておきます。
Display text above specific text
RunタグにはTextプロパティも存在しますので、ViewModelからのBindingも可能でした。