Nest reactiveui usercontrols wpf / pass ViewModel to usercontrol - wpf

Question

Q: How can I bind a ViewModel to a ReactiveUserControl? Or how to nest Reactiveui views?
There's probably something I'm doing wrong, but I can't figure out what exactly.
ReactiveUserControl
// MenuView.xaml
<reactiveui:ReactiveUserControl
x:Class="Views.MenuView"
xmlns:menuItems="clr-namespace:Model"
.... >
<Menu x:Name="RootMenu"
IsMainMenu="True">
<Menu.Resources>
<DataTemplate DataType="{x:Type menuItems:DialogItem}">
<TextBlock Text="{Binding Description}" />
</DataTemplate>
</Menu.Resources>
</Menu>
</reactiveui:ReactiveUserControl>
// MenuView.xaml.cs
namespace Views
{
public partial class MenuView : ReactiveUserControl<MenuViewModel>
{
public MenuView()
{
InitializeComponent();
this.WhenActivated(disposables =>
{
this.OneWayBind(ViewModel,
vm => vm.MenuItems,
view => view.RootMenu.ItemsSource
).DisposeWith(disposables);
});
}
}
}
// MenuViewModel.cs
namespace Views
{
public class MenuViewModel : ReactiveObject
{
public ObservableCollection<DialogItem> MenuItems { get; } = new ObservableCollection<DialogItem>();
public MenuViewModel()
{
MenuItems.Add(new DialogItem("Edit", 224));
MenuItems.Add(new DialogItem("View", 224));
}
}
}
DialogItem represents an item in the menu
// DialogItem.cs
namespace Model
{
public class DialogItem
{
public DialogItem(string description, int dialogId)
{
this.DialogId = dialogId;
this.Description = description;
}
public int DialogId { get; }
public string Description { get; }
}
}
Then finally in MainWindow I include the usercontrol like so:
// MainWindow.xaml
<reactiveui:ReactiveWindow
x:Class="Views.MainWindow"
....
>
<Grid>
<views:MenuView x:Name="MainMenu" />
</Grid>
</reactiveui:ReactiveWindow>
Code behind
// MainWindow.xaml.cs
namespace Views
{
public partial class MainWindow : ReactiveWindow<MainWindowModel>
{
public MainWindow()
{
InitializeComponent();
this.WhenActivated(disposables =>
{
// BIND THE VIEWMODEL CREATED IN THE MAINWINDOW VIEWMODEL, IS THIS CORRECT?
this.Bind(ViewModel,
vm => vm.MainMenuViewModel,
view => view.MainMenu.ViewModel
).DisposeWith(disposables);
});
}
}
}
// MainWindowModel.cs
namespace Views
{
public class MainWindowModel : ReactiveObject
{
public MenuViewModel MainMenuViewModel { get; }
public MainWindowModel()
{
this.MainMenuViewModel = new MenuViewModel();
}
}
}
The Items are iterated, but if I look at the visual representation tree I an ViewModelViewHost item in the ContentPresenter instead of a TextBlock
Here you see the Menu Items are not rendered correctly. (they are rendered but without the text from DataTemplate.
Update:
Using a Menu.ItemTemplate does work, but this is not what I am looking for.
<reactiveui:ReactiveUserControl
x:Class="Views.MenuView"
...
>
<Menu x:Name="RootMenu"
IsMainMenu="True">
<Menu.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Description}" />
</DataTemplate>
</Menu.ItemTemplate>
</Menu>
</reactiveui:ReactiveUserControl>

Answer 1

Discussing this issue on Slack with Glenn Watson gave me the penny drop moment. Because I was using the code behind binding of RxUI, RxUI is using its locator logic to lookup the view. RxUI will lookup a view if there's no ItemTemplate or DisplayPathMember property defined. These views are registered in the Splat container as a view for the viewmodel. So the DataTemplates in <Menu.Resources> are not considered. This is exactly what's shown in the image. A ViewModelViewHost is created, but because no corresponding view is found nothing is displayed.
This can be solved by using the XAML binding instead of the code behind binding (assign the viewmodel to the datacontext to do this!). See the docs for more info.