Споделяне чрез


Build your first Xamarin.Forms App

Step-by-step instructions for Windows

Follow these steps along with the video above:

  1. Choose File > New > Project... or press the Create new project... button.

  2. Search for "Xamarin" or choose Mobile from the Project type menu. Select the Mobile App (Xamarin.Forms) project type.

  3. Choose a project name – the example uses "AwesomeApp".

  4. Click on the Blank project type and ensure Android and iOS are selected:

    Android and iOS Blank App

  5. Wait until the NuGet packages are restored (a "Restore completed" message will appear in the status bar).

  6. New Visual Studio 2022 installations won't have Android SDKs installed, you may be prompted to install the most recent Android SDK:

    Install Android SDK

  7. New Visual Studio 2022 installations won't have an Android emulator configured. Click the dropdown arrow on the Debug button and choose Create Android Emulator to launch the emulator creation screen:

    Create Android Emulator dropdown

  8. In the emulator creation screen, use the default settings and click the Create button:

    Android emulator creation screen

  9. Creating an emulator will return you to the Device Manager window. Click the Start button to launch the new emulator:

    Android emulator in the Device Manager

  10. Visual Studio 2022 should now show the name of the new emulator on the Debug button:

    Android emulator name on the Debug button

  11. Click the Debug button to build and deploy the application to the Android emulator:

    Android emulator displaying the application

Customize the application

The application can be customized to add interactive functionality. Perform the following steps to add user interaction to the application:

  1. Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  2. 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. Debug the app on Android:

    Android app with Button

Build an iOS app in Visual Studio 2022

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.

Step-by-step instructions for Windows

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. Search for "Xamarin" or choose Mobile from the Project type menu. Select the Mobile App (Xamarin.Forms) project type:

    Filter for Xamarin projects

  3. Choose a project name – the example uses "AwesomeApp":

    Choose a project name

  4. Click on the Blank project type and ensure Android and iOS are selected:

    Android and iOS, with .NET Standard

  5. Wait until the NuGet packages are restored (a "Restore completed" message will appear in the status bar).

  6. New Visual Studio 2019 installations won't have an Android emulator configured. Click the dropdown arrow on the Debug button and choose Create Android Emulator to launch the emulator creation screen:

    Create Android Emulator dropdown

  7. In the emulator creation screen, use the default settings and click the Create button:

    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 emulator in the Device Manager

  9. Visual Studio 2019 should now show the name of the new emulator on the Debug button:

    Android emulator name on the Debug button

  10. Click the Debug button to build and deploy the application to the Android emulator:

    Android emulator displaying the application

Customize the application

The application can be customized to add interactive functionality. Perform the following steps to add user interaction to the application:

  1. Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  2. 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. Debug the app on Android:

    Android app

Note

The sample application includes the additional interactive functionality that is not covered in the video.

Build an iOS app in Visual Studio 2019

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.

This video covers the process of building and testing an iOS app using Visual Studio 2019 on Windows:

Step-by-step instructions for Mac

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. Ensure Android and iOS are selected:

    Android and iOS, with .NET Standard

Note

Only A-Z, a-z, ‘_’, '.', and numbers are supported characters for your App Name and Organization Identifier.

  1. Restore NuGet packages, by right-clicking on the solution:

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

  2. Launch Android emulator by pressing the debug button (or Run > Start Debugging).

  3. Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Handle_Clicked" />
    
  4. 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.";
    }
    
  5. Debug the app on Android:

    Screenshot shows the Android Emulator.

  6. Right-click to set iOS to the Startup Project:

    Set the startup project to iOS

  7. Debug the app on iOS by selecting an iOS simulator from the dropdown.

Step-by-step instructions for Mac

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. Ensure Android and iOS are selected, with .NET Standard code sharing:

    Android and iOS, with .NET Standard

Note

Only A-Z, a-z, ‘_’, '.', and numbers are supported characters for your App Name and Organization Identifier.

  1. Restore NuGet packages, by right-clicking on the solution:

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

  2. Launch Android emulator by pressing the debug button (or Run > Start Debugging).

  3. Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Handle_Clicked" />
    
  4. 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.";
    }
    
  5. Debug the app on Android:

    Screenshot shows the Android Emulator.

  6. Right-click to set iOS to the Startup Project:

    Set the startup project to iOS

  7. Debug the app on iOS:

    iOS app

You can view the completed code on GitHub.

Next Steps