.NET MAUI チュートリアル - C# で初めてのマルチプラットフォーム アプリを構築する

Windows macOS

コードを編集する

.NET MAUI を使用してアプリケーションを開発している場合、アプリケーションをデバッグするときに XAML ホット リロードを使用できます。これは、アプリケーションの実行中に XAML ユーザー インターフェイス (UI) を変更できることを意味し、UI は自動的に更新されます。

Visual Studio に戻り、アプリを実行したままにしておきます。ソリューション エクスプローラーで、MyFirstMauiApp プロジェクトの下にある MainPage.xaml ファイルをダブルクリックします。"ソリューション エクスプローラー" ウィンドウが表示されない場合は、メイン メニューから [ビュー] > [ソリューション エクスプローラー] を選択します (または Ctrl + Alt + L キーを押します)。

MainPage.xaml ファイルが強調表示された

VS Codeで MainPage.xaml ファイルに戻り、アプリを実行したままにします。

MainPage.xaml ファイルが強調表示された

現在、２番目の Label の Text の 17 行目は、次のコードに示されているように Hello, World! と表示される設定になっています。:

MainPage.xaml
<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

テキストを更新して、Hello, .NET MAUI! と表示します。

MainPage.xaml
<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

変更すると、アプリの UI が自動的に更新されます。

.NET MAUI アプリを実行している Windows。ホット リロードで更新されたため、'Hello, .NET MAUI!' メッセージが表示されます。

.NET MAUI アプリを実行している Mac。ホット リロードで更新されたため、'Hello, .NET MAUI!' メッセージが表示されます。

.NET MAUI を使用してアプリケーションを開発している場合は、.NET ホット リロードを使用して C# コードを再読み込みすることもできます。アプリケーションのロジックを変更して、カウントを 1 ずつではなく 10 ずつ増やしてみましょう。

MainPage.xaml.cs を開きます (このファイルは MainPage.xaml の下に入れ子になっています。右クリックしてメニューから [コードの表示] を選択することもできます)。

選択範囲をドロップダウンして、MainPage.xaml の背後のコードを表示する

そのファイルの OnCounterClicked メソッドには、現在次のコードが含まれています:

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

count++; を count += 10; に更新して、10 ずつ増分するようにします。

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

コードの変更を適用するには、ファイルを保存し、Visual Studio で [ホット リロード] ボタンを選択するか、Alt キーと F10 キーを同時に押します。

選択範囲をドロップダウンして、MainPage.xaml の背後のコードを表示する

[ここをクリック] ボタンを選択すると、10 ずつ増加して表示されます。完了しました。実行中のアプリを今すぐ閉じることができます。

カウンターが 10 の増分に更新されました