Xamarin Forms Pages Contentpage Navigationpage Complete Guide

Step 1: Set Up Your Project

1. Install Visual Studio (if you haven't already):

   • Go to the official Visual Studio website and download the Community edition.
   • During installation, make sure to select the "Mobile development with .NET" workload.

2. Create a New Xamarin.Forms Project:

   • Open Visual Studio and select Create a new project.
   • In the search bar, type Xamarin and select Mobile App (Xamarin.Forms).
   • Click Next.

3. Configure Your Project:

   • Project Name: Enter XamarinFormsNavigationExample.
   • Solution Name: Keep it the same or change it if needed.
   • Location: Choose a directory to save your project.
   • Click Create.

4. Choose the App Template:

   • Select Blank for the app template.
   • Target platforms: Ensure that both Android and iOS are selected.
   • Click Create.

Step 2: Build the Basic Structure

1. Open the MainPage.xaml:

   • This is your main page where you will start building your UI.

2. Modify MainPage.xaml:

   • Replace the content of MainPage.xaml with the following code:

<?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="XamarinFormsNavigationExample.MainPage"
             Title="Main Page">
    <StackLayout Padding="10">
        <Label Text="Welcome to Xamarin.Forms!"
               HorizontalTextAlignment="Center"
               VerticalOptions="Start"
               Margin="10" />
        <Button Text="Go to Second Page"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center"
                Margin="10" />
    </StackLayout>
</ContentPage>

3. Modify MainPage.xaml.cs:
   • Open MainPage.xaml.cs and add the following code to handle the button click event:

using Xamarin.Forms;

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

        private async void OnButtonClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new SecondPage());
        }
    }
}

Step 3: Create a New Page

1. Add a New ContentPage:

   • In the Solution Explorer, right-click on the XamarinFormsNavigationExample (Portable) project.
   • Select Add > New Item.
   • In the dialog, select Content Page.
   • Name the file SecondPage.xaml and click Add.

2. Modify SecondPage.xaml:

   • Replace the content of SecondPage.xaml with the following code:

<?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="XamarinFormsNavigationExample.SecondPage"
             Title="Second Page">
    <StackLayout Padding="10">
        <Label Text="You have reached the Second Page!"
               HorizontalTextAlignment="Center"
               VerticalOptions="Start"
               Margin="10" />
        <Button Text="Go Back"
                Clicked="OnBackButtonClicked"
                HorizontalOptions="Center"
                Margin="10" />
    </StackLayout>
</ContentPage>

3. Modify SecondPage.xaml.cs:
   • Open SecondPage.xaml.cs and add the following code to handle the back button click event:

using Xamarin.Forms;

namespace XamarinFormsNavigationExample
{
    public partial class SecondPage : ContentPage
    {
        public SecondPage()
        {
            InitializeComponent();
        }

        private async void OnBackButtonClicked(object sender, EventArgs e)
        {
            await Navigation.PopAsync();
        }
    }
}

Step 4: Update App.xaml.cs

1. Open App.xaml.cs:

   • This is where you set the root page of your application.

2. Modify App.xaml.cs:

   • Replace the content of App.xaml.cs with the following code to initialize the NavigationPage and set MainPage as the root:

using Xamarin.Forms;

namespace XamarinFormsNavigationExample
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage());
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}

Step 5: Run Your Application

1. Set Your Target Platform:

   • In the toolbar, select either Android or iOS depending on your preference.
   • Ensure you have the correct emulator set up or a physical device connected.

2. Build and Run:

   • Click the Start button (or press F5) to build and run your application.

Expected Output

• When you run the application, you will see a screen with the label "Welcome to Xamarin.Forms!" and a button labeled "Go to Second Page".
• Clicking on the button will navigate to a new screen with the label "You have reached the Second Page!" and a button labeled "Go Back".
• Clicking the "Go Back" button will return you to the main page.