.Net Maui Navigating With Parameters Complete Guide

 Last Update:2025-06-23T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    7 mins read      Difficulty-Level: beginner

Understanding the Core Concepts of .NET MAUI Navigating with Parameters

.NET MAUI Navigating with Parameters under 700 keywords

Overview

In .NET MAUI, navigation is traditionally handled through the NavigationPage class, which provides a stack-based navigation model. When navigating between pages, it’s often necessary to pass additional data that the target page might need to function correctly. Parameters can be passed during navigation and are accessible on the target page upon arrival.

Passing Parameters

To pass parameters, you typically use the overridden OnAppearing or constructor methods on the target page. Here’s how you can do it step-by-step:

  1. Constructor Method:

    • Define a constructor on the target page that accepts the parameters.
    • When navigating, instantiate the target page with the desired parameters.
    public class TargetPage : ContentPage
{
    string _name;

    public TargetPage(string name)
    {
        _name = name;
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        // Use the _name variable here
    }
}

// Navigating from the source page
await Navigation.PushAsync(new TargetPage("John Doe"));

  2. In Navigation Context:

    • Use Navigation methods that support passing query parameters.
    • Parse the parameters on the target page.
    // Navigating from the source page
await Navigation.PushAsync(new TargetPage(), new Dictionary<string, object>
{
    { "name", "John Doe" }
});

// On the target page
public class TargetPage : ContentPage
{
    protected override void OnAppearing()
    {
        base.OnAppearing();
        if (NavigationContext.Parameters.TryGetValue("name", out object name))
        {
            // Use the name variable here
        }
    }
}

Query Parameters and URL Navigation

.NET MAUI also supports URL-based navigation which can include query parameters. This method is particularly useful for integration with REST APIs and other URL-based services.

  • Navigating with URL: 
    await Shell.Current.GoToAsync($"targetPage?name=John%20Doe");
  • Retrieving Parameters:
    • Use the OnQueryPropertyChanged method or directly access the query parameters in OnAppearing.
    public class TargetPage : ContentPage, IQueryAttributable
{
    public TargetPage()
    {
        InitializeComponent();
    }

    public void ApplyQueryAttributes(IDictionary<string, object> query)
    {
        if (query.TryGetValue("name", out object name))
        {
            // Use the name variable here
        }
    }
}

Best Practices

  • Consistency: Always use a consistent method for passing parameters to ensure predictability in your application.
  • Validation: Validate parameters on the receiving page to prevent runtime errors.
  • Error Handling: Implement error handling to gracefully manage scenarios where parameters might be missing or invalid.
  • Documentation: Maintain clear documentation for all parameters to help developers understand the expected data types and values.

Conclusion

Passing parameters during navigation in .NET MAUI is an essential part of building robust and user-friendly applications. By understanding and effectively utilizing these methods, developers can enhance the functionality and usability of their .NET MAUI projects.

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement .NET MAUI Navigating with Parameters

Overview

.NET MAUI (Multi-platform App UI) allows developers to create cross-platform applications using C#. One common need in any application is navigation between different views (pages). Often, you need to pass parameters between these pages.

Prerequisites

  • Visual Studio 2022 or later.
  • .NET MAUI workload installed in Visual Studio.

Step-by-Step Guide

Step 1: Create a New .NET MAUI Project

  1. Open Visual Studio.
  2. Create a new project.
  3. Select MAUI App and click Next.
  4. Configure your project name and location, then click Create.
  5. Wait for the project to be created, and then click Run to make sure everything is set up correctly.

Step 2: Create Additional Pages

Create two XAML pages to demonstrate navigation with parameters.

  1. Right-click on the project in the Solution Explorer.
  2. Select Add -> New Item ....
  3. Choose Content Page and name it MainPage.xaml. This page should already exist; we'll use it as the initial page.
  4. Add another Content Page and name it DetailPage.xaml.

Step 3: Define MainPage

Edit MainPage.xaml and MainPage.xaml.cs to add a button that navigates to DetailPage.xaml with a parameter.

MainPage.xaml:

<?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="YourNamespace.MainPage">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">

        <Button
            Text="Go to Detail Page"
            Clicked="OnGoToDetailPageClicked"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

MainPage.xaml.cs:

using Microsoft.Maui.Controls;

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

        private void OnGoToDetailPageClicked(object sender, EventArgs e)
        {
            var detailPage = new DetailPage();
            var navigationParameter = new Dictionary<string, object>
            {
                { "ParameterKey", "Hello from MainPage!" }
            };
            detailPage.BindingContext = navigationParameter;
            Navigation.PushAsync(detailPage);
        }
    }
}

Step 4: Define DetailPage

Edit DetailPage.xaml and DetailPage.xaml.cs to accept the parameter and display it.

DetailPage.xaml:

<?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="YourNamespace.DetailPage">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">

        <Label
            x:Name="MessageLabel"
            Text="Message will appear here"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

