演習
温度変換アプリを作成したので、Avaloniaについての理解度を確認するために、次の3つの演習に挑戦してみましょう。
演習1:既存の属性を変更する
難易度:★
GetStartedApp のグリッド線を見えないようにしてください。
ヒント
MainWindow.axaml で <Grid> を指定しました。
解答
MainWindow.axaml で <Grid> の開始タグを探します。
ShowGridLines 属性を False に変更してください。
<Grid ShowGridLines="False" Margin="5"
ColumnDefinitions="120, 100"
RowDefinitions="Auto, Auto, Auto">演習2:新しい属性を追加する
難易度:★★
GetStartedApp の Fahrenheit(華氏)のテキストボックスに、ユーザーが文字を入力できないようにしてください。
ヒント①
TextBox コントロールについて詳しく知るには、TextBoxのAPIリファレンスを確認してください。
ヒント②
TextBoxのAPIリファレンスを見ると、IsReadOnly という属性があります。
解答
MainWindow.axaml でFahrenheit(華氏)のボックスに対応する <TextBox> タグを探します。
IsReadOnly 属性を追加し、その値を True に設定してください。
<TextBox Grid.Row="1" Grid.Column="1" Margin="0 5" Text="0" Name="Fahrenheit" IsReadOnly="True"/>演習3:新しいイベント処理をプログラムする
難易度:★★★
ユーザーが入力するたびに、GetStartedApp が温度変換を計算するようにしてください。
ヒント①
TextBox コントロールについて詳しく知るには、TextBoxのAPIリファレンスを確認してください。
ヒント②
TextBoxのAPIリファレンスを見ると、TextChanged というイベントがあります。
ヒント③
イベントハンドラーは、C# のコードビハインドである MainWindow.axaml.cs に定義されています。
また、XAML ファイルである MainWindow.axaml からも参照されています。
解答
- MainWindow.axaml でCelsius(摂氏)のボックスに対応する
<TextBox>タグを探します。TextChangedイベントを追加し、その値をCelsius_TextChangedなどのイベント名を指定してください。
<TextBox Grid.Row="0" Grid.Column="1" Margin="0 5" Text="0" TextChanged="Celsius_TextChanged" Name="Celsius"/>MainWindow.axaml で
<Button>から始まる行全体を削除してください。
この行はもう必要ありません。<Button HorizontalAlignment="Center" Click="Button_OnClick">Calculate</Button>MainWindow.axaml で
private voidから始まるイベントハンドラーの行を探します。 イベント名をButton_OnClickから、XAML ファイルで付けた名前に変更してください。
(例:Celsius_TextChanged)
private void Celsius_TextChanged(object? sender, RoutedEventArgs e)- アプリを実行して、Celsius(摂氏)のボックスに入力すると、Fahrenheit(華氏)のボックスの値が変化することを確認してください。
オプション:さらなる改善
Celsius(摂氏)の入力欄で、空欄やマイナス記号(-)だけの入力も受け付けるようにするには、コードビハインドを次のように変更します。
- MainWindow.axaml.cs で、イベントハンドラー
private void Celsius_TextChangedを探します。空欄またはマイナス記号(-)だけの状態を受け付けるためのif条件を追加します。
if (string.IsNullOrEmpty(Celsius.Text) || Celsius.Text == "-")
{
Fahrenheit.Text = "";
}- 元の double のパーサー部分を
else ifから始まる条件に変更します。これが2番目の条件になります。
else if (double.TryParse(Celsius.Text, out double C))- イベントハンドラーは、次のようになります。
private void Celsius_TextChanged(object? sender, RoutedEventArgs e)
{
if (string.IsNullOrEmpty(Celsius.Text) || Celsius.Text == "-")
{
Fahrenheit.Text = "";
}
else if (double.TryParse(Celsius.Text, out double C))
{
var F = C * (9d / 5d) + 32;
Fahrenheit.Text = F.ToString("0.0");
}
else
{
Celsius.Text = "0";
Fahrenheit.Text = "0";
}
}- アプリを実行し、摂氏の入力欄の内容をすべて削除したり、マイナス記号(-)だけを入力したりしても、入力欄が 0 に戻らないことを確認します。この状態では、華氏の入力欄には何も表示されません。
この変更により、途中で入力内容がリセットされることなく、負の数を入力できるようになります。
お疲れさまでした!Avalonia の入門チュートリアルはこれで完了です。
さらに詳しく学ぶ
- 次のチュートリアルで ToDo リストアプリを作ってみる
- Avalonia の基本を学ぶ
- MVVM デザインパターンを理解する
- UI のスタイル設定について学ぶ
- Avalonia のコントロール一覧を見る
- API リファレンスを見る