【Avalonia】MVVMでTextBoxの入力内容をTextBlockへ表示する
2026-05-31
AvaloniaでTextBoxに入力した内容をMVVM使ってTextBlockに表示する処理を作ります。
今回はプロジェクト作成時にMVVMテンプレートで作成した前提で進めます。
XAMLを作る
表示するTextBlockと入力するTextBoxを作成します。
.axamlに以下のコードを書きましょう。
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding InputText}" Foreground="White"/>
<TextBox Grid.Row="1" AcceptsReturn="True" TextWrapping="Wrap" Text="{Binding InputText}"/>
</Grid>
TextBlockとTextBoxに、Binding InputTextを入れることで入力した値をViewModelからバインド(表示)できるようにします。
ViewModelを作る
コードの全体像は
private string _inputText;
public string InputText
{
get => _inputText;
set
{
if (_inputText != value)
{
_inputText = value;
OnPropertyChanged();
}
}
}
という形ですね。
詳細を説明していくと、表示するテキストを保持するstring型の変数_inputTextとTextBoxに表示するテキストを保持するためのプロパティを作ります。
InputTextのgetで_inputTextを返します。
valueにはTextBoxから渡された値が入っているので、その値を_inputTextへ代入しています。
OnPropertyChanged();というメソットでInputTextプロパティが変更されたことをUIへ通知し、反映されるようになります。
これで入力した内容が表示されるようになっているはずです!