Building on the previous blog posts, here I’d like to illustrate how you can pass complex data from one page’s view model to another’s.
Let’s assume we’ve tapped on the Buddies Icon on the tab bar and were taken to the BuddyList:
If we tap on one of our buddies, in this case, Rodrigo, we should be taken to the details page for that buddy. We could pass along the buddy’s id, or we can pass the buddy object itself.
To pass the entire Buddy object, we will create a dictionary that will contain an identifying text as the key, and the SelectedBuddy as the value,
var navigationParameter = new Dictionary<string, object>
{
{"SelectedBuddy", SelectedBuddy}
};
We can now pass that along to the details page using Shell navigation.
await Shell.Current.GoToAsync($"buddydetail", navigationParameter);“buddydetail” is the name you gave the BuddyDetails page in the constructor in AppShell.xaml.cs
public AppShell()
{
InitializeComponent();
Routing.RegisterRoute("buddydetail", typeof(BuddyDetail));
This routing matches the key “buddydetail” to the BuddyDetail page. Returning to the Shell navigation above, we see navigationParameter is the second param for the GoToAsync call. That is, we pass along the dictionary that contains our object. (We can pass as many objects as we like, each as an entry in the dictionary).
Receiving the data
In the view model for the details page, BuddyDetailViewModel, we use the QueryProperty attribute to indicate the name of the property to assign the passed-in object to and the key in the dictionary associated with that object.
Looking a few paragraphs up we can see that the dictionary has an entry with the key “SelectedBuddy” which has a value of the SelectedBuddy object. Here we are going to retrieve that into a local property, also named SelectedBuddy
[ObservableObject]
[QueryProperty(nameof(SelectedBuddy), "SelectedBuddy")]
public partial class BuddyDetailViewModel
Let me review that briefly as it can get confusing. There is the name of the local property: SelectedBuddy. There is the first parameter in the QueryProperty attribute: nameof(SelectedBuddy). These are 1:1 — the nameof is pointing to a property in this (receiving) class. Finally, there is the second param in the attribute, the string “SelectedBuddy” which is the key into the dictionary whose value will be assigned to the SelectedBuddy property. Right? Piece of pie.
We want to bind to a number of the properties of the buddy we just passed in. First, we’ll create those properties:
[ObservableProperty] private string name;
[ObservableProperty] private string emailAddress;
[ObservableProperty] private string code;
[ObservableProperty] private string? phoneNumber;
[ObservableProperty] private InvitationStatus status;
[ObservableProperty] private DateTime buddySince;
[ObservableProperty] private string buddySinceString;
[ObservableProperty] private string mailingAddressLine1;
[ObservableProperty] private string mailingAddressLine2;
[ObservableProperty] private int id;
Now all we need to do is set those properties using the object that was passed in and assigned to our SelectedBuddy property
private Buddy selectedBuddy;
public Buddy SelectedBuddy
{
get => selectedBuddy;
set
{
SetProperty(ref selectedBuddy, value);
Name = value.Name;
EmailAddress = value.EmailAddress;
PhoneNumber = value.PhoneNumber;
Status = value.Status;
BuddySince = value.BuddySince;
BuddySinceString = BuddySince.ToString("D");
MailingAddressLine1 = value.MailingAddressLine1;
MailingAddressLine2 = value.MailingAddressLine2;
Id = value.Id;
}
}
We can now display the details of the selected buddy using data binding. in the XAML.
Notice that there are two buttons: one to see the occasions you’ve asked to be reminded about, with regard to this buddy (e.g., the buddy’s birthday). The second button will display the buddy’s preferences. Each of these is made easier by using a service, in this case BuddyService. But how do we access the methods in BuddyService? This will be the topic of the next blog entry: Dependency Injection in MAUI.
