最初の Xamarin.Forms アプリをビルドするBuild your first Xamarin.Forms App

このビデオを視聴し、作業を進めて、 による最初のモバイル アプリを作成します。Xamarin.FormsWatch this video and follow along to create your first mobile app with Xamarin.Forms.

Windows での手順の詳細Step-by-step instructions for Windows

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

上記のビデオと共に以下の手順に従います。Follow these steps along with the video above:

  1. [ファイル]、[新規]、[プロジェクト] の順に選択するか、 [新しいプロジェクトの作成] ボタンを押します。Choose File > New > Project... or press the Create new project... button:

    新しいプロジェクトを作成するCreate a new project

  2. "Xamarin" を検索するか、 [プロジェクト タイプ] メニューから [モバイル] を選択します。Search for "Xamarin" or choose Mobile from the Project type menu. プロジェクト タイプ [モバイル アプリ (Xamarin.Forms)] を選択します。Select the Mobile App (Xamarin.Forms) project type:

    Xamarin プロジェクトのフィルターFilter for Xamarin projects

  3. プロジェクト名を選択します。この例では "AwesomeApp" が使用されています。Choose a project name – the example uses "AwesomeApp":

    プロジェクト名の選択Choose a project name

  4. のプロジェクト タイプをクリックして、確実に [Android][iOS] が選択されているようにします。Click on the Blank project type and ensure Android and iOS are selected:

    Android および iOS と .NET StandardAndroid and iOS, with .NET Standard

  5. NuGet パッケージが復元される (ステータス バーに "復元が完了しました" メッセージが表示される) まで待ちます。Wait until the NuGet packages are restored (a "Restore completed" message will appear in the status bar).

  6. 新しい Visual Studio 2019 のインストールには、Android エミュレーターが構成されていません。New Visual Studio 2019 installations won't have an Android emulator configured. [デバッグ] ボタンのドロップダウン矢印をクリックし、 [Android Emulator の作成] を選択して、エミュレーターの作成画面を起動します。Click the dropdown arrow on the Debug button and choose Create Android Emulator to launch the emulator creation screen:

    [Android Emulator の作成] ドロップダウン

  7. エミュレーターの作成画面で、既定の設定を使用して、 [作成] ボタンをクリックします。In the emulator creation screen, use the default settings and click the Create button:

    [Android Emulator の作成] 画面Android emulator creation screen

  8. エミュレーターを作成すると、[デバイス マネージャー] ウィンドウに戻ります。Creating an emulator will return you to the Device Manager window. [開始] ボタンをクリックして、新しいエミュレーターを起動します。Click the Start button to launch the new emulator:

    デバイス マネージャーの Android エミュレーター

  9. Visual Studio 2019 では [デバッグ] ボタンに新しいエミュレーターの名前が表示されるようになりました。Visual Studio 2019 should now show the name of the new emulator on the Debug button:

    [デバッグ] ボタンの Android エミュレーター名

  10. [デバッグ] ボタンをクリックして、アプリケーションをビルドし、Android エミュレーターにデプロイします。Click the Debug button to build and deploy the application to the Android emulator:

    アプリケーションを表示している Android エミュレーター

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

アプリケーションをカスタマイズして、対話機能を追加することができます。The application can be customized to add interactive functionality. アプリケーションにユーザーの操作を追加するには、次の手順を実行します。Perform the following steps to add user interaction to the application:

  1. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  2. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。Edit MainPage.xaml.cs, adding this code to the end of the class:

    int count = 0;
    void Button_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  3. Android 上のアプリのデバッグ:Debug the app on Android:

    Android アプリ

注意

このサンプル アプリケーションには、ビデオで説明されていない追加の対話機能が含まれています。The sample application includes the additional interactive functionality that is not covered in the video.

Visual Studio 2019 で iOS アプリをビルドするBuild an iOS app in Visual Studio 2019

ネットワーク接続された Mac コンピューターで Visual Studio から iOS アプリをビルドし、デバッグすることができます。It's possible to build and debug the iOS app from Visual Studio with a networked Mac computer. 詳細については、セットアップ手順を参照してください。Refer to the setup instructions for more information.

