We Keep Coding

Changes in Property that implements INotifyPropertyChanged not being reflected in UI

I am trying to implement the MVVM Pattern but unfortunately is taking longer than expected.
I have a ListView populated by an ObservableCollection of ContactsVm, Adding or Removing Contacts works perfectly, the problem comes when trying to change only one Item from this collection by selecting it.
The Xaml where I am setting my bindings:
<ListView ItemsSource="{Binding ContactsToDisplay}"
SelectedItem="{Binding SelectedContact, Mode=TwoWay}"
SeparatorColor="Black"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding FirstName}"
Detail="{Binding Id}">
<TextCell.ContextActions>
<MenuItem
Text="Delete"
IsDestructive="true"
Clicked="Delete_OnClicked"
CommandParameter="{Binding .}" />
</TextCell.ContextActions>
</TextCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Its cs:
public ContactBookApp()
{
InitializeComponent();
MapperConfiguration config = new MapperConfiguration(cfg => {
cfg.CreateMap<Contact, ContactVm>();
cfg.CreateMap<ContactVm, Contact>();
});
BindingContext = new ContactBookViewModel(new ContactService(), new PageService(), new Mapper(config));
}
private void AddButton_OnClicked(object sender, EventArgs e)
{
(BindingContext as ContactBookViewModel)?.AddContact();
}
private void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
(BindingContext as ContactBookViewModel)?.SelectContact(e.SelectedItem as ContactVm);
}
private void Delete_OnClicked(object sender, EventArgs e)
{
(BindingContext as ContactBookViewModel)?.DeleteContact((sender as MenuItem)?.CommandParameter as ContactVm);
}
}
My ViewModel, here the "problematic" part is the SelectContact method, I am posting the rest in case it helps:
public class ContactBookViewModel : BaseViewModel
{
private readonly IContactService _contactService;
private readonly IPageService _pageService;
private readonly IMapper _mapper;
private ContactVm _selectedContact;
public ObservableCollection<ContactVm> ContactsToDisplay { get; set; }
public ContactVm SelectedContact
{
get => _selectedContact;
set => SetValue(ref _selectedContact, value);
}
public ContactBookViewModel(IContactService contactService, IPageService pageService, IMapper mapper)
{
_contactService = contactService;
_pageService = pageService;
_mapper = mapper;
LoadContacts();
}
private void LoadContacts()
{
List<Contact> contactsFromService = _contactService.GetContacts();
List<ContactVm> contactsToDisplay = _mapper.Map<List<Contact>, List<ContactVm>>(contactsFromService);
ContactsToDisplay = new ObservableCollection<ContactVm>(contactsToDisplay);
}
public void SelectContact(ContactVm contact)
{
if (contact == null)
return;
//None of this approaches works:
//SelectedContact.FirstName = "Test";
//contact.FirstName = "Test;
}
}
}
My ContactVm class:
public class ContactVm : BaseViewModel
{
private string _firstName;
public int Id { get; set; }
public string FirstName
{
get => _firstName;
set => SetValue(ref _firstName, value);
}
}
The BaseViewModel:
public class BaseViewModel
{
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
protected void SetValue<T>(ref T backingField, T value, [CallerMemberName]string propertyName = null)
{
if (EqualityComparer<T>.Default.Equals(backingField, value))
return;
backingField = value;
OnPropertyChanged(propertyName);
}
}
As you can see, I am trying to update each selected contact setting its FirstName = "Test", the changed are updated but unfortunately they are not getting reflected in the UI, hope you can help me to find what I am doing wrong.
Thanks in advance!

Your BaseViewModel does not implement the INotifyPropertyChanged interface.

