Prism navigation breaks page binding after returning to the page

Question

I have two pages . the first page has an Image with the source bound the second page has a label with text bound.

when I navigate using prism navigation navigatedTo to the second page the label binding works but when I hit the back button to the first page the image disapears then when I navigate again to the second page the label text is empty .

Update added more info and some code

Main page has a listview of Merchants when clicked on an item it trigger a command and Merchant obj as paramter, the First page takes this object and do other operations on it one of the features is a scratch game when clicked on a button it takes you to the second page (scratchgame) also bound with command and a parameter of Merchant Obj.

First Page (Merchant Page) view :

<controls:CircleImage x:Name="logoimg"
TranslationY="-25" WidthRequest="100"
VerticalOptions="End"
BorderColor="#800080"
BorderThickness="2"
Source="{Binding Merchant.MerchantLogo}">
</controls:CircleImage>

First Page ViewModel :

 internal class MerchantPageViewModel : AppMapViewModelBase, INavigationAware
{      
        private NojoomAppManager manager;
        private readonly INavigationService _navigationService;
        private Merchant _merchant;
        public Merchant Merchant
        {
            get { return _merchant; }
            set { _merchant = value; RaisePropertyChanged(nameof(Merchant)); }
        }
        public MerchantPageViewModel(INavigationService navigationService) : base(navigationService)
        {
       // Azure Mobile SDK
            manager = NojoomAppManager.DefaultManager;

            _navigationService = navigationService;

        }

        public new DelegateCommand<object> ScratchGameNavigateCommand =>
           _scratchGameNavigateCommand ?? (_scratchGameNavigateCommand = new DelegateCommand<object>(ExecuteScratchNavigateCommand));

        private async void ExecuteScratchNavigateCommand(object obj)
        {
            var p = new NavigationParameters();
            p.Add("merchant", obj);

            await NavigationService.NavigateAsync("ScratchGame", p);
        }
public void OnNavigatedTo(INavigationParameters parameters)
        {
            Merchant = parameters.GetValue<Merchant>("merchant");

        }

}

Second page ( scratch game ) view

<Label x:Name="Credit" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center"></Label>

this label take its value from an API call

second page code :

private Merchant Merchant = new Merchant();        
private Wallet Wallet = new Wallet();
        public ScratchGame()
        {
            InitializeComponent();
            manager = NojoomAppManager.DefaultManager;

        }

private async Task Getwallet()
        {
            try
            {
                var wallets = await manager.GetWalletByIdAsync(Merchant.Id, Settings.UserId, false);
                Wallet = wallets.First();
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex.Message);
            }
        }        

public void OnNavigatedTo(INavigationParameters parameters)
        {
                Merchant = parameters.GetValue<Merchant>("merchant");
        Task.Run(async () => { await Getwallet(); }).Wait();
        Credit.text =  Wallet.SilverStars.ToString();
        }

Update 2 after further investigation when I hit the back button on the second page , the first page NavigatedTo is triggerd but without paramter which makes the image source null .

How do I handle this and make the parameter passed again or used again when the back button is hit ?

Ricardo Dias Morais Ricardo Dias Morais · Accepted Answer · 2019-10-14T17:22:17

The OnNavigatedTo method is executed when another page navigates to it. This is called after the ViewModel has been pushed on to the stack, this means that you either need to pass the parameter back to it OR check whether the property already has value, because when you navigate back, the ViewModel is already pushed into the stack, and it keeps values setted before.

The solution will depend on your preference, viability or ease of use when developing, is the page gonna be in the middle of a big stack? if so, maybe passing the parameter on every page after that one is not the smartest way.

Here is an example (remember, this might not be suitable to every situation, but for most cases it is):

public void OnNavigatedTo(INavigationParameters parameters)
{
    if(Merchant == null)
       Merchant = parameters.GetValue<Merchant>("merchant");
}

Prism navigation breaks page binding after returning to the page

2 Answers