On NavigationView page change, data binding is lost

Question

Changing page through the NavigationView control causes some data bindings to fail/be lost.

data model:

public class Flashpoint
{
    private string name;
    private string description;
    private string image;

    public string Name
    {
        get { return name; }
        set { name = value; }
    }

    public string Description
    {
        get { return description; }
        set { description = value; }
    }

    public string Image
    {
        get { return image; }
        set { image = value; }
    }
}

page xaml:

<Page
    x:Class="Braytech_3.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:Braytech_3.Views"
    xmlns:data="using:Braytech_3.Models"
    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">

    <Grid x:Name="ContentArea">
        <StackPanel Height="400" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{x:Bind CurrentFlashpoint.Image, Mode=OneWay}" Stretch="UniformToFill"/>
            <TextBlock Text="{x:Bind CurrentFlashpoint.Name, Mode=OneWay}" />
        </StackPanel>

page cs:

namespace Braytech_3.Views
{
    public sealed partial class MainPage : Page, INotifyPropertyChanged
    {

        Flashpoint CurrentFlashpoint { get; set; }

        public MainPage()
        {
            InitializeComponent();
            Render();
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
        {
            if (Equals(storage, value))
            {
                return;
            }

            storage = value;
            OnPropertyChanged(propertyName);
        }

        private void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        private async void Render()
        {

            StorageFolder tempFolder = ApplicationData.Current.TemporaryFolder;
            StorageFile APIData = await tempFolder.GetFileAsync("APIData.json");
            string json = await FileIO.ReadTextAsync(APIData);

            Universal request = JsonConvert.DeserializeObject<Universal>(json);

            foreach (var challenge in request.response.data.challenges)
            {
                if (challenge.type == "flashpoint")
                {
                    CurrentFlashpoint = new Models.Flashpoint
                    {
                        Name = challenge.name,
                        Description = challenge.description,
                        Image = $"/Assets/Images/{ challenge.slug }.jpg"
                    };
                }

            }

        }
    }
}

Omitted from the above code excerpts is an ObservableCollection that is bound to the pivot control below the image control. It works as expected. Vendors page also uses an ObservableCollection. As I am only trying to bind single items (textblock, image), I wasn't sure how I could use an ObservableCollection and if I even should attempt to as to me it's the equivalent of an array of items where as I'm trying to bind a single item.

Using the live tree inspector I was able to inspect the image control, before and after the data binding is lost, but it didn't lead me to an answer as to why.

Why does it lose its binding and how can I fix it?

Answer 1

The better way is that you could set NavigationCacheMode="Required" for MainPage to avoid repeat loading.

The page is cached and the cached instance is reused for every visit regardless of the cache size for the frame.

This is official document that you could refer.