Since you had used MVVM , you could handle the logic diretly in your ViewModel when you select item in listview (you don't need to define ItemSelected event any more) .
private ContactVm _selectedContact;
public ContactVm SelectedContact
{
set
{
if (_selectedContact!= value)
{
_selectedContact= value;
SelectedContact.FirstName="Test";
NotifyPropertyChanged("SelectedContact");
}
}
get { return _selectedContact; }
}
And don't forget to implement the INotifyPropertyChanged to your model and viewmodel.

I guess the NotifyPropertyChangedInvocator attribute is not properly notifying the property changes. But I am not sure about that. Because your BaseViewModel does not implement the INotifyPropertyChanged interface.
The below code works fine for me. This is how I use it in my entire project.
I have directly derived the INotifyPropertyChanged interface in my BaseModel and implemented the property changes.
public class BaseModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string propertyName = "")
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class ContactVm : BaseModel
{
private string _firstName;
public int Id { get; set; }
public string FirstName
{
get { return _firstName; }
set
{
this._firstName = value;
NotifyPropertyChanged();
}
}
}
This is what I have in my callback.
public void SelectContact(ContactVm contact)
{
if (contact == null)
return;
contact.FirstName = "Test";
}
The only difference is I have implemented property changes for the ObservableCollection in ViewModel too.
public ObservableCollection<ContactVm> ContactsToDisplay
{
get { return _contactsToDisplay; }
set
{
this._contactsToDisplay = value;
NotifyPropertyChanged();
}
}
Note that I have not used your SelectedContact binding in my case. May be as you said that binding would be the issue.
I hope it helps you.

Refresh textbox when variable changes

Currently, in order for my textboxes to update, i need to navigate away from my SettingsPage and then back into it to see the changes in the TextBoxes.
Would you be able to help with getting these TextBoxes to update when the globalvariable changes? I have looked into using INotifyPropertyChanged. Im just not sure how best to implement it
Here is the code i have currently. its very basic.
Settings page XAML
<Frame Background="{StaticResource CustomAcrylicDarkBackground}">
<StackPanel>
<TextBox Width="500" Header="File Name" IsReadOnly="True" Foreground="White" Text="{x:Bind TextBoxFileName}"/>
<TextBox Width="500" Header="File Location" IsReadOnly="True" Foreground="White" Text="{x:Bind TextBoxFilePath}"/>
</StackPanel>
</Frame>
Code Behind
using static BS.Data.GlobalVariableStorage;
namespace BS.Content_Pages
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class SettingsPage : Page
{
public SettingsPage()
{
this.InitializeComponent();
}
public string TextBoxFilePath = GlobalVariables.FilePath;
public string TextBoxFileName = GlobalVariables.FileName;
}
}
}
GlobalVariablesStorage Class
namespace BS.Data
{
class GlobalVariableStorage
{
public static class GlobalVariables
{
public static string FilePath { get; set; }
public static string FileName { get; set; }
}
}
}
Save File Function within MainPage.XAML.cs (Parses the save name to GlobalVariableStorage)
public async void SaveButton_ClickAsync(object sender, RoutedEventArgs e)
{
SaveFileClass instance = new SaveFileClass();
IStorageFile file = await instance.SaveFileAsync();
if (file != null)
{
GlobalVariables.FileName = file.Name;
GlobalVariables.FilePath = file.Path;
// Debugging the output file paths
// Remember to REMOVE
Debug.WriteLine(GlobalVariables.FileName);
Debug.WriteLine(GlobalVariables.FilePath);
WriteFile.WriteFileData();
}
}

The main issue is here is that you somehow need to tell your view when to refresh the data-bound values. And for you to be able to do this you need to know when this happens.
In other words, the GlobalVariables class should raise an event whenever any property is set to a new value. It could for example raise the built-in PropertyChanged event:
public static class GlobalVariables
{
private static string _filePath;
public static string FilePath
{
get { return _filePath; }
set { _filePath = value; NotifyPropertyChanged(); }
}
private static string _fileName;
public static string FileName
{
get { return _fileName; }
set { _fileName = value; NotifyPropertyChanged(); }
}
public static event PropertyChangedEventHandler PropertyChanged;
private static void NotifyPropertyChanged([CallerMemberName]string propertyName = "") =>
PropertyChanged?.Invoke(null, new PropertyChangedEventArgs(propertyName));
}
In your view you could then subscribe to this event and raise another event that the view handles. You tell the view update a data-bound value by implementing the INotifyPropertyChanged interface and raise the PropertyChanged event for the property to be updated. Something like this:
public sealed partial class SettingsPage : Page, INotifyPropertyChanged
{
public SettingsPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
GlobalVariables.PropertyChanged += GlobalVariables_PropertyChanged;
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
GlobalVariables.PropertyChanged -= GlobalVariables_PropertyChanged;
}
private void GlobalVariables_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
switch (e.PropertyName)
{
case nameof(GlobalVariables.FilePath):
NotifyPropertyChanged(nameof(TextBoxFilePath));
break;
case nameof(GlobalVariables.FileName):
NotifyPropertyChanged(nameof(TextBoxFileName));
break;
}
}
public string TextBoxFilePath => GlobalVariables.FilePath;
public string TextBoxFileName => GlobalVariables.FileName;
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string propertyName) =>
PropertyChanged?.Invoke(null, new PropertyChangedEventArgs(propertyName));
}
Also note that the default mode of x:Bind is OneTime, so you should explicitly set the Mode to OneWay in the view, e.g.:
Text="{x:Bind TextBoxFilePath, Mode=OneWay}"

