Refresh ListView on another Content Page via button click event - xamarin

Question

I am having a hard time refreshing a listView. I've tried using ObservableCollection instead of List for contacts but it didn't help. Can someone points me to the right direction please? Any help would be very much appreciated.
ContactListPage.cs file (This is the default page. Add Contact button loads up NewContactPage.)
public class ContactListPage : ContentPage
{
public ListView listView = new ListView();
public List<Contact> contacts { get; set; }
public ContactListPage()
{
Button button = new Button
{
Text = "Add Contact",
Margin = new Thickness(0, 0, 10, 0)
};
button.Clicked += OnButtonClicked;
StackLayout buttonLayout = new StackLayout { Orientation = StackOrientation.Horizontal, VerticalOptions = LayoutOptions.Center,
Children =
{
new Label {Text = "Contact List", FontSize = 30, FontAttributes = FontAttributes.Bold | FontAttributes.Italic, Margin = new Thickness(10,0,0,0)},
new Label {Text = "", FontSize = 30, FontAttributes = FontAttributes.Bold | FontAttributes.Italic, HorizontalOptions = LayoutOptions.CenterAndExpand},
button
}
};
contacts = new List<Contact>
{
// Add some contacts
new Contact("Jason", "Bourne", "Family"),
new Contact("Sunny", "An", "Family Dog"),
new Contact("Jenny", "Bahn", "Family"),
new Contact("Joshua", "Brown", "Work")
};
// Set up listview
listView.ItemsSource = contacts;
listView.ItemTemplate = new DataTemplate(typeof(TextCell));
listView.ItemTemplate.SetBinding(TextCell.TextProperty, "FullName");
listView.ItemTemplate.SetBinding(TextCell.DetailProperty, "ContactType");
listView.HeightRequest = (40 * contacts.Count);
// Add things to the stacklayout
StackLayout layout = new StackLayout();
layout.Children.Add(buttonLayout);
layout.Children.Add(listView);
Content = layout;
void OnButtonClicked(object sender, EventArgs args)
{
Navigation.PushAsync(new NewContactPage());
};
}
}
Contact.cs file
public class Contact
{
// constructor
public Contact(string firstName, string lastName, string contactType)
{
FirstName = firstName;
LastName = lastName;
ContactType = contactType;
}
// properties
public string FirstName { get; set; }
public string LastName { get; set; }
public string ContactType { get; set; }
public string FullName
{
get
{
return FirstName + " " + LastName;
}
set
{
FullName = value;
}
}
}
NewContactPage.cs file (Save button seems to be working. I've used Debug.WriteLine to see the list of contacts prior and after adding a new contact. Return button suppose to refresh the contactPage.listView.ItemSource with the latest contents of contacts but it doesn't.)
public NewContactPage()
{
ContactListPage contactPage = new ContactListPage();
// Setup tableview
EntryCell firstName = new EntryCell {Label = "First Name:", Keyboard = Keyboard.Default};
EntryCell lastName = new EntryCell {Label = "Last Name:", Keyboard = Keyboard.Default};
EntryCell contactType = new EntryCell {Label = "Contact Type:", Keyboard = Keyboard.Default};
Label firstLabel = new Label { Text = "", FontSize = 10, FontAttributes = FontAttributes.Bold | FontAttributes.Italic, HorizontalOptions = LayoutOptions.CenterAndExpand};
Label secondLabel = new Label {Text = "", FontSize = 10, FontAttributes = FontAttributes.Bold | FontAttributes.Italic, HorizontalOptions = LayoutOptions.CenterAndExpand};
TableView tableView = new TableView {VerticalOptions = LayoutOptions.Start, Intent = TableIntent.Form,
Root = new TableRoot("Table Title") {
new TableSection ("Add a New Contact") {
firstName,
lastName,
contactType
}
}
};
// Setup buttons
Button saveContactButton = new Button {Text = "Save Contact", WidthRequest = 150, Margin = new Thickness(50, 0, 0, 0)};
saveContactButton.Clicked += saveContactButtonClicked;
Button returnButton = new Button {Text = "Return", WidthRequest = 150, Margin = new Thickness(10, 0, 50, 0)};
returnButton.Clicked += returnButtonClicked;
StackLayout buttonLayout = new StackLayout {Orientation = StackOrientation.Horizontal, VerticalOptions = LayoutOptions.Start,
Children =
{
saveContactButton,
new Label {Text = "", FontSize = 30, FontAttributes = FontAttributes.Bold | FontAttributes.Italic, HorizontalOptions = LayoutOptions.CenterAndExpand},
returnButton
}
};
Content = new StackLayout {Children = { tableView, buttonLayout, firstLabel, secondLabel }};
void saveContactButtonClicked(object sender, EventArgs e)
{
try
{
foreach (var yeah in contactPage.contacts)
{
Debug.WriteLine(yeah.FirstName.ToString());
}
// Add new contact to list
contactPage.contacts.Add(new Contact(firstName.Text.ToString(), lastName.Text.ToString(), contactType.Text.ToString()));
foreach (var yeah in contactPage.contacts)
{
Debug.WriteLine(yeah.FullName.ToString());
}
firstName.Text = String.Empty;
lastName.Text = String.Empty;
contactType.Text = String.Empty;
DisplayAlert("Success", "New contact has been added.", "OK");
}
catch(Exception ex)
{
Debug.WriteLine("Exception: {0}", ex);
}
};
void returnButtonClicked(object sender, EventArgs e)
{
contactPage.listView.ItemsSource = null;
contactPage.listView.ItemsSource = contactPage.contacts;
Navigation.PopAsync();
};
}
}

Answer 1

As Jason said, in the constructor of NewContactPage you are creating a new instance of ContactListPage which is completely different than the page you came from (and will return to upon PopAsync()).
To make it so you are adding the new contact to the correct page, I suggest passing in the your ContactListPage in the constructor of the NewContactPage:
public NewContactPage(ContactListPage contactPage)
{
//As a side note it's probably better practice to make
//contactPage a private variable for the NewContactPage class
//...
}
Then in your ContactListPage change the button click method to pass in the page:
void OnButtonClicked(object sender, EventArgs args)
{
Navigation.PushAsync(new NewContactPage(this));
};
Hope this helps!