Why does ReactiveUI binding stop working? - wpf

Question

I encountered a very strange issue and cannot understand how to solve it.
My application window has a page navigator on the right. When you click any page in the navigator this page is displayed on the main preview surface on the left. Here how it looks like:
In the background there are 3 ViewModels: Root VM for the main window, Navigator VM and Page VM.
The Navigator VM looks as follows:
public class PageNavigatorViewModel : ReactiveObject, IPageNavigatorViewModel
{
public PageNavigatorViewModel()
{
Pages = new ObservableCollectionExtended<IPageViewModel>();
AddEmptyPageCommand = ReactiveCommand.Create(AddEmptyPage);
SelectPageCommand = ReactiveCommand.Create(SelectPage);
}
public IObservableCollection<IPageViewModel> Pages { get; }
// Is bound to a button in UI:
public ReactiveCommand<Unit, Unit> AddEmptyPageCommand { get; }
// This command is executed when the user clicks on a page in the Page Navigation Panel:
public ReactiveCommand<IPageViewModel, Unit> SelectPageCommand { get; }
public IPageViewModel CurrentPage
{
get => _CurrentPage;
set => SetCurrentPage(value);
}
public void AddEmptyPage()
{
var page = CreatePage();
Pages.Add(page);
SetCurrentPage(page);
}
public void SelectPage(IPageViewModel page)
{
SetCurrentPage(page);
}
private IPageViewModel _CurrentPage;
private void SetCurrentPage(IPageViewModel page)
{
foreach (var p in Pages)
p.IsCurrent = false;
page.IsCurrent = true;
this.RaiseAndSetIfChanged(ref _CurrentPage, page, nameof(CurrentPage));
}
}
The VM of the main window is as follows:
public class MainViewModel : ReactiveObject, IMainViewModel
{
public RootViewModel()
{
PageNavigator = new PageNavigatorViewModel();
this.WhenPropertyChanged(vm => vm.PageNavigator.CurrentPage)
.Subscribe(vm => CurrentPage = vm.Value);
}
public IPageNavigatorViewModel PageNavigator { get; protected set; }
[Reactive] public IPageViewModel CurrentPage { get; protected set; }
}
And finally here the code in the main window:
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
Initialize();
}
private void Initialize()
{
ViewModel = new RootViewModel();
// Add a few pages with random background:
for (var i = 0; i < 5; i++)
{
ViewModel.PageNavigator.AddEmptyPage();
ViewModel.PageNavigator[i].Background = GetRandomColor();
}
this.WhenActivated(d =>
{
// DrawingSurfaceBorder - it's ... just a standard WPF Border control:
this.OneWayBind(ViewModel, vm => vm.CurrentPage.Background, v => v.DrawingSurfaceBorder.Background).DisposeWith(d);
});
}
}
So, everything works as expected for those 5 pages added on VM initialization: I click a page and can see that the preview changes its color to the selected page. But when I add a new page, and in the code you can see this new page is Current now, however, the preview does not change at all, it's just ignores new added pages. Looks like the ReactiveUI does not bind new pages to the view. And I could not find anything on this issue on the web.

Answer 1

Wow, I've just found the answer accidentally! AddEmptyPage does not set the PageViewModel.Background property, so it is just null for all new pages. Looks like this breaks the binding, because setting this property fixed the issue. It is really hard to track mistake. I would be happy to have some exception on such case, but it's WPF - the most hard to debug framework in the Universe. I think I would kill myself even before my boss would lose his patience XD