We Keep Coding

Xamarin Forms - How to pass data from a modal page back to parent page using Viewmodels

I have two pages: MainPage and FilterPage(modal page).
with their respective Viewmodels: MainViewModel and FilterViewModel.
In MainPage I have a listview that's populated with data from an API. The data is passed to the FilterPage where it is filtered by some specific criteria. In the end a new list is created which is assigned to the binded variable of the listview. What I noticed is that after the modal page closes the listview's items arent updated. What is the proper way to do this?
Model:
public class Multilist
{
public string Title { get; set; }
public string Date { get; set; }
public string Status { get; set; }
public string Customer { get; set; }
}
MainViewModel:
public class MainViewModel : INotifyPropertyChanged
{
private IList<Multilist> mainList = new List<Multilist>();
public IList<Multilist> MainList
{
get => mainList;
set
{
if (value == mainList)
return;
mainList = value;
OnPropertyChanged();
}
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
var changed = PropertyChanged;
if (changed == null)
return;
changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
public MainViewModel(INavigation navigation)
{
this._navigation = navigation;
Task.Run(async () => await GetData());
GotoFilterPageCommand = new AsyncCommand(GotoFilterPage);
}
private async Task GetData()
{
//Gets data from API
MainList = data;
}
private async Task GotoFilterPage()
{
await this._navigation.PushModalAsync(new FilterPage(MainList.ToList()), true);
}
}
FilterViewModel:
public class FilterViewModel : INotifyPropertyChange
{
public List<Multilist> OldList { get; set; }
private IList<Multilist> mainList = new List<Multilist>();
public IList<Multilist> MainList
{
get => mainList;
set
{
if (value == mainList)
return;
mainList = value;
OnPropertyChanged();
}
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
var changed = PropertyChanged;
if (changed == null)
return;
changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
public FilterViewModel(List<Multilist> oldlist)
{
Oldlist = oldlist;
SomeCommand = new AsyncCommand(SomeTask);
}
private async Task SomeTask()
{
// Some code here
CreateNewList(OldList);
}
private async Task CreateNewList(List<Multilist> oldlist)
{
//Some code here --> newMainList
pageA.MainList = newMainList;
await App.Current.MainPage.Navigation.PopModalAsync();
}
}
The listview in MainPage:
<ListView x:Name="TestListView"
ItemsSource="{Binding MainList}"
Grid.Row="4" Grid.ColumnSpan="3"
HasUnevenRows="True"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="0,0,0,1">
<Grid VerticalOptions="Fill" Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Text="{Binding Title}" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" />
<Label Text="{Binding Date}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="1" />
<Label Text="{Binding Customer}" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="2" />
<Label Text="{Binding Status}" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="3" />
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

You could use Singleton to make a global instance for both MainViewModel and FilterViewModel.
I make a simple example for your reference.
Model:
public class Person
{
public string Name { get; set; }
public string FirstName { get; set; }
public int Age { get; set; }
}
ViewModel:
public class PersonViewModel
{
#region Singleton Pattern
private PersonViewModel()
{
Persons = new ObservableCollection<Person>()
{
new Person(){ Name="A"},
new Person(){ Name="A2"},
new Person(){ Name="A3"},
new Person(){ Name="A4"},
};
}
public static PersonViewModel Instance { get; } = new PersonViewModel();
#endregion
private ObservableCollection<Person> _person;
public ObservableCollection<Person> Persons
{
get { return _person; }
set { _person = value; }
}
}
Page24: //MainPage
<StackLayout>
<ListView ItemsSource="{Binding MainList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Navigate To FilterPage" Clicked="Button_Clicked">
</Button>
</StackLayout>
Page24 Code behind:
public Page24()
{
InitializeComponent();
this.BindingContext = new Page24ViewModel();
}
private void Button_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new FilterPage());
}
Page24ViewModel://MainViewModel
public class Page24ViewModel : INotifyPropertyChanged
{
private PersonViewModel _personViewModel;
public Page24ViewModel()
{
_personViewModel = PersonViewModel.Instance;
}
private ObservableCollection<Person> mainList;
public ObservableCollection<Person> MainList
{
get { return _personViewModel.Persons; }
set
{
mainList = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
FilterPage:
<ContentPage.Content>
<StackLayout>
<StackLayout>
<Label Text="Name:"></Label>
<Entry x:Name="entry"></Entry>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Button x:Name="btn_Add" Text="Add" Clicked="btn_Add_Clicked"></Button>
<!--<Button x:Name="btn_Delete" Text="Delete" Clicked="btn_Delete_Clicked"></Button>-->
</StackLayout>
<ListView ItemsSource="{Binding MainList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding Name}"></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
FilterPage code behind:
private PersonViewModel _personViewModel;
public FilterPage()//modal page
{
InitializeComponent();
this.BindingContext = new FilterViewModel();
}
private void btn_Add_Clicked(object sender, EventArgs e)
{
_personViewModel = PersonViewModel.Instance;
_personViewModel.Persons.Add(new Person() { Name = entry.Text });
}
FilterViewModel:
public class FilterViewModel : INotifyPropertyChanged
{
private PersonViewModel _personViewModel;
public FilterViewModel()
{
_personViewModel = PersonViewModel.Instance;
}
private ObservableCollection<Person> newMainList;
public ObservableCollection<Person> MainList
{
get { return _personViewModel.Persons; }
set
{
newMainList = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
}

Stopwatch MVVM Xamarin Forms

It is my first time working in xamarin forms, I am now trying to make an app for myself. In my app I made a timer in my view model, but the seconds only go to 59 and reset automatically to 0. Does anyone have an idea how I can solve this and How I can make a stop button and a reset button my view model?
public class TimerPageViewModel : ViewModelBase, INotifyPropertyChanged
{
Stopwatch stopwatch = new Stopwatch();
private string _stopWatchHours;
private string _stopWatchMinutes;
private string _stopWatchSeconds;
public TimerPageViewModel(INavigationService navigationService)
: base(navigationService)
{
Title = "Timer";
Start = new Command(OnStartTimerExecute);
Stop = new Command(OnStop);
Reset = new Command(onReset);
StopWatchHours = stopwatch.Elapsed.Hours.ToString();
StopWatchMinutes = stopwatch.Elapsed.Minutes.ToString();
StopWatchSeconds = stopwatch.Elapsed.Seconds.ToString();
}
public string StopWatchHours
{
get { return _stopWatchHours; }
set { _stopWatchHours = value; OnPropertyChanged("StopWatchHours"); }
}
public string StopWatchMinutes
{
get { return _stopWatchMinutes; }
set { _stopWatchMinutes = value; OnPropertyChanged("StopWatchSeconds"); }
}
public string StopWatchSeconds
{
get { return _stopWatchSeconds; }
set { _stopWatchSeconds = value; OnPropertyChanged("StopWatchSeconds"); }
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
var changed = PropertyChanged;
if (changed != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public ICommand Start { get; set; }
public ICommand Stop { get; set; }
public ICommand Reset { get; set; }
private void OnStartTimerExecute()
{
stopwatch.Start();
Device.StartTimer(TimeSpan.FromSeconds(1), () =>
{
StopWatchHours = stopwatch.Elapsed.Hours.ToString();
StopWatchMinutes = stopwatch.Elapsed.Minutes.ToString();
StopWatchSeconds = stopwatch.Elapsed.Seconds.ToString();
return true;
});
}
private void OnStop()
{
stopwatch.Stop();
stopwatch = null;
}
private void onReset()
{
stopwatch.Reset();
}
}
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
NavigationPage.HasNavigationBar="false"
x:Class="MyApp.Views.TimerPage"
IconImageSource="timer_icon_2x.png"
Title="{Binding Title}">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Label HorizontalOptions="Center" FontSize="45" TextColor="#00A8E8">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding StopWatchHours}"/>
<Span Text=":"/>
<Span Text="{Binding StopWatchMinutes}"/>
<Span Text=":"/>
<Span Text="{Binding StopWatchSeconds}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Button Command="{Binding Start}"/>
<Button Command="{Binding Stop}"/>
<Button Command="{Binding Reset}"/>
</StackLayout>
</ContentPage>

you are raising OnPropertyChanged("StopWatchSeconds"); instead of OnPropertyChanged("StopWatchMinutes");
public string StopWatchMinutes
{
get { return _stopWatchMinutes; }
set { _stopWatchMinutes = value;
OnPropertyChanged("StopWatchSeconds");
}
}

Xamarin Forms ListView Bindings don't get updated

I have a problem. I created a ListView with a ViewModel. In my ListView I have a few Labels with Text that is bound to the objects in the ItemSource. Now when I change a value in the ViewModel of an item in the ObservableCollection, nothing changes on the screen!
Here is my ViewModel:
public class VM_DeviceList : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public ICommand cmdDeleteDevice
{
get
{
return new Command<int>((x) => DeleteDevice_Handler(x));
}
}
public ICommand cmdTogglePower
{
get
{
return new Command<int>((x) => TogglePower_Handler(x));
}
}
private ObservableCollection<DisplayedDevice> _knownDeviceList;
public ObservableCollection<DisplayedDevice> knownDeviceList
{
get
{
return _knownDeviceList;
}
set
{
if (_knownDeviceList != value)
{
_knownDeviceList = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("knownDeviceList"));
}
}
}
}
Here is my class for the ObservableCollection:
public class DisplayedDevice : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public int Id { get; set; }
public string Name { get; set; }
public string State { get; set; }
public string StateShown { get; set; }
public string deviceImage { get; set; }
public string Color { get; set; }
public string PowerStateColor { get; set; }
public string DeviceImageColor { get; set; }
public string DeviceImage
{
get
{
return deviceImage;
}
set
{
deviceImage = value;
OnPropertyChanged();
}
}
}
And here is the xaml:
<ListView ItemsSource="{Binding knownDeviceList}" SelectionMode="None" RowHeight="90" ItemTapped="device_Clicked" x:Name="MyListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<AbsoluteLayout HeightRequest="70" Margin="20,10,20,10">
<StackLayout Opacity="0.3" BackgroundColor="White"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All" />
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" Margin="0,3,0,0"
FontAttributes="Bold" FontSize="24" TextColor="White" />
<Label Grid.Row="1" Grid.Column="1" Text="{Binding StateShown}" FontSize="18" TextColor="White" />
<!-- <Image Source="power" Grid.RowSpan="2" Grid.Column="2" Margin="5" /> -->
<controls:IconView x:Name="btnPower" Source="power" Grid.RowSpan="2" Grid.Column="2" Margin="5"
Foreground="{Binding PowerStateColor}">
<controls:IconView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.cmdTogglePower, Source={x:Reference MyListView}}" CommandParameter="{Binding Id}" />
</controls:IconView.GestureRecognizers>
</controls:IconView>
</Grid>
</StackLayout>
</AbsoluteLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Now what I expected to happen, was that when I click on the IconView I change the IconView color and the label with the StateShown binding. But nothing changes when I click on the IconView!
What am I doing wrong?

Add OnPropertyChanged method call to every property on DisplayedDevice for those you want the UI to notice.
public class DisplayedDevice : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private string name;
public string Name
{
get
{
return name;
}
set
{
name = value;
OnPropertyChanged();
}
}
private int id;
public int Id
{
get
{
return id;
}
set
{
Id = value;
OnPropertyChanged();
}
}
private string state;
public string State
{
get
{
return state;
}
set
{
state = value;
OnPropertyChanged();
}
}
......
}

You can use MVVMHelpers NuGet Package and implement the ObservableObject Class from the NuGet directly to DisplayedDevice class and you need to make all the properties with a reference to the private variable.
public class DisplayedDevice: ObservableObject
{
string _textField = string.Empty;
public string TextField
{
get => _textField;
set => SetProperty(ref _textField, value);
}
bool _isBarChartVisible = false;
public bool IsBarChartVisible
{
get => _isBarChartVisible;
set => SetProperty(ref _isBarChartVisible, value);
}
}
}
Every public property should be backed by a private property of the same type. This is important so that any change in any property will be reflected on the UI using INotifyPropertyChanged