DetailPage.xaml.cs:

using Microsoft.Maui.Controls;

namespace YourNamespace
{
    public partial class DetailPage : ContentPage
    {
        public DetailPage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            if (BindingContext is Dictionary<string, object> parameters && parameters.TryGetValue("ParameterKey", out var value))
            {
                MessageLabel.Text = value.ToString();
            }
        }
    }
}

Step 5: Run the Application

  1. Set your project as the startup project.
  2. Select your target platform (e.g., Windows, Android, iOS, etc.).
  3. Click Run to start the application.

When you run the application, you should see a button that says "Go to Detail Page". After clicking the button, the DetailPage should be displayed with the text "Hello from MainPage!".

Conclusion

Navigating between pages in .NET MAUI with parameters is straightforward. By using a dictionary to pass parameters and binding it to the page's BindingContext, you can easily pass data between views.

Top 10 Interview Questions & Answers on .NET MAUI Navigating with Parameters

1. How do I pass parameters while navigating to a new page in .NET MAUI?

Answer: In .NET MAUI, when navigating to a new page, you can pass parameters by appending them to the navigation URI. Here's an example:

// Source page
await Shell.Current.GoToAsync($"//MainPage/DetailPage?name={Uri.EscapeDataString(user.Name)}&age={user.Age}");

// Destination page
protected override async void OnNavigatedTo(NavigatedToEventArgs args)
{
    base.OnNavigatedTo(args);
    var name = args.Query["name"].FirstOrDefault();
    var age = args.Query["age"].FirstOrDefault();
}

2. Can I use complex objects as parameters in navigation?

Answer: Directly passing complex objects is not recommended because they need to be serialized and deserialized. Instead, you can use a state management approach or pass IDs and retrieve the objects in the destination page.

3. How can I navigate back with parameters in .NET MAUI?

Answer: The .NET MAUI framework currently does not support passing parameters back during a navigation (like GoToAsync or PopAsync). Instead, you can use mechanisms such as events, message buses, or dependency injection to communicate between pages.

4. What is the role of Query Parameters in navigation?

Answer: Query parameters in navigation allow you to send data from one page to another using a simple key-value pair format. They are appended to the navigation URI using a question mark (?) and separated by the ampersand symbol (&).

5. How can I handle special characters in navigation parameters?

Answer: Special characters in navigation parameters need to be URL-encoded. In C#, you can use Uri.EscapeDataString to encode the data before adding it to the URI. On the receiving side, use Uri.UnescapeDataString to decode it if necessary.

// Encoding
var encodedName = Uri.EscapeDataString("John Doe");

// Decoding
var decodedName = Uri.UnescapeDataString(encodedName);

6. Is there a limit to the size of query parameters in .NET MAUI navigation?

Answer: While there is no strict limitation imposed by .NET MAUI, URL length limits can vary depending on the client and server systems. Generally, it's best to keep the data passed through query parameters short and avoid passing large or binary data.

7. What happens if a parameter is missing in the navigation URI?

Answer: If a required parameter is missing in the navigation URI, you'll encounter a KeyNotFoundException. It's good practice to check for the existence of the parameter or provide default values.

protected override void OnNavigatedTo(NavigatedToEventArgs args)
{
    base.OnNavigatedTo(args);
    if (args.Query.TryGetValue("name", out var nameValues))
    {
        var name = nameValues.FirstOrDefault();
        // Handle the name
    }
    else
    {
        // Handle missing name
    }
}

8. Can I use dependency injection to manage data between pages in .NET MAUI?

Answer: Yes, dependency injection (DI) is a powerful way to manage data between pages in .NET MAUI. Register your services in MauiProgram.cs using the IServiceCollection and inject them into your pages.

// MauiProgram.cs
public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder.Services.AddSingleton<IUserDataService, UserDataService>();
    //...
}

// DestinationPage.xaml.cs
public partial class DestinationPage : ContentPage
{
    private readonly IUserDataService _userDataService;

    public DestinationPage(IUserDataService userDataService)
    {
        InitializeComponent();
        _userDataService = userDataService;
    }
}

9. What is the difference between using a Message Bus and Dependency Injection for passing data between pages?

Answer: Dependency Injection is more suited for scenarios where you need to access shared services or data providers that have a lifetime tied to the app or the page. It's about registering services at startup and injecting them where needed.

On the other hand, a Message Bus such as CommunityToolkit.Mvvm.Messaging or Reactive Extensions (Rx) is better for event-driven communication, where one page needs to react to an event or notification posted from another page or service.

10. How can I test navigation with parameters in unit tests for .NET MAUI?

Answer: Unit testing navigation directly can be challenging since it involves UI components. However, you can test the logic that handles navigation and parameter passing. Mock the Shell.Current.GoToAsync method or encapsulate navigation logic within a method that you can test.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.