Winforms: re-binding when the ViewModel changes - winforms

Question

I'm working on a Winforms ReactiveUI app and I have a UserControl that implements IViewFor:
public partial class CustomView : UserControl, IViewFor<CustomViewModel>
{
public CustomViewModel ViewModel { get; set; }
object IViewFor.ViewModel {
get { return ViewModel; }
set { ViewModel = value as CustomViewModel; }
}
public CustomView()
{
InitializeComponent();
this.Bind(ViewModel, x => x.SomeBindingList, x => x.DataGridBindingSource.DataSource);
}
}
In the calling control, I set the ViewModel with:
customView.ViewModel = new CustomViewModel(model)
However, when data changes, customView.ViewModel is re-assigned (using the same code above) but it does not automatically re-bind. I'm assuming that's because ViewModel has no PropertyChanged event.
I could implement INotifyPropertyChanged on CustomView, but I was wondering - is there a convenience method/ReactiveUI way of doing this?

Answer 1

I think you are on the right track with passing a new model instead of replacing the ViewModel. I wasn't sure of your exact requirements, but here is an example that might help. Selecting a new user changes the list of contacts in the CustomView's DataGridView.
Item
public class Item
{
public string Name { get; set; }
public int Value { get; set; }
public Item(string name, int value)
{
Name = name; Value = value;
}
}
MainViewModel
public class MainViewModel : ReactiveObject
{
int _userId;
public int UserId
{
get { return _userId; }
set { this.RaiseAndSetIfChanged(ref _userId, value); }
}
ObservableAsPropertyHelper<User> _user;
public User User => _user.Value;
ObservableAsPropertyHelper<List<Item>> _userList;
public List<Item> UserList => _userList.Value;
public ReactiveCommand<User> LoadUser { get; protected set; }
public ReactiveCommand<List<Item>> LoadUserList { get; protected set; }
public MainViewModel()
{
LoadUser = ReactiveCommand.CreateAsyncObservable(_ => LoadUserImp(UserId));
_user = LoadUser.ToProperty(this, x => x.User, null);
LoadUserList = ReactiveCommand.CreateAsyncObservable(_ => LoadUserListImp());
_userList = LoadUserList.ToProperty(this, x => x.UserList, new List<Item>());
// Listens for change to UserId and loads new User.
this.WhenAnyValue(x => x.UserId).Where(id => id > 0).InvokeCommand(LoadUser);
}
private IObservable<User> LoadUserImp(int userId)
{
User user;
if (userId == 1)
{
user = new User { Id = 1, Name = "Bob" };
}
else
{
user = new User { Id = 2, Name = "Jane" };
}
return Observable.Return(user);
}
private IObservable<List<Item>> LoadUserListImp()
{
Item item1 = new Item("Bob", 1);
Item item2 = new Item("Jane", 2);
List<Item> items = new List<Item> { item1, item2 };
return Observable.Return(items);
}
}
MainView
public partial class MainView : Form, IViewFor<MainViewModel>
{
public MainViewModel ViewModel { get; set; }
object IViewFor.ViewModel
{
get { return ViewModel; }
set { ViewModel = value as MainViewModel; }
}
public MainView()
{
InitializeComponent();
List<Item> items = new List<Item>();
UserComboBox.DataSource = items;
UserComboBox.DisplayMember = "Name";
UserComboBox.ValueMember = "Value";
// Two way binding.
this.Bind(ViewModel, vm => vm.UserId, v => v.UserComboBox.SelectedValue);
// One way binding.
this.OneWayBind(ViewModel, vm => vm.UserList, v => v.UserComboBox.DataSource);
// Per Paul Betts: Invoking this in the VM constructor means that your VM class becomes more difficult to test,
// because you always have to mock out the effects of calling [LoadUserList],
// even if the thing you are testing is unrelated.
// Instead, I always call these commands in the View.
this.WhenAnyValue(v => v.ViewModel.LoadUserList)
.SelectMany(x => x.ExecuteAsync())
.Subscribe();
// This is where I would change your model, in this case the user in the CustomView.
this.WhenAnyObservable(v => v.ViewModel.LoadUser)
.Subscribe(user => customView1.ViewModel.User = user);
ViewModel = new MainViewModel();
customView1.ViewModel = new CustomViewModel();
}
}
CustomViewModel
public class CustomViewModel : ReactiveObject
{
ObservableAsPropertyHelper<List<Person>> _contacts;
public List<Person> Contacts => _contacts.Value;
User _user;
public User User
{
get { return _user; }
set { this.RaiseAndSetIfChanged(ref _user, value); }
}
public ReactiveCommand<List<Person>> LoadContacts { get; protected set; }
public CustomViewModel()
{
LoadContacts = ReactiveCommand.CreateAsyncObservable(_ => LoadContactsImp(User.Id));
_contacts = LoadContacts.ToProperty(this, x => x.Contacts, new List<Person>());
this.WhenAnyValue(vm => vm.User.Id).InvokeCommand(LoadContacts);
}
private IObservable<List<Person>> LoadContactsImp(int userId)
{
List<Person> contacts;
if (userId == 1)
{
contacts = new List<Person>()
{
new Person() { Id = 1, FirstName = "John", LastName = "Jones" },
new Person() { Id = 2, FirstName = "Beth", LastName = "Johnson" },
};
}
else
{
contacts = new List<Person>()
{
new Person() { Id = 1, FirstName = "Dave", LastName = "Smith" },
new Person() { Id = 2, FirstName = "Elizabeth", LastName = "Bretfield" },
};
}
return Observable.Return(contacts);
}
}
CustomView
public partial class CustomView : UserControl, IViewFor<CustomViewModel>
{
public CustomViewModel ViewModel { get; set; }
object IViewFor.ViewModel
{
get { return ViewModel; }
set { ViewModel = value as CustomViewModel; }
}
public CustomView()
{
InitializeComponent();
this.OneWayBind(ViewModel, vm => vm.Contacts, v => v.Contacts.DataSource);
}
}

Answer 2

Why the CustomView constructor is called "BridgeGeometryView"?
Are you using ReactiveList or ReactiveBindingList for SomeBindingList in the ViewModel?
Also, I recommend to not set the binding directly, use WhenActivated after InitializeComponent() method:
public BridgeGeometryView()
{
InitializeComponent();
this.WhenActivated(() =>
{
this.Bind(ViewModel, x => x.SomeBindingList, x => x.DataGridBindingSource.DataSource);
});
}