XAML bound property isn't working as expected

I have a Crew property, the property has several fields, few of which are Code and InvoiceAmount. The plus button is supposed to insert a new crew into an ObservableCollection of crews. Adding the first item works fine, however when the second item is inserted the first item's code changes to the second item and the second item has no visible code. How do I fix it so that a new crew is inserted every time I click the + button?
Starting UI:
After one item (a) has been added:
Second item (b) has been added:
Here's the ViewModel code:
public class MainPageViewModel : ViewModelBase
{
public MainPageViewModel()
{
AddCrewCommand = new CustomCommand(param => addCrew(), null);
Crews.CollectionChanged += new NotifyCollectionChangedEventHandler(Crews_Updated);
}
private void Crews_Updated(object sender, NotifyCollectionChangedEventArgs e)
{
RaisePropertyChanged("lvCrewList");
}
public Crew Crew { get; set; } = new Crew();
public ObservableCollection<Crew> Crews { get; private set; } = new ObservableCollection<Crew>();
public Crew SelectedCrew { get; set; }
public ICommand AddCrewCommand { get; private set; }
private void addCrew()
{
Crews.Add(Crew);
Crew = new Crew();
}
public ObservableCollection<string> SelectedWorkOrder { get; set; }
}
ViewModelBase:
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Here's the XAML bit that assigns the Code field:
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" >
<Label Content="Crew" Width="55" Height="25" Margin="10,10,0,0"/>
<TextBox x:Name="txtCrew" Width="75" Height="25" Margin="0,10,10,0"
Text="{Binding Crew.Code, Mode=TwoWay}" />
<Button Content="+" Width="25" Height="25" Margin="0, 10, 0, 0" Command="{Binding AddCrewCommand}" />
</StackPanel>
Crew Class:
public class Crew
{
public string Code { get; set; }
public decimal InvoiceAmount { get; set; } = 0;
public Job Job { get; set; }
public override string ToString() => Code;
}

