How to share View Model between pages? - xamarin

Question

I can add data to the viewmodel, but when I try to access the same viewmodel from another page, the data is lost. How can I use the same viewmodel across multiple pages?
ViewModel Code
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
using System.Windows.Input;
using Xamarin.Forms;
namespace App1
{
class DebtViewModel
{
ObservableCollection<Debt> _Debt = new ObservableCollection<Debt>();
public System.Windows.Input.ICommand AddAccountCommand => new Command(AddAccount);
public System.Windows.Input.ICommand RemoveAccountCommand => new Command(RemoveAccount);
public System.Windows.Input.ICommand UpdateAccountCommand => new Command(UpdateAccount);
public ObservableCollection<Debt> Debt { get; set; }
public string Account { get; set; }
public string SelectedAccount { get; set; }
public double AnnualPercentageRate { get; set; }
public decimal Amount { get; set; }
public decimal MonthlyPayment { get; set; }
public bool IntroductoryRate { get; set; }
public double IntroductoryPercentageRate { get; set; }
public int IntroductoryRange { get; set; }
public DebtViewModel()
{
ObservableCollection<Debt> Debts = _Debt;
}
public void AddAccount()
{
var debt = new Debt(Account, Amount, AnnualPercentageRate, MonthlyPayment, IntroductoryRate,
IntroductoryPercentageRate, IntroductoryRange);
if (Account != null)
{
_Debt.Add(debt);
}
}
public void RemoveAccount()
{
//Debt.Remove(SelectedAccount);
}
public void UpdateAccount()
{
//int newIndex = Debt.IndexOf(SelectedAccount);
//Debt.Remove(SelectedAccount);
//Debt.Add(Account);
//int oldIndex = Debt.IndexOf(Account);
//Debt.Move(oldIndex, newIndex);
}
}
}
List Page
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:App1"
mc:Ignorable="d"
x:Class="App1.ListViewPage">
<!-- Required to map viewmodel -->
<ContentPage.BindingContext>
<local:DebtViewModel />
</ContentPage.BindingContext>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Add"></ToolbarItem>
</ContentPage.ToolbarItems>
<!-- Bind variable in view model to listview itemsource -->
<ContentPage.Content>
<StackLayout>
<!--<Entry Placeholder="Account"
Text="{Binding Account}"/>
<Button Text="Add" Command="{Binding AddAccountCommand}"></Button>
<Button Text="Remove" Command="{Binding RemoveAccountCommand}"></Button>
<Button Text="Update" Command="{Binding UpdateAccountCommand}"></Button>-->
<!--textcell, custom cells, or image cell-->
<ListView ItemsSource="{Binding Debt}" SelectedItem="{Binding SelectedAccount}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding AccountName}"
FontSize="Medium"
VerticalTextAlignment="Start"
Grid.Column="0"></Label>
<Label Text="Balance"
VerticalTextAlignment="Start"
Grid.Column="1"></Label>
<Label Text="{Binding InitialAmount}"
VerticalTextAlignment="End"
Grid.Column="1"></Label>
<Label Text="APR"
VerticalTextAlignment="Start"
Grid.Column="2"></Label>
<Label Text="{Binding AnnualPercentageRate}"
VerticalTextAlignment="End"
Grid.Column="2"></Label>
<Label Text="Monthly Payment"
VerticalTextAlignment="Start"
Grid.Column="3"></Label>
<Label Text="{Binding MonthlyPayment}"
VerticalTextAlignment="End"
Grid.Column="3"></Label>
<Image Source="edit.png" Grid.Column="4"></Image>
<Image Source="trash.jpg" Grid.Column="5"></Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Add Page
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:App1"
mc:Ignorable="d"
x:Class="App1.ListViewPage">
<!-- Required to map viewmodel -->
<ContentPage.BindingContext>
<local:DebtViewModel />
</ContentPage.BindingContext>
<ContentPage.ToolbarItems>
<ToolbarItem Text="Add"></ToolbarItem>
</ContentPage.ToolbarItems>
<!-- Bind variable in view model to listview itemsource -->
<ContentPage.Content>
<StackLayout>
<!--<Entry Placeholder="Account"
Text="{Binding Account}"/>
<Button Text="Add" Command="{Binding AddAccountCommand}"></Button>
<Button Text="Remove" Command="{Binding RemoveAccountCommand}"></Button>
<Button Text="Update" Command="{Binding UpdateAccountCommand}"></Button>-->
<!--textcell, custom cells, or image cell-->
<ListView ItemsSource="{Binding Debt}" SelectedItem="{Binding SelectedAccount}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding AccountName}"
FontSize="Medium"
VerticalTextAlignment="Start"
Grid.Column="0"></Label>
<Label Text="Balance"
VerticalTextAlignment="Start"
Grid.Column="1"></Label>
<Label Text="{Binding InitialAmount}"
VerticalTextAlignment="End"
Grid.Column="1"></Label>
<Label Text="APR"
VerticalTextAlignment="Start"
Grid.Column="2"></Label>
<Label Text="{Binding AnnualPercentageRate}"
VerticalTextAlignment="End"
Grid.Column="2"></Label>
<Label Text="Monthly Payment"
VerticalTextAlignment="Start"
Grid.Column="3"></Label>
<Label Text="{Binding MonthlyPayment}"
VerticalTextAlignment="End"
Grid.Column="3"></Label>
<Image Source="edit.png" Grid.Column="4"></Image>
<Image Source="trash.jpg" Grid.Column="5"></Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Answer 1

As Jason said: If you specify the VM in XAML it will create a new instance for each page. They are totally different.
How can I use the same viewmodel across multiple pages?
There are many ways to do it.
For example, you can define/create a static ViewModel in App.cs:
public partial class App : Application
{
public static DebtViewModel sharedViewModel { get; set; }
public App()
{
InitializeComponent();
MainPage = new MainPage();
createViewModel();
}
public void createViewModel() {
sharedViewModel = new DebtViewModel();
}
public class DebtViewModel {
}
}
Then in other page, you can set this ViewModel as page's bindingContext:
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
this.BindingContext = App.sharedViewModel;
}
}
Pass the instance to the new page on the constructor in also a solution.