Working ViewModel-first child control with Splat (i.e., no autofac yet)

Author: Sam Storie

reactiveui-simple-user-control/SimpleApp/SimpleApp/App.xaml

@@ -1,8 +1,7 @@
 <Application x:Class="SimpleApp.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:local="clr-namespace:SimpleApp"
-             StartupUri="MainWindow.xaml">
+             xmlns:local="clr-namespace:SimpleApp">
     <Application.Resources>
 
     </Application.Resources>

reactiveui-simple-user-control/SimpleApp/SimpleApp/App.xaml.cs

@@ -3,8 +3,12 @@
 using System.Configuration;
 using System.Data;
 using System.Linq;
+using System.Reflection;
 using System.Threading.Tasks;
 using System.Windows;
+using ReactiveUI;
+using SimpleApp.ViewModels;
+using Splat;
 
 namespace SimpleApp
 {
@@ -13,5 +17,17 @@ namespace SimpleApp
     /// </summary>
     public partial class App : Application
     {
+        public App()
+        {
+            // This is the "magic" that automatically registers each view against the IViewFor<> 
+            //  interface it implements. This is specific to Splat, and could be replaced by the
+            //  specific capabilities of another IoC library
+            //
+            var assembly = Assembly.GetExecutingAssembly();
+            Locator.CurrentMutable.RegisterViewsForViewModels(assembly);
+
+            var view = (Views.MainWindow)Locator.CurrentMutable.GetService(typeof(IViewFor<MainWindowViewModel>));
+            view.Show();
+        }
     }
 }

reactiveui-simple-user-control/SimpleApp/SimpleApp/SimpleApp.csproj

@@ -75,21 +75,29 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </ApplicationDefinition>
-    <Page Include="MainWindow.xaml">
+    <Page Include="Views\Counter.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Views\MainWindow.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
     <Compile Include="App.xaml.cs">
       <DependentUpon>App.xaml</DependentUpon>
       <SubType>Code</SubType>
     </Compile>
-    <Compile Include="MainWindow.xaml.cs">
+    <Compile Include="ViewModels\CounterViewModel.cs" />
+    <Compile Include="Views\Counter.xaml.cs">
+      <DependentUpon>Counter.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Views\MainWindow.xaml.cs">
       <DependentUpon>MainWindow.xaml</DependentUpon>
       <SubType>Code</SubType>
     </Compile>
   </ItemGroup>
   <ItemGroup>
-    <Compile Include="MainWindowViewModel.cs" />
+    <Compile Include="ViewModels\MainWindowViewModel.cs" />
     <Compile Include="Properties\AssemblyInfo.cs">
       <SubType>Code</SubType>
     </Compile>

reactiveui-simple-user-control/SimpleApp/SimpleApp/ViewModels/CounterViewModel.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Reactive.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using ReactiveUI;
+
+namespace SimpleApp.ViewModels
+{
+    public class CounterViewModel : ReactiveObject
+    {
+        readonly ObservableAsPropertyHelper<long> _currentValue;
+        public long CurrentValue => _currentValue.Value;
+
+        public CounterViewModel()
+        {
+            Observable.Interval(TimeSpan.FromSeconds(1))
+                .Select(x => x * 2)
+                .ToProperty(this, x => x.CurrentValue, out _currentValue, 0, false, RxApp.MainThreadScheduler);
+
+        }
+    }
+}

reactiveui-simple-user-control/SimpleApp/SimpleApp/MainWindowViewModel.cs renamed to reactiveui-simple-user-control/SimpleApp/SimpleApp/ViewModels/MainWindowViewModel.cs

@@ -1,23 +1,22 @@
 using System;
-using System.Collections.Generic;
-using System.Linq;
 using System.Reactive.Linq;
-using System.Text;
-using System.Threading.Tasks;
 using ReactiveUI;
 
-namespace SimpleApp
+namespace SimpleApp.ViewModels
 {
     public class MainWindowViewModel : ReactiveObject
     {
         readonly ObservableAsPropertyHelper<long> _currentValue;
         public long CurrentValue => _currentValue.Value;
 
+        public CounterViewModel CounterViewModel { get; }
+
         public MainWindowViewModel()
         {
-
             Observable.Interval(TimeSpan.FromSeconds(1))
                 .ToProperty(this, x => x.CurrentValue, out _currentValue, 0, false, RxApp.MainThreadScheduler);
+
+            CounterViewModel = new CounterViewModel();
         }
     }
 }

reactiveui-simple-user-control/SimpleApp/SimpleApp/Views/Counter.xaml