It is because you are not raising a PropertyChanged event for your Crew property, therefore the textbox is still bound to the previously added crew.
Change your MainPageViewModel.Crew property to the following:
public class MainPageViewModel : ViewModelBase
{
.............
private Crew _crew = new Crew();
public Crew Crew
{
get { return _crew; }
set
{
if (_crew == value) return;
_crew = value;
RaisePropertyChanged(nameof(Crew));
}
}
.......
}

Xamarin Set Binding of EntryCell

I want to save the values that a user enters in the placeholder of an EntryCell using MVVM.
This is part of my .xaml
<TableView>
<TableView.Root>
<TableSection>
<EntryCell x:Name="HomeEC"
Label="HomeTeam"
Placeholder="{Binding Home, Mode=TwoWay}"
>
</EntryCell>
<EntryCell x:Name="AwayEC"
Label="AwayTeam"
Placeholder="{Binding Away, Mode=TwoWay}"
>
</EntryCell>
<EntryCell x:Name="BetEC"
Label="BetTeam"
Placeholder="{Binding Bet, Mode=TwoWay}"
>
</EntryCell>
<EntryCell x:Name="TypeEC"
Label="BetType"
Placeholder="{Binding Type, Mode=TwoWay}"
>
</EntryCell>
<EntryCell x:Name="OddEC"
Label="Odd"
Placeholder="{Binding Odd, Mode=TwoWay}"
>
</EntryCell>
</TableSection>
</TableView.Root>
</TableView>
And this is my ViewModel class
public string Home
{
set
{
home = value;
OnPropertyChanged("Home");
newMatch.HomeTeam = home;
}
}
public string Away
{
set
{
away = value;
OnPropertyChanged("Away");
newMatch.AwayTeam = away;
}
}
public string Bet
{
set
{
bet = value;
OnPropertyChanged("Bet");
newMatch.Bet = bet;
}
}
public string Type
{
set
{
type = value;
OnPropertyChanged("Type");
newMatch.BetType = type;
}
}
public string Odd
{
set
{
odd = value;
OnPropertyChanged("Odd");
newMatch.Odd = Decimal.Parse(odd);
}
}
public ICommand InsertBet;
protected virtual void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs(propertyName));
}
}
When I enter my values in the field in the UI, they do not get saved here in the VM. What am I doing wrong?
Thanks,
Dragos

