本文へスキップ
BecomeCoder

C# WPFコース · 第1章 WPF ― デスクトップアプリ開発 · レッスン4

TextBlock(文字の表示)

ブラウザで完結

導入

TextBlockは、文字を表示するための軽量なコントロールです(入力はできません)。見出し・説明・値の表示などに使います。よく似たLabelとの違いも押さえましょう。

XAMLサンプル(読み物)

<!-- 文字の表示。フォント・色・太さを属性で指定 -->
<TextBlock Text="こんにちは、WPF!"
           FontSize="18" FontWeight="Bold" Foreground="Teal" />

<!-- 長い文章は折り返す -->
<TextBlock Text="ここに長い説明文が入ります……"
           TextWrapping="Wrap" Width="200" />

<!-- Label はフォームの見出し向き(アクセスキー _ や関連付けに対応) -->
<Label Content="_名前:" Target="{Binding ElementName=nameBox}" />

主なプロパティ

  • Text … 表示する文字列
  • FontSize / FontWeight / FontFamily … フォントの大きさ・太さ・種類
  • Foreground … 文字色(Backgroundは背景色)
  • TextWrappingWrapで折り返し
  • TextAlignment … 文字寄せ(Left/Center/Right)

TextBlock と Label の違い

  • TextBlock:軽量な文字表示。単に文字を出すならこちら
  • Label:フォームの「見出し」向き。アクセスキー(_名前でAlt+Nでフォーカス移動)や、Targetで入力欄との関連付けができる

MVVM(実務ではこう書く)

表示する文字もViewModelのプロパティにバインドします。ViewModelで値を変えるだけで画面が自動更新されます。

<TextBlock Text="{Binding Message}" />
// ViewModel 側
public string Message
{
    get => _message;
    set { _message = value; OnPropertyChanged(); }   // 変更が画面に自動反映
}

試す(ローカル)

  • Textを固定文字からViewModelのMessageバインドに変え、ViewModel側で値を変えると表示が変わることを確認。

まとめ

  • TextBlockは文字を表示する(入力不可)
  • FontSize/Foreground/TextWrappingで見た目を調整
  • 実務ではTextをViewModelのプロパティにバインド(単なる表示はTextBlock、フォーム見出しはLabel)

次回: オン/オフを選ぶCheckBoxです。

実際に動かしてみよう

下のエディタに XAML を書くと、右側のプレビューにその場で WPF 風のUIが描画されます。テキスト入力・チェック・選択はそのまま動き、`{Binding}` で結んだ TextBox と TextBlock は打った文字がリアルタイムで反映されます。本文の XAML を打ち込んだり、属性(Width・Margin・FontSize・色など)を書き換えたりして、レイアウトの変化を確かめながら進めましょう(C# のコードビハインドや Command、ItemsSource などC#側のデータに依存する処理は実行されません。それらは Visual Studio で試します)。

XAML (WPF) プレビュー

書いた XAML をその場で WPF 風の画面に描画する学習用プレビューを読み込みます(本物のWPFではなく、レイアウトとコントロールの見た目・{Binding}の双方向バインディングを再現したものです。C#のコードビハインド/Command は実行されません)。
スクロールして表示された時点でも自動で読み込まれます。