@@ -0,0 +1,14 @@
+<UserControl x:Class="SimpleApp.Views.Counter"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:SimpleApp.Views"
+             mc:Ignorable="d" 
+             d:DesignHeight="300" d:DesignWidth="300">
+    <DockPanel LastChildFill="True">
+        <TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center">Counter User Control</TextBlock>
+
+        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="CurrentValue" FontSize="48"></TextBlock>
+    </DockPanel>
+</UserControl>

reactiveui-simple-user-control/SimpleApp/SimpleApp/MainWindow.xaml.cs renamed to reactiveui-simple-user-control/SimpleApp/SimpleApp/Views/Counter.xaml.cs

@@ -13,32 +13,38 @@
 using System.Windows.Navigation;
 using System.Windows.Shapes;
 using ReactiveUI;
+using SimpleApp.ViewModels;
 
-namespace SimpleApp
+namespace SimpleApp.Views
 {
     /// <summary>
-    /// Interaction logic for MainWindow.xaml
+    /// Interaction logic for Counter.xaml
     /// </summary>
-    public partial class MainWindow : Window, IViewFor<MainWindowViewModel>
+    public partial class Counter : IViewFor<CounterViewModel>
     {
-        public MainWindow()
+        public static readonly DependencyProperty ViewModelProperty =
+            DependencyProperty.Register(
+                "ViewModel",
+                typeof(CounterViewModel),
+                typeof(Counter));
+
+        public Counter()
         {
-            ViewModel = new MainWindowViewModel();
             InitializeComponent();
-            DataContext = ViewModel;
 
             this.WhenActivated(d =>
             {
                 d(this.OneWayBind(ViewModel, vm => vm.CurrentValue, v => v.CurrentValue.Text));
             });
+
         }
 
         object IViewFor.ViewModel
         {
-            get { return ViewModel; }
-            set { ViewModel = (MainWindowViewModel)value; }
+            get => ViewModel;
+            set => ViewModel = (CounterViewModel) value;
         }
 
-        public MainWindowViewModel ViewModel { get; set; }
+        public CounterViewModel ViewModel { get; set; }
     }
 }

reactiveui-simple-user-control/SimpleApp/SimpleApp/MainWindow.xaml renamed to reactiveui-simple-user-control/SimpleApp/SimpleApp/Views/MainWindow.xaml

@@ -1,9 +1,11 @@
-<Window x:Class="SimpleApp.MainWindow"
+<Window x:Class="SimpleApp.Views.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:SimpleApp"
+        xmlns:views="clr-namespace:SimpleApp.Views"
+        xmlns:reactiveUi="http://reactiveui.net"
         mc:Ignorable="d"
         Title="MainWindow" Height="350" Width="525">
     <Grid Margin="8">
@@ -18,10 +20,6 @@
             <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="CurrentValue" FontSize="48"></TextBlock>
         </DockPanel>
 
-        <DockPanel Grid.Row="1"  LastChildFill="True">
-            <TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center">Embedded User Control</TextBlock>
-
-            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Nothing yet...</TextBlock>
-        </DockPanel>
+        <reactiveUi:ViewModelViewHost Grid.Row="1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="CounterViewModel"></reactiveUi:ViewModelViewHost>
     </Grid>
 </Window>

reactiveui-simple-user-control/SimpleApp/SimpleApp/Views/MainWindow.xaml.cs

@@ -0,0 +1,39 @@
+using System.Windows;
+using ReactiveUI;
+using SimpleApp.ViewModels;
+
+namespace SimpleApp.Views
+{
+    /// <summary>
+    /// Interaction logic for MainWindow.xaml
+    /// </summary>
+    public partial class MainWindow : Window, IViewFor<MainWindowViewModel>
+    {
+        public static readonly DependencyProperty ViewModelProperty =
+            DependencyProperty.Register(
+                "ViewModel", 
+                typeof(MainWindowViewModel), 
+                typeof(MainWindow));
+
+        public MainWindow()
+        {
+            ViewModel = new MainWindowViewModel();
+            InitializeComponent();
+            DataContext = ViewModel;
+
+            this.WhenActivated(d =>
+            {
+                d(this.OneWayBind(ViewModel, vm => vm.CurrentValue, v => v.CurrentValue.Text));
+                d(this.OneWayBind(ViewModel, vm => vm.CounterViewModel, v => v.CounterViewModel.ViewModel));
+            });
+        }
+
+        object IViewFor.ViewModel
+        {
+            get => ViewModel;
+            set => ViewModel = (MainWindowViewModel)value;
+        }
+
+        public MainWindowViewModel ViewModel { get; set; }
+    }
+}