最初の Xamarin.Forms アプリをビルドする

  • [アーティクル]

Windows での手順の詳細

Download Sampleサンプルのダウンロード

上記のビデオと共に以下の手順に従います。

  1. [ファイル] > [新規] > [プロジェクト...] の順に選択するか、[新しいプロジェクトの作成...] ボタンを押します。

  2. "Xamarin" を検索するか、 [プロジェクト タイプ] メニューから [モバイル] を選択します。 プロジェクト タイプ [モバイル アプリ (Xamarin.Forms)] を選択します。

  3. プロジェクト名を選択します。この例では "AwesomeApp" が使用されています。

  4. 空のプロジェクト タイプをクリックして、確実に [Android] と [iOS] が選択されているようにします。

    Android and iOS Blank App

  5. NuGet パッケージが復元される (ステータス バーに "復元が完了しました" メッセージが表示される) まで待ちます。

  6. 新しい Visual Studio 2022 のインストールでは Android SDK がインストールされません。次のように、最新の Android SDK をインストールするように求めるダイアログが表示される場合があります。

    Install Android SDK

  7. 新しい Visual Studio 2022 のインストールには、Android エミュレーターが構成されていません。 [デバッグ] ボタンのドロップダウン矢印をクリックし、 [Android Emulator の作成] を選択して、エミュレーターの作成画面を起動します。

    Create Android Emulator dropdown

  8. エミュレーターの作成画面で、既定の設定を使用して、 [作成] ボタンをクリックします。

    Android emulator creation screen

  9. エミュレーターを作成すると、[デバイス マネージャー] ウィンドウに戻ります。 [開始] ボタンをクリックして、新しいエミュレーターを起動します。

    Android emulator in the Device Manager

  10. Visual Studio 2022 では次のように [デバッグ] ボタンに新しいエミュレーターの名前が表示されるようになりました。

    Android emulator name on the Debug button

  11. [デバッグ] ボタンをクリックして、アプリケーションをビルドし、Android エミュレーターにデプロイします。

    Android emulator displaying the application

アプリケーションをカスタマイズする

アプリケーションをカスタマイズして、対話機能を追加することができます。 アプリケーションにユーザーの操作を追加するには、次の手順を実行します。

  1. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Android 上のアプリのデバッグ:

    Android app with Button

Visual Studio 2022 で iOS アプリをビルドする

ネットワーク接続された Mac コンピューターで Visual Studio から iOS アプリをビルドし、デバッグすることができます。 詳細については、セットアップ手順を参照してください。

Windows での手順の詳細

Download Sampleサンプルのダウンロード

上記のビデオと共に以下の手順に従います。

  1. [ファイル]、[新規]、[プロジェクト] の順に選択するか、[新しいプロジェクトの作成] ボタンを押します。

    Create a new project

  2. "Xamarin" を検索するか、 [プロジェクト タイプ] メニューから [モバイル] を選択します。 プロジェクト タイプ [モバイル アプリ (Xamarin.Forms)] を選択します。

    Filter for Xamarin projects

  3. プロジェクト名を選択します。この例では "AwesomeApp" が使用されています。

    Choose a project name

  4. 空のプロジェクト タイプをクリックして、確実に [Android] と [iOS] が選択されているようにします。

    Android and iOS, with .NET Standard

  5. NuGet パッケージが復元される (ステータス バーに "復元が完了しました" メッセージが表示される) まで待ちます。

  6. 新しい Visual Studio 2019 のインストールには、Android エミュレーターが構成されていません。 [デバッグ] ボタンのドロップダウン矢印をクリックし、 [Android Emulator の作成] を選択して、エミュレーターの作成画面を起動します。

    Create Android Emulator dropdown

  7. エミュレーターの作成画面で、既定の設定を使用して、 [作成] ボタンをクリックします。

    Android emulator creation screen

  8. エミュレーターを作成すると、[デバイス マネージャー] ウィンドウに戻ります。 [開始] ボタンをクリックして、新しいエミュレーターを起動します。

    Android emulator in the Device Manager

  9. Visual Studio 2019 では [デバッグ] ボタンに新しいエミュレーターの名前が表示されるようになりました。

    Android emulator name on the Debug button

  10. [デバッグ] ボタンをクリックして、アプリケーションをビルドし、Android エミュレーターにデプロイします。

    Android emulator displaying the application

アプリケーションをカスタマイズする

アプリケーションをカスタマイズして、対話機能を追加することができます。 アプリケーションにユーザーの操作を追加するには、次の手順を実行します。

  1. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Android 上のアプリのデバッグ:

    Android app

Note

このサンプル アプリケーションには、ビデオで説明されていない追加の対話機能が含まれています。

Visual Studio 2019 で iOS アプリをビルドする

ネットワーク接続された Mac コンピューターで Visual Studio から iOS アプリをビルドし、デバッグすることができます。 詳細については、セットアップ手順を参照してください。

このビデオでは、Windows で Visual Studio 2019 を使用して iOS アプリをビルドおよびテストするプロセスについて説明しています。

Mac での手順の詳細

Download Sampleサンプルのダウンロード

上記のビデオと共に以下の手順に従います。

  1. [ファイル]、[新しいソリューション] の順に選択するか、[新しいプロジェクト] ボタンをクリックし、[マルチプラットフォーム]、[アプリ]、[空白フォームのアプリ] の順に選択します。

    Blank Forms App

  2. 次のように [Android] と [iOS] が選択されていることを確認します。

    Android and iOS, with .NET Standard

Note

[アプリケーション名] と [組織の識別子] でサポートされている文字は、A-Z、a-z、'_'、'.'、および数字のみです。

  1. ソリューションを右クリックして、NuGet パッケージを復元します。

    Screenshot shows Restore NuGet Packages selected from the context menu for the solution.

  2. デバッグ ボタン (または [実行]、[デバッグ開始]) をクリックして、Android エミュレーターを起動します。

  3. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Android 上のアプリのデバッグ:

    Screenshot shows the Android Emulator.

  6. 右クリックして、iOS をスタートアップ プロジェクトに設定します。

    Set the startup project to iOS

  7. ドロップダウンから iOS シミュレーターを選択し、iOS でアプリをデバッグします。

Mac での手順の詳細

Download Sampleサンプルのダウンロード

上記のビデオと共に以下の手順に従います。

  1. [ファイル]、[新しいソリューション] の順に選択するか、[新しいプロジェクト] ボタンをクリックし、[マルチプラットフォーム]、[アプリ]、[空白フォームのアプリ] の順に選択します。

    Blank Forms App

  2. .NET Standard コード共有と共に、 [Android] と [iOS] が確実に選択されているようにします。

    Android and iOS, with .NET Standard

Note

[アプリケーション名] と [組織の識別子] でサポートされている文字は、A-Z、a-z、'_'、'.'、および数字のみです。

  1. ソリューションを右クリックして、NuGet パッケージを復元します。

    Screenshot shows Restore NuGet Packages selected from the context menu for the solution.

  2. デバッグ ボタン (または [実行]、[デバッグ開始]) をクリックして、Android エミュレーターを起動します。

  3. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Android 上のアプリのデバッグ:

    Screenshot shows the Android Emulator.

  6. 右クリックして、iOS をスタートアップ プロジェクトに設定します。

    Set the startup project to iOS

  7. iOS 上のアプリのデバッグ:

    iOS app

サンプル ギャラリーから完成したコードをダウンロードしたり、GitHub でそのコードを表示したりすることができます。

次の手順