How to refresh Devexpress GridControl ItemsSource(as Datatable) in MVVM(WPF)

I have a GridControl(Devexpress v13) in view(WPF). A Datatable set values in ViewModel and assigned to ItemsSource. But ItemsSource filled only initialize. Later Datatable's value changes but it doesn't refresh.
How to ItemsSource refresh?
<dxg:GridControl Name="GridControlData" DataSource="{Binding DtCriterias, Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Top" AutoGenerateColumns="AddNew" Width="400" Height="100">
I hope you know what I mean.
Any help will be much appreciated.
Thanks in advance.
Edit:
Property changed using:
public DataTable DtCriterias {
get { return _dtCriterias; }
set
{
_dtCriterias = value;
Notify(() => DtCriterias);
}
}
protected void Notify(Expression<Func<object>> expression)
{
if (_propertyChangedEvent == null) return;
Notify(GetPropertyName(expression));
}
protected void Notify(string propertyName)
{
if (_propertyChangedEvent != null)
{
_propertyChangedEvent(this, new PropertyChangedEventArgs(propertyName));
}
}

public ObservableCollection<ClientB2B> Clients
{
get
{
return _clients;
}
set
{
if (_clients == value) return;
_clients = value;
OnPropertyChanged(); // This is what you need
}
}
Implement this interface - INotifyPropertyChanged
protected void OnPropertyChanged(PropertyChangedEventArgs e)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
handler(this, e);
}
protected void OnPropertyChanged(string propertyName)
{
OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;

I found reason of problem.
I am using encapsulation and I was set private value(_dtCriterias). Therefore Property Changed Event wasn't work.
Definitions:
private DataTable _dtCriterias;
public DataTable DtCriterias {
get { return _dtCriterias; }
set
{
_dtCriterias = value;
Notify(() => DtCriterias);
}
}
When I have problem datatable set:
_dtCriterias = GetValue().DefaultView.ToTable("FooTable");
Solution:
DtCriterias = GetValue().DefaultView.ToTable("FooTable");

Databinding - Listbox doesn't update when updating data after reloading from database

I have a listbox which has items populated from a database. Now I want to update a listbox with a new string value each time I call the Add function.
I did this in 2 ways.
I added the new value to the database and updated the ViewModel class where the listbox is binded to. And this works fine. (see AddNewNameFirstWay method below)
I added the new value to the database, reloaded the values from the database and updated the ViewModel. But this doesn't work. (see AddNewNameSecondWay method below)
Here is my ViewModel code
public class ViewModel
{
private DBContext context = new DBContext("Data source=isostore:/names2.sdf");
private ObservableCollection<NameTable> nameCollection;
public ObservableCollection<NameTable> NameCollection
{
get
{
return nameCollection;
}
set
{
if (nameCollection != value)
{
nameCollection = value;
NotifyPropertyChanged();
}
}
}
public void AddNewNameSecondWay(string s)
{
NameTable t = new NameTable() { Name = s };
context.NameDatabaseTable.InsertOnSubmit(t);
context.SubmitChanges();
LoadFromDB();
}
public void AddNewNameFirstWay(string s)
{
NameTable t = new NameTable() { Name = s };
context.NameDatabaseTable.InsertOnSubmit(t);
context.SubmitChanges();
NameCollection.Add(t);
}
public void LoadFromDB()
{
var query = from i in context.NameDatabaseTable
select i;
NameCollection = new ObservableCollection<NameTable>(query);
}
private void NotifyPropertyChanged([System.Runtime.CompilerServices.CallerMemberName]string propertyName = null)
{
var tmp = PropertyChanged;
if (tmp != null)
tmp(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
Here is my XAML binding code
<ListBox ItemsSource="{Binding NameCollection, Mode=OneWay}" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name, Mode=OneWay}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
It seems to me that second method doesn't work, because the ObservableCollection memory reference changes. If this is correct, how to update the binding properly?
Reason I use the second method is that, I want to make sure all the DB constraints stands true for the values I insert.

You need to notify about the changes in property. Try this way for Framework 4.0,
Mode=OneWayToSource,UpdateSourceTrigger=PropertyChanged
Hope it helps...

Call OnPropertyChanged when you want notification about changes in your collection:
OnPropertyChanged("NameCollection")
Your ViewModel:
public class ViewModel: INotifyPropertyChanged
{
private DBContext context = new DBContext("Data source=isostore:/names2.sdf");
private ObservableCollection<NameTable> nameCollection;
public ObservableCollection<NameTable> NameCollection
{
get
{
return nameCollection;
}
set
{
if (nameCollection != value)
{
nameCollection = value;
OnPropertyChanged("NameCollection");
}
}
}
public void AddNewNameSecondWay(string s)
{
// your code
OnPropertyChanged("NameCollection");
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}

INotifyPropertyChanged 'Double' binding

I'm trying to bind some XAML code to a property in my ViewModel.
<Grid Visibility="{Binding HasMovies, Converter={StaticResources VisibilityConverter}}">
...
</Grid>
My ViewModel is setup like this:
private bool _hasMovies;
public bool HasMovies
{
get { return _hasMovies; }
set { _hasMovies = value; RaisePropertyChanged("HasMovies"); }
}
In the constructor of the ViewModel, I set the HasMovies link:
MovieListViewModel()
{
HasMovies = CP.Connection.HasMovies;
}
in CP:
public bool HasMovies
{
get { return MovieList != null && MovieList.Count > 0; }
}
private ObservableCollection<Movie> _movies;
public ObservableCollection<Movie> MovieList
{
get { return _movies; }
set
{
_movies = value;
RaisePropertyChanged("MovieList");
RaisePropertyChanged("HasMovies");
_movies.CollectionChanged += MovieListChanged;
}
}
private void MovieListChanged(object sender, NotifyCollectionChangedEventArgs e)
{
RaisePropertyChanged("HasMovies");
}
What am I doing wrong? How should I change this binding so that it reflects the current state of CP.Connection.HasMovies?

Either directly expose the object in the ViewModel and bind directly through that (so that the value is not just copied once which is what happens now) or subscribe to the PropertyChanged event and set HasMovies to the new value every time it changes in your source object.
e.g.
CP.Connection.PropertyChanged += (s,e) =>
{
if (e.PropertyName = "HasMovies") this.HasMovies = CP.Connection.HasMovies;
};

First of all, the setter for a collection type, such as your MovieList property, is not called when you change the content of the collection (ie. Add/Remove items).
This means all your setter code for the MovieList property is pointless.
Secondly, it's very silly code. A much better solution, is to use NotifyPropertyWeaver. Then your code would look like this, in the viewmodel:
[DependsOn("MovieList")]
public bool HasMovies
{
get { return MovieList != null && MovieList.Count > 0; }
}
public ObservableCollection<Movie> MovieList
{
get;
private set;
}
Alternatively you would have to add a listener for the CollectionChanged event when you initialize the MovieList property the first time (no reason to have a backing property, really really no reason!), and then call RaisePropertyChanged("HasMovies") in the event handler.
Example:
public class CP : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public CP()
{
MovieList = new ObservableCollection<Movie>();
MovieList.CollectionChanged += MovieListChanged;
}
public bool HasMovies
{
get { return MovieList != null && MovieList.Count > 0; }
}
public ObservableCollection<Movie> MovieList
{
get;
private set;
}
private void MovieListChanged(object sender, NotifyCollectionChangedEventArgs e)
{
RaisePropertyChanged("HasMovies");
}
private void RaisePropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}