Using Xamarin Pages and Navigation

Xamarin is an excellent tool for producing cross-platform applications in the mobile app development process. Xamarin Pages and Navigation are among the main components for providing users with an intuitive and multi-page application experience. In this technical article, you will find information about page types and page transitions in Xamarin, and you will be able to easily grasp the subject with sample code.

Types of Xamarin Pages

In Xamarin Forms, there are basic page types (Pages) suitable for different scenarios. The most commonly used of these are:

• ContentPage: The most preferred, used for simple content displays.
• NavigationPage: Manages navigation operations like transitions between pages and going back.
• TabbedPage: Offers multiple pages with sub-tabs.
• MasterDetailPage (FlyoutPage): Used for menu and detail content in more complex applications.

Creating ContentPage and NavigationPage

Below you can see a sample usage of a ContentPage and a NavigationPage that starts navigation operations:

public class MainPage : ContentPage
{
    public MainPage()
    {
        var button = new Button { Text = "Go to Detail Page" };
        button.Clicked += async (s, e) => 
        {
            await Navigation.PushAsync(new DetailPage());
        };
        Content = new StackLayout
        {
            Children = { button }
        };
    }
}

public class DetailPage : ContentPage
{
    public DetailPage()
    {
        Content = new Label { Text = "Detail Page" };
    }
}

You can start the NavigationPage at the entry point of the application:

public App()
{
    MainPage = new NavigationPage(new MainPage());
}

Navigation Between Pages

Navigation is a feature that allows the user to move to a new page or go back within the app. The Xamarin Pages and Navigation structure makes commonly used "forward-back" navigation in the mobile world natural and standard.

To go to a new page, use PushAsync(); to go back to the previous page, use the PopAsync() method. Sample code:

// Navigate to a new page
await Navigation.PushAsync(new DetailPage());

// Go back to the previous page
await Navigation.PopAsync();

Passing Parameters to a Page

Most of the time, you need to transfer data from one page to another. In this case, you can pass a parameter to the constructor:

public class DetailPage : ContentPage
{
    public DetailPage(string message)
    {
        Content = new Label { Text = message };
    }
}
// When calling with Navigation:
await Navigation.PushAsync(new DetailPage("Welcome!"));

Conclusion

The use of Xamarin Pages and Navigation is one of the building blocks of mobile application development. With proper configuration, transitions between pages become flexible and user-friendly. As demonstrated in the code samples, creating multi-page application architectures with NavigationPage is extremely easy. By effectively using Xamarin Pages and Navigation capabilities, you can elevate your application experience to the next level.