samples: Add xamarin page routing and support various detail views (#1745)

samples/xamarin-forms/MasterDetail/Android/MasterDetail.Android.csproj

@@ -49,7 +49,7 @@
     <Reference Include="System.Xml" />
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="ReactiveUI" Version="*" />
+    <PackageReference Include="ReactiveUI" Version="8.7.2" />
     <PackageReference Include="Xamarin.Forms" Version="3.1.0.697729" />
     <PackageReference Include="Xamarin.Android.Support.Design" Version="27.0.2.1" />
     <PackageReference Include="Xamarin.Android.Support.v7.AppCompat" Version="27.0.2.1" />

samples/xamarin-forms/MasterDetail/MasterDetail/App.xaml.cs

@@ -13,9 +13,9 @@ public App()
         {
             InitializeComponent();
 
-            Locator.CurrentMutable.Register(() => new CustomCell(), typeof(IViewFor<CustomCellViewModel>));
+            var bootstrapper = new AppBootstrapper();
 
-            MainPage = new MainPage();
+            MainPage = new MainPage(bootstrapper.CreateMainViewModel());
         }
 
         protected override void OnStart()

samples/xamarin-forms/MasterDetail/MasterDetail/AppBootstrapper.cs

@@ -0,0 +1,45 @@
+using System;
+using ReactiveUI;
+using Splat;
+
+namespace MasterDetail
+{
+    public class AppBootstrapper
+    {
+        public AppBootstrapper()
+        {
+            RegisterViews();
+            RegisterViewModels();
+        }
+
+        private void RegisterViews()
+        {
+            Locator.CurrentMutable.Register(() => new DummyPage(), typeof(IViewFor<DummyViewModel>));
+            Locator.CurrentMutable.Register(() => new MasterCell(), typeof(IViewFor<MasterCellViewModel>));
+
+            // Detail pages
+            Locator.CurrentMutable.Register(() => new NavigablePage(), typeof(IViewFor<NavigableViewModel>));
+            Locator.CurrentMutable.Register(() => new NumberStreamPage(), typeof(IViewFor<NumberStreamViewModel>));
+            Locator.CurrentMutable.Register(() => new LetterStreamPage(), typeof(IViewFor<LetterStreamViewModel>));
+        }
+
+        public MainViewModel CreateMainViewModel()
+        {
+            // In a typical routing example the IScreen implementation would be this bootstrapper class.
+            // However, a MasterDetailPage is designed to at the root. So, we assign the master-detail
+            // view model to play the part of IScreen, instead.
+            var viewModel = new MainViewModel();
+
+            return viewModel;
+        }
+
+        private void RegisterViewModels()
+        {
+            // Here, we use contracts to distinguish which routable view model we want to instantiate.
+            // This helps us avoid a manual cast to IRoutableViewModel when calling Router.Navigate.Execute(...)
+            Locator.CurrentMutable.Register(() => new NavigableViewModel(), typeof(IRoutableViewModel), typeof(NavigableViewModel).FullName);
+            Locator.CurrentMutable.Register(() => new NumberStreamViewModel(), typeof(IRoutableViewModel), typeof(NumberStreamViewModel).FullName);
+            Locator.CurrentMutable.Register(() => new LetterStreamViewModel(), typeof(IRoutableViewModel), typeof(LetterStreamViewModel).FullName);
+        }
+    }
+}

samples/xamarin-forms/MasterDetail/MasterDetail/DetailPages/LetterStreamPage.xaml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<rxui:ReactiveContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
+             xmlns:local="clr-namespace:MasterDetail"
+             x:Class="MasterDetail.LetterStreamPage"
+             x:TypeArguments="local:LetterStreamViewModel">
+    <ContentPage.Content>
+        <StackLayout>
+            <Label
+                x:Name="LetterLabel"
+                VerticalOptions="CenterAndExpand" 
+                HorizontalOptions="CenterAndExpand"
+                FontSize="36" />
+        </StackLayout>
+    </ContentPage.Content>
+</rxui:ReactiveContentPage>

samples/xamarin-forms/MasterDetail/MasterDetail/DetailPages/LetterStreamPage.xaml.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Reactive.Disposables;
+using System.Reactive.Linq;
+using ReactiveUI;
+using ReactiveUI.XamForms;
+using Xamarin.Forms.Xaml;
+
+namespace MasterDetail
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	public partial class LetterStreamPage : ReactiveContentPage<LetterStreamViewModel>
+    {
+        public LetterStreamPage()
+        {
+			InitializeComponent();
+
+            this.WhenActivated(
+                disposables =>
+                {
+                    this
+                        .OneWayBind(ViewModel, vm => vm.CurrentLetter, v => v.LetterLabel.Text)
+                        .DisposeWith(disposables);
+                });
+        }
+    }
+}

samples/xamarin-forms/MasterDetail/MasterDetail/DetailPages/LetterStreamViewModel.cs

@@ -0,0 +1,27 @@
+using System;
+using System.Reactive.Linq;
+using ReactiveUI;
+
+namespace MasterDetail
+{
+    public class LetterStreamViewModel : ReactiveObject, IRoutableViewModel
+    {
+        private ObservableAsPropertyHelper<char> _currentLetter;
+
+        public LetterStreamViewModel()
+        {
+            _currentLetter = Observable
+                .Interval(TimeSpan.FromSeconds(1))
+                .Scan(64, (acc, current) => acc + 1)
+                .Select(x => (char)x)
+                .Take(26)
+                .ToProperty(this, x => x.CurrentLetter, scheduler: RxApp.MainThreadScheduler);
+        }
+
+        public char CurrentLetter => _currentLetter.Value;
+
+        public string UrlPathSegment => "Letter Stream Page";
+
+        public IScreen HostScreen { get; }
+    }
+}