InsertMatchVM.cs
public class InsertMatchVM : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string home, away, bet;
public Match newMatch = new Match();
public string Home
{
set
{
home = value;
OnPropertyChanged("Home");
newMatch.HomeTeam = home;
}
get
{
return home;
}
}
public string Away
{
set
{
away = value;
OnPropertyChanged("Away");
newMatch.AwayTeam = away;
}
get
{
return away;
}
}
public string Bet
{
set
{
bet = value;
OnPropertyChanged("Bet");
newMatch.Bet = bet;
}
get
{
return bet;
}
}
public ICommand InsertBet;
protected virtual void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs(propertyName));
}
}
}
Page1.Xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App2;assembly=App2"
x:Class="App2.Page1">
<ContentPage.BindingContext>
<local:InsertMatchVM/>
</ContentPage.BindingContext>
<TableView>
<TableView.Root>
<TableSection>
<EntryCell x:Name="HomeEC"
Label="HomeTeam"
Text="{Binding Home, Mode=TwoWay}"
Placeholder="Home"
>
</EntryCell>
<EntryCell x:Name="AwayEC"
Label="AwayTeam"
Text="{Binding Away, Mode=TwoWay}"
Placeholder="Away"
>
</EntryCell>
<EntryCell x:Name="BetEC"
Label="BetTeam"
Text="{Binding Bet, Mode=TwoWay}"
Placeholder="Bet"
>
</EntryCell>
</TableSection>
</TableView.Root>
</TableView>
</ContentPage>
App.cs
public class App : Application
{
public App()
{
MainPage = new Page1();
}
}
Match.cs
public class Match
{
public string HomeTeam { get; set; }
public string AwayTeam { get; set; }
public string Bet { get; set; }
}