Introduction
Purpose
Setup your development environment and build your first mobile application for Android and iOS.
Prerequisites
None.
Time to Complete
10 minutes + download/installation time
Scenario
A mobile app for Android and iOS that displays a "Hello World" message.
Download and install
Download and install Visual Studio 2019.
Download Visual Studio 2019
During installation, select the Mobile development with .NET workload.
Already have Visual Studio?
If you already have Visual Studio 2019, you can add the Mobile development with .NET workload:
- Press the Windows key, type Visual Studio Installer, and press Enter
- If prompted, allow the installer to update itself
- Find your Visual Studio 2019 installation and select More -> Modify
- Select Mobile development with .NET and click Modify
Download and install Visual Studio 2019 for Mac.
Download Visual Studio 2019 for Mac
During installation, ensure the Android + Xamarin.Forms and iOS + Xamarin.Forms platforms are selected.
Video walkthrough
Create your app
Create a new Xamarin app:
- Open Visual Studio 2019
- Select Create a new project
- Select Mobile from the Project type drop-down
- Select the Mobile App (Xamarin.Forms) template and click Next
- Enter AwesomeApp as the project name and click Next
- Select the Blank template, ensure Android and iOS are selected, and click OK
Restore NuGet packages
NuGet is a package manager that will bring in the dependencies of your new app.
The package restore process will start automatically. Wait until the Restore completed message appears in the status bar at the bottom of the screen.
Create a new Xamarin app:
- Open Visual Studio 2019 for Mac
- Select New Project...
- Select Multiplatform -> App -> Blank Forms App and click Next
- Enter AwesomeApp as the app name, and click Next
- Click Create
Restore NuGet packages
NuGet is a package manager that will bring in the dependencies of your new app.
After your application loads, right click on the AwesomeApp solution and select Restore NuGet Packages
Run your app
From the menu, select Debug -> Start Debugging.
Your application will build then deploy to the Android emulator and run.
Select your startup project
Right-click on the AwesomeApp.iOS project and select Set As Startup Project.
Start your app
From the menu, select Debug -> Start Debugging.
Your application will build then deploy to the iOS emulator and run.
Optional: Run on Android
If you setup an Android device or emulator, you can also run your app on Android.
- Right-click on the AwesomeApp.Android project and select Set As Startup Project.
- From the menu, select Debug -> Start Debugging.
Your application will build then deploy to the Android device/emulator and run.
Congratulations, you've built and run your first .NET mobile app!
Edit your code
Now you'll add a button to the user interface, along with a click event that will increase and display a count.
Stop debugging
From the menu, select Debug -> Stop Debugging.
From the menu, select Run -> Stop Debugging.
Add a button
Open MainPage.xaml and add the following code under the <Label ... />:
MainPage.xaml
<Button Text="Click Me" Clicked="Handle_Clicked" />
Add an event handler
Open MainPage.xaml.cs and add the following code inside of the class:
MainPage.xaml.cs
int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
count++;
((Button)sender).Text = $"You clicked {count} times.";
}
Run the application
From the menu, select Debug -> Start Debugging.
From the menu, select Run -> Start Debugging.
When you app launches, click the button. The number of clicks will be displayed in the main label.
Video walkthrough
Video walkthrough