samples/xamarin-forms/MasterDetail/MasterDetail/MyDetailPage.xaml → samples/xamarin-forms/MasterDetail/MasterDetail/DetailPages/NavigablePage.xaml

@@ -3,12 +3,13 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
              xmlns:local="clr-namespace:MasterDetail"
-             x:Class="MasterDetail.MyDetailPage"
-             x:TypeArguments="local:MyDetailViewModel">
+             x:Class="MasterDetail.NavigablePage"
+             x:TypeArguments="local:NavigableViewModel">
     <ContentPage.Content>
         <StackLayout>
-            <Label
-                x:Name="TitleLabel"
+            <Button
+                x:Name="NavigateButton"
+                Text="Navigate"
                 VerticalOptions="CenterAndExpand" 
                 HorizontalOptions="CenterAndExpand" />
         </StackLayout>

samples/xamarin-forms/MasterDetail/MasterDetail/DetailPages/NavigablePage.xaml.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Reactive.Disposables;
+using ReactiveUI;
+using ReactiveUI.XamForms;
+using Xamarin.Forms.Xaml;
+
+namespace MasterDetail
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	public partial class NavigablePage : ReactiveContentPage<NavigableViewModel>
+    {
+        public NavigablePage()
+        {
+			InitializeComponent();
+
+            this.WhenActivated(
+                disposables =>
+                {
+                    this
+                        .BindCommand(ViewModel, vm => vm.NavigateToDummyPage, v => v.NavigateButton)
+                        .DisposeWith(disposables);
+                });
+        }
+    }
+}

samples/xamarin-forms/MasterDetail/MasterDetail/DetailPages/NavigableViewModel.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Reactive;
+using System.Reactive.Linq;
+using ReactiveUI;
+using Splat;
+
+namespace MasterDetail
+{
+    public class NavigableViewModel : ReactiveObject, IRoutableViewModel
+    {
+        public NavigableViewModel(IScreen hostScreen = null)
+        {
+            HostScreen = hostScreen ?? Locator.Current.GetService<IScreen>();
+            NavigateToDummyPage = ReactiveCommand.CreateFromObservable(
+                () => HostScreen.Router.Navigate.Execute(new DummyViewModel()).Select(_ => Unit.Default));
+        }
+
+        public ReactiveCommand<Unit, Unit> NavigateToDummyPage { get; }
+
+        public string UrlPathSegment => "Navigable Page";
+
+        public IScreen HostScreen { get; }
+    }
+}

samples/xamarin-forms/MasterDetail/MasterDetail/DetailPages/NumberStreamPage.xaml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<rxui:ReactiveContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
+             xmlns:local="clr-namespace:MasterDetail"
+             x:Class="MasterDetail.NumberStreamPage"
+             x:TypeArguments="local:NumberStreamViewModel">
+    <ContentPage.Content>
+        <StackLayout>
+            <Label
+                x:Name="NumberLabel"
+                VerticalOptions="CenterAndExpand" 
+                HorizontalOptions="CenterAndExpand"
+                FontSize="36" />
+        </StackLayout>
+    </ContentPage.Content>
+</rxui:ReactiveContentPage>

samples/xamarin-forms/MasterDetail/MasterDetail/DetailPages/NumberStreamPage.xaml.cs

@@ -0,0 +1,29 @@
+using System;
+using System.Reactive.Disposables;
+using System.Reactive.Linq;
+using ReactiveUI;
+using ReactiveUI.XamForms;
+using Xamarin.Forms.Xaml;
+
+namespace MasterDetail
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	public partial class NumberStreamPage : ReactiveContentPage<NumberStreamViewModel>
+    {
+        public NumberStreamPage()
+        {
+			InitializeComponent();
+
+            this.WhenActivated(
+                disposables =>
+                {
+                    this
+                        .ViewModel
+                        .NumberStream
+                        .ObserveOn(RxApp.MainThreadScheduler)
+                        .BindTo(this, x => x.NumberLabel.Text)
+                        .DisposeWith(disposables);
+                });
+        }
+    }
+}

samples/xamarin-forms/MasterDetail/MasterDetail/DetailPages/NumberStreamViewModel.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Reactive.Linq;
+using ReactiveUI;
+
+namespace MasterDetail
+{
+    public class NumberStreamViewModel : ReactiveObject, IRoutableViewModel
+    {
+        public NumberStreamViewModel()
+        {
+            NumberStream = Observable
+                .Interval(TimeSpan.FromSeconds(1))
+                .Select(x => x.ToString());
+        }
+
+        public IObservable<string> NumberStream { get; }
+
+        public string UrlPathSegment => "Number Stream Page";
+
+        public IScreen HostScreen { get; }
+    }
+}

samples/xamarin-forms/MasterDetail/MasterDetail/DummyPage.xaml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<rxui:ReactiveContentPage
+             xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
+             xmlns:local="clr-namespace:MasterDetail"
+             x:Class="MasterDetail.DummyPage"
+             x:TypeArguments="local:DummyViewModel">
+    <ContentPage.Content>
+        <StackLayout Spacing="10">
+            <Button
+                x:Name="NavigateButton"
+                Text="Navigate"
+                VerticalOptions="CenterAndExpand" 
+                HorizontalOptions="Center" />
+            <Button
+                x:Name="BackButton"
+                Text="Navigate Back"
+                VerticalOptions="CenterAndExpand" 
+                HorizontalOptions="Center" />
+        </StackLayout>
+    </ContentPage.Content>
+</rxui:ReactiveContentPage>