In MAUI, how do I pass data from a login page page to a tabbed page with shell navigation?-CodePudding

I am fairly new to MAUI and I am trying to pass data collected in the login page to a tabbed page. I am trying to pass the data using the shell navigation method but it does not appear to be available on any of my tab pages.

The navigation code:

await Shell.Current.GoToAsync($"//PortalTabs", true, new Dictionary<string, object>
{
    //Data that must be passed to App page
    {"User", user}
});

Using Maui Community toolkit, on the first tab(AppViewModel):

//Data brought forward from previous page
[QueryProperty(nameof(User), "User")]

public partial class AppViewModel : ViewModelBase
{
    //Observable Properties
    [ObservableProperty]
    UserModel user;
    
    public AppViewModel() 
    {
    }
}

The TabBar in AppShell.xaml:

<!--Portal Tabs-->
 <TabBar Route="PortalTabs">
     <Tab Title="Apps">
         <ShellContent ContentTemplate="{DataTemplate views:AppPage}"/>
     </Tab>
     <Tab Title="Profile">
         <ShellContent ContentTemplate="{DataTemplate views:ProfilePage}"/>
     </Tab>
     <Tab Title="Settings">
         <ShellContent ContentTemplate="{DataTemplate views:SettingsPage}"/>
     </Tab>
 </TabBar>

I am trying to use the data on the AppPage via:

<Label Text = "{Binding User.Username}"

Am I missing something obvious?

CodePudding user response：

I found the issue. The routing must be to the page that requires the data, rather than routing to the TabBar. In response to Isidoros's answer: my pages did inherit from ObservableObject through ViewModelBase, and my binding context was set on the code behind of the page already.

The working navigation:

await Shell.Current.GoToAsync($"//AppPage", true, new Dictionary<string, object>
{
    //Data that must be passed to App page
    {"User", user}
});

The route added to AppShell.xaml:

<!--Portal Tabs-->
<TabBar Route="PortalTabs">
    <Tab Title="Apps" Route="AppPage">
        <ShellContent ContentTemplate="{DataTemplate views:AppPage}"/>
    </Tab>
    <Tab Title="Profile">
        <ShellContent ContentTemplate="{DataTemplate views:ProfilePage}"/>
    </Tab>
    <Tab Title="Settings">
        <ShellContent ContentTemplate="{DataTemplate views:SettingsPage}"/>
    </Tab>
</TabBar>

CodePudding user response：

The command Shell.Current.GoToAsync passes the parameters to the page not to the underlying viewmodel. Move your code to the page code behind.

//Data brought forward from previous page
[QueryProperty(nameof(User), "User")]

public partial class AppPage : ContentPage
{
    User user;
    public User User
    {
        set
        {
            user = value;
            BindingContext = new AppViewModel(user);
        }
    }

    public AppPage()
    {
        InitializeComponent();
        //no binding here. Set the binding when you receive
        //the data from the property.
    }
    ....
}

Your view model should look like the below (note the parameter userparam and the ObservableObject inherited class is required for MVVM to work):

public partial class AppViewModel : ObservableObject
{
    //Observable Properties
    [ObservableProperty]
    User user;
    
    public AppViewModel(User userparam) 
    {
        user = userparam;
    }
}