Creating First Xamarin Forms Project Complete Guide

Creating Your First Xamarin.Forms Project in Visual Studio (Windows)

Step 1: Install the Required Tools

1. Install Visual Studio: Download and install Visual Studio from the official website.
2. Install Xamarin: During installation, select the Mobile development with .NET workload. This includes Xamarin.Forms support.
3. Reopen Visual Studio: Once installation is complete, launch Visual Studio and ensure that it’s set up with Xamarin.

Step 2: Create a New Xamarin.Forms Project

1. Open Visual Studio: Launch Visual Studio.

2. Create a New Project:

   • Go to File > New > Project.
   • In the "Create a new project" dialog, select Mobile App (Xamarin.Forms) and click Next.

3. Configure Your Project:

   • Enter a Project name, e.g., MyFirstXamarinApp.
   • Set an appropriate Location for the project files.
   • Click Next.

4. Select Framework and App Features:

   • Choose between .NETStandard and .NET MAUI. For simplicity, go with .NETStandard.
   • Select Blank App for the template.
   • Choose the UI Toolkit as XAML (if you’re familiar with XAML) or C# (for code-behind UI definitions).
   • Optionally, check Use .NET 6 if you want to work with the latest .NET version.
   • Click Create.

5. Visual Studio Creates Projects:

   • It will create four projects in the solution:
     • MyFirstXamarinApp: A common project (PCL or .NET Standard library) where shared code lives.
     • MyFirstXamarinApp.Android: The Android-specific implementation.
     • MyFirstXamarinApp.iOS: The iOS-specific implementation.
     • MyFirstXamarinApp.UWP (optional): The Universal Windows Platform implementation.

Step 3: Explore the Project Structure

• Shared Code (MyFirstXamarinApp):

  • App.xaml.cs: The entry point of the app; it sets up navigation and styles.
  • MainPage.xaml and MainPage.xaml.cs: The default page in your app, with an accompanying code-behind.

• Platform-Specific Projects:

  • Each platform-specific project (Android, iOS, UWP) has its own folder containing platform-specific code and resources.

Step 4: Modify the MainPage

Open MainPage.xaml in the shared project. By default, it looks something like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyFirstXamarinApp.MainPage">

    <StackLayout>
        <!-- Place new control here -->
        <Label Text="Welcome to Xamarin.Forms!"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />

    </StackLayout>

</ContentPage>

Now let's add a button to change the label text when clicked:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyFirstXamarinApp.MainPage">

    <StackLayout>
        <Label x:Name="welcomeLabel"
               Text="Welcome to Xamarin.Forms!"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        
        <Button Text="Click Me"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Clicked="OnButtonClicked"/>
    </StackLayout>

</ContentPage>

Next, open MainPage.xaml.cs and add the method to handle button clicks:

using Microsoft.Maui;
using Microsoft.Maui.Controls;

namespace MyFirstXamarinApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            welcomeLabel.Text = "Hello, Xamarin World!";
        }
    }
}

Step 5: Run Your Application

• Select the Target Platform: In the toolbar, select the emulator (e.g., Android Emulator) or physical device.
• Build & Run: Click the Run button (green triangle) or press F5 to build and deploy your app.

You should see the app running on your selected platform, displaying the text “Welcome to Xamarin.Forms!” which changes to “Hello, Xamarin World!” when you tap the button.

Creating Your First Xamarin.Forms Project in Visual Studio for Mac

Step 1: Install the Required Tools

1. Install Visual Studio for Mac: Download and install Visual Studio for Mac from the official website.
2. Install Xamarin: Ensure Xamarin is installed by going to Tools > Extensions... and checking for Xamarin.Forms.

Step 2: Create a New Xamarin.Forms Project

1. Open Visual Studio for Mac: Launch Visual Studio for Mac.

2. Create a New Project:

   • Go to File > New Solution....
   • In the "Choose a template" section, select Multiplatform and then App under Xamarin.Forms.
   • Click Next.

3. Configure Your Project:

   • Choose the template type, select Blank App.
   • Name the project, e.g., MyFirstXamarinApp.
   • Select a location for the project.
   • Click Next.

4. Select Platform Targets:

   • Choose the platforms you want to target (e.g., Android, iOS).
   • Uncheck other options if you don’t need them (like UWP on macOS).
   • Click Create.

Step 3: Explore the Project Structure

The structure is similar to what you’d find in Visual Studio for Windows:

• MyFirstXamarinApp: Shared code project.
• MyFirstXamarinApp.Droid: Android-specific implementation.
• MyFirstXamarinApp.iOS: iOS-specific implementation.

Step 4: Modify the MainPage

Open MainPage.xaml in the shared project:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyFirstXamarinApp.MainPage">

    <StackLayout>
        <!-- Content goes here -->
        <Label Text="Welcome to Xamarin.Forms!"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />

    </StackLayout>

</ContentPage>

Add a button:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyFirstXamarinApp.MainPage">

    <StackLayout>
        <Label x:Name="welcomeLabel"
               Text="Welcome to Xamarin.Forms!"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Click Me"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Clicked="OnButtonClicked"/>

    </StackLayout>

</ContentPage>

Now let’s handle the Button.Clicked event by implementing the OnButtonClicked method in MainPage.xaml.cs:

using Microsoft.Maui;
using Microsoft.Maui.Controls;
using System;

namespace MyFirstXamarinApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            welcomeLabel.Text = "Hello, Xamarin World!";
        }
    }
}

Step 5: Run Your Application

• Select the Target Platform: Use the dropdown at the top-left corner to choose an emulator or physical device.
• Build & Run: Click the Play button (the right-pointing arrow) to build and deploy your app.

Just like in Visual Studio for Windows, your app will launch with the message “Welcome to Xamarin.Forms!” and change to “Hello, Xamarin World!” upon clicking the button.

Summary

By following the steps above, you've successfully created your first Xamarin.Forms application. You’ve learned how to modify shared UI code that applies across multiple platforms and how to run and test the application on different devices. This foundational knowledge will help you build more advanced applications in the future using Xamarin.Forms.

Feel free to explore more features and customize your application further! Happy coding!

Troubleshooting Tips

• Emulators: If you encounter issues with emulators not starting, ensure they are properly configured in Visual Studio tools like AVD Manager for Android or Xcode for iOS.
• NuGet Packages: Sometimes, package references might not get resolved correctly. Clean and rebuild your solution to resolve such issues.
• Dependencies: Make sure all platform-specific SDKs (such as Android SDK and iOS SDK) are up-to-date.