本文へスキップ
BecomeCoder

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

TextBox(テキスト入力)

ブラウザで完結

導入

TextBoxは、ユーザーが文字を入力するための欄です。1行入力が基本ですが、複数行やパスワード入力(専用のPasswordBox)にも対応します。

XAMLサンプル(読み物)

<!-- 1行テキスト入力 -->
<TextBox x:Name="nameBox" Width="200" />

<!-- 複数行(改行可・折り返し) -->
<TextBox AcceptsReturn="True" TextWrapping="Wrap" Height="80" Width="200" />

<!-- パスワードは専用の PasswordBox(入力が伏せ字になる) -->
<PasswordBox x:Name="pwBox" Width="200" />
// 入力値の取得(コードビハインド)
string name = nameBox.Text;
string password = pwBox.Password;   // PasswordBox は .Text ではなく .Password

主なプロパティ

  • Text … 入力・表示される文字列(PasswordBoxはPassword
  • MaxLength … 入力できる最大文字数
  • IsReadOnly … 読み取り専用にする
  • AcceptsReturntrueで複数行入力を許可
  • TextWrappingWrapで長い行を折り返す

主なイベント

  • TextChanged … 入力が変わるたびに発生(入力チェック等に)

補足: パスワードはセキュリティ上、TextBoxではなくPasswordBoxを使います(.Passwordで取得)。

MVVM(実務ではこう書く)

入力値はnameBox.Textをコードビハインドで読むのではなく、ViewModelのプロパティに双方向バインドします。

<TextBox Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
// ViewModel 側(INotifyPropertyChanged。詳細は 139 データバインディング)
public string UserName
{
    get => _userName;
    set { _userName = value; OnPropertyChanged(); }
}

x:Nameもコードビハインドも不要。入力値は常にViewModelにあり、他の処理からそのまま使えます(UpdateSourceTrigger=PropertyChangedで1文字ごとに反映)。

試す(ローカル)

  • コードビハインド版(nameBox.Text)で確認後、ViewModelのUserNameにバインドしてx:Nameを消せることを体感する。

まとめ

  • TextBoxは文字入力欄。実務ではTextをViewModelのプロパティに双方向バインドする
  • 複数行はAcceptsReturn、折り返しはTextWrapping
  • パスワードはPasswordBox.Password

次回: 文字を表示するTextBlockです。

実際に動かしてみよう

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

XAML (WPF) プレビュー

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