午後わてんのブログ

ベランダ菜園とWindows用アプリ作成(WPFとC#)

WPF、TextBoxのPropertyから書式設定いろいろ試してみた

TextBoxのPropertyだけで、どこまで書式設定できるのか試しているうちにでき上がった

ダウンロード先

Release TextBoxPropertyで書式設定 · gogowaten/2022WPF

github.com
20220615_TextBoxThumb.zipがそれ

コード

github.com

動作

起動時
ウィンドウ左に表示確認用のTextBox、右で設定
起動時の主な設定は

  • フォントサイズ30
  • 改行を有効
  • Border(枠)の太さ1
  • アンダーラインを表示
    • 色はDeepPink
    • 太さは1

TextBoxはマウスドラッグ移動できる
ダブルクリックでテキスト編集状態になる
もう一度ダブルクリックで編集状態終了

テキスト編集状態


BorderThickness、枠の太さ

BorderThickness = 0.0
0を指定すると実質非表示になるのは意外だった、これはいいねえ

BorderBrush、枠の色

枠の色
太さを8.5、色をOliveDrabにしたところ


Background、背景色

背景色


Foreground、文字色

文字色


Padding、枠と文字の距離

Padding
上下左右個別に指定できるけど、このアプリでは全て同じ値を指定している

FontFamily

フォント指定
初期のフォントはYu Gothic UIだった、これをあずきフォントに変えてみると
あずきフォント


FontStyle

FontStyle
FontStyleは3種類あるけどObliqueとItalicはどちらも斜体になるので実質2種類?
Obliqueを翻訳したら斜めって意味だった、やっぱり同じじゃないですか!?
ObliqueとItalic


FontWeight、文字の太さ

FontWeight一覧
これもいっぱいあるけど、ほとんど変化しないのは、実際の太さ指定はフォントファイルで分けているからかな
太さの違うフォントファイル
フォントファイルとか、FontFamily自体で太さを分けているフォントが多いからFontWeightの出番はあんまりなさそう?

TextAlignment、文字の水平位置?

TextAlignment

Center 2
テキストは中央揃えで配置されています。

Justify 3
テキストは両端揃えで配置されています。

Left 0
既定値。 テキストは左揃えで配置されています。

Right 1
テキストは右揃えで配置されています。

docs.microsoft.com より引用

Right
Center
Justify
Justifyは説明にあるような両端揃えにならないで、Leftと同じ表示になる!
これは
英語「justify」の意味・使い方・読み方 | Weblio英和辞書 ejje.weblio.jp
ここを見ると左右の一方に揃える意味でも使われるってあるから、それみたいね、なんか残念

HorizontalContentAlignment、コンテンツの水平位置

HorizontalContentAlignment一覧
さっきのTextAlignmentの項目とほぼ同じで、JustifyがStretchに変わっただけにみえるけど、動作が違った
Centerを指定しても変化しない↓
Centerを指定

だけど、アプリを再起動して真っ先にHorizontalContentAlignment.Centerを指定したら、期待通りCenterになった

TextAlignmentより先にHorizontalContentAlignmentを指定
ってことでTextAlignmentを先に設定してしまうと、その後にHorizontalContentAlignmentで何を指定しても無視されてしまうみたい

Stretch
TextAlignmentにはない項目のStretchを試したけど、Left指定と変化ない、これだとTextAlignmentと全く同じ動きだから、HorizontalContentAlignmentを使うことはなさそう

VerticalContentAlignment、垂直位置

VerticalContentAlignment一覧
TextBoxのサイズは指定しない限り、表示するテキストのサイズに合わせて変化するので、このままだとVerticalContentAlignmentを指定しても見た目は変化しない
変化を見るには先に高さ(Height)を今より大きく指定する必要があった
Height指定
高さを300に指定してから、VerticalContentAlignmentをCenterにすると
VerticalContentAlignment.Center
中央に表示された

Bottom指定

Bottom

Stretch指定

Stretch
これはTop指定と変わらず


TextDecoration、アンダーラインや打ち消し線の設定

TextDecoration
装飾だけど実際にできることは横線の設定だけみたいだった

TextDecorationLocation

TextDecorationLocation一覧

OverLine

OverLine

Strikethrough

Strikethrough

Baseline

Baseline


TextDecorationUnit、表示位置の決め方?

FontRecommended 0
TextDecoration で使用するフォントに対して相対的な単位値。 装飾が複数のフォントにわたる場合は、平均推奨値が計算されます。 これが既定値です。


FontRenderingEmSize 1
フォントの全角サイズに対して相対的な単位値。 オフセットまたは太さの値は、フォントの全角サイズを掛け合わせたオフセットまたは太さの値に相当します。


Pixel 2
ピクセルで表される単位値。

docs.microsoft.com より引用

TextDecorationUnit一覧
これはPenOffsetと共に設定すると効果が出るので

TextDecorationUnit

PenOffset
PenOffsetを2.0にしてみたところ、変化なし…
FontRecommendedだとPenOffsetを無視して、フォント自体のおすすめが適用されるみたい

FontRenderingEmSize

FontRenderingEmSize
かなり下の方にずれて表示された
フォントのEmSizeにPenOffsetを掛け算した値のぶん下に表示される?

Pixel

Pixel
PenOffsetで指定した値のPixelぶん下に表示される


PenThicknessUnit、線の太さの決め方?

PenThicknessと関係している
PenThickness = 1.0の状態で見てみる

FontRecommended

PenThicknessUnit一覧
フォントからのおすすめの太さで表示されている?
PenThicknessは無視されているわけじゃないようで、1.0から10.0を指定すると
FontRecommended+PenThickness10
太くなった

FontRenderingEmSize

FontRenderingEmSize
フォントの高さとPenThicknessの掛け算した値の太さになっているみたい
PenThicknessを10.0にすると
FontRenderingEmSize+PenThickness10


Pixel

Pixel
PenThicknessの値のピクセル幅になる
Pixel+PenThickness10


感想

斜体にすると枠に収まらない

右端が欠ける
FontStyleを斜体Italicにすると、テキストの右端が枠に収まりきらずに、欠けた状態で表示されてしまう
Paddingを調整すればいいのかと広げてみたけど
Padding = 20でも欠けたまま
欠けたままで、期待どおりにはならなかった

TextBoxのプロパティからでは文字の装飾は殆どできないのがわかった
影をつけたり、縁取りの設定するプロパティはなさそうだし、アンダーラインも表示する行、文字の設定はなくて、すべてに表示される
文字入力が主な目的ってことなのかな


関連記事

前回のWPF記事
gogowaten.hatenablog.com

移動できるTextBoxは3日前
gogowaten.hatenablog.com

半年前
gogowaten.hatenablog.com フォント一覧取得はここから