このビデオでは、Windows で Visual Studio 2019 を使用して iOS アプリをビルドおよびテストするプロセスについて説明しています。This video covers the process of building and testing an iOS app using Visual Studio 2019 on Windows:

Windows での手順の詳細Step-by-step instructions for Windows

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

上記のビデオと共に以下の手順に従います。Follow these steps along with the video above:

  1. [ファイル]、[新規]、[プロジェクト] の順に選択するか、 [新しいプロジェクトの作成] ボタンをクリックして、 [Visual C#]、[クロスプラットフォーム]、[モバイル アプリ (Xamarin.Forms)] の順にクリックします。Choose File > New > Project... or press the Create new project... button, then select Visual C# > Cross-Platform > Mobile App (Xamarin.Forms):

    モバイル アプリ (Xamarin.Forms)Mobile App (Xamarin.Forms)

  2. .NET Standard コード共有と共に、 [Android][iOS] が確実に選択されているようにします。Ensure Android and iOS are selected, with .NET Standard code sharing:

    Android および iOS と .NET StandardAndroid and iOS, with .NET Standard

  3. NuGet パッケージが復元される (ステータス バーに "復元が完了しました" メッセージが表示される) まで待ちます。Wait until the NuGet packages are restored (a "Restore completed" message will appear in the status bar).

  4. デバッグ ボタン (または [デバッグ]、[デバッグ開始] メニュー項目) をクリックして、Android エミュレーターを起動します。Launch Android emulator by pressing the debug button (or the Debug > Start Debugging menu item).

  5. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  6. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。Edit MainPage.xaml.cs, adding this code to the end of the class:

    int count = 0;
    void Button_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  7. Android 上のアプリのデバッグ:Debug the app on Android:

    スクリーンショットには Android Emulator が表示されています。

    ヒント

    ネットワーク接続された Mac コンピューターで Visual Studio から iOS アプリをビルドし、デバッグすることができます。It is possible to build and debug the iOS app from Visual Studio with a networked Mac computer. 詳細については、セットアップ手順を参照してください。Refer to the setup instructions for more information.

Mac での手順の詳細Step-by-step instructions for Mac

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

上記のビデオと共に以下の手順に従います。Follow these steps along with the video above:

  1. [ファイル]、[新しいソリューション] の順に選択するか、 [新しいプロジェクト] ボタンをクリックし、 [マルチプラットフォーム]、[アプリ]、[空白フォームのアプリ] の順に選択します。Choose File > New Solution... or press the New Project... button, then select Multiplatform > App > Blank Forms App:

    空白フォームのアプリBlank Forms App

  2. .NET Standard コード共有と共に、 [Android][iOS] が確実に選択されているようにします。Ensure Android and iOS are selected, with .NET Standard code sharing:

    Android および iOS と .NET StandardAndroid and iOS, with .NET Standard

  3. ソリューションを右クリックして、NuGet パッケージを復元します。Restore NuGet packages, by right-clicking on the solution:

    スクリーンショットでは、ソリューションのコンテキスト メニューから選択された [NuGet パッケージの復元] が表示されています。

  4. デバッグ ボタン (または [実行]、[デバッグ開始] ) をクリックして、Android エミュレーターを起動します。Launch Android emulator by pressing the debug button (or Run > Start Debugging).

  5. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Handle_Clicked" />
    
  6. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。Edit MainPage.xaml.cs, adding this code to the end of the class:

    int count = 0;
    void Handle_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  7. Android 上のアプリのデバッグ:Debug the app on Android:

    スクリーンショットには Android Emulator が表示されています。

  8. 右クリックして、iOS を スタートアップ プロジェクト に設定します。Right-click to set iOS to the Startup Project:

    スタートアップ プロジェクトを iOS に設定しますSet the startup project to iOS

  9. iOS 上のアプリのデバッグ:Debug the app on iOS:

    iOS アプリ

サンプル ギャラリーから完成したコードをダウンロードしたり、GitHub でそのコードを表示したりすることができます。You can download the completed code from the samples gallery or view it on GitHub.

次の手順Next Steps