路由
ReactiveUI 路由由包含当前 RoutingState 的 IScreen、多个 IRoutableViewModel 和一个特定于平台的 XAML 控件 RoutedViewHost 组成。RoutingState 管理视图模型导航堆栈，并允许视图模型导航到其他视图模型。IScreen 是导航堆栈的根；尽管名称如此，但它的视图不必占据整个屏幕。RoutedViewHost 监视 RoutingState 的实例，通过创建和嵌入适当的视图来响应导航堆栈中的任何更改。
路由示例
从 Avalonia 模板创建一个新的空项目。要使用这些模板，请克隆 avalonia-dotnet-templates 存储库，安装模板，并基于 avalonia.app 模板创建一个名为 RoutingExample 的新项目。将 Avalonia.ReactiveUI 包安装到项目中。
git clone https://github.com/AvaloniaUI/avalonia-dotnet-templates
dotnet new --install ./avalonia-dotnet-templates
dotnet new avalonia.app -o RoutingExample
cd ./RoutingExample
dotnet add package Avalonia.ReactiveUI
FirstViewModel.cs
首先，创建可路由的视图模型和相应的视图。我们从 ReactiveUI 命名空间中的 IRoutableViewModel 接口派生可路由的视图模型，并且也从 ReactiveObject 派生。ReactiveObject 是视图模型类的基类，并实现了 INotifyPropertyChanged。
namespace RoutingExample
{
public class FirstViewModel : ReactiveObject, IRoutableViewModel
{
// 拥有可路由视图模型的 IScreen 引用。
public IScreen HostScreen { get; }
// 可路由视图模型的唯一标识符。
public string UrlPathSegment { get; } = Guid.NewGuid().ToString().Substring(0, 5);
public FirstViewModel(IScreen screen) => HostScreen = screen;
}
}
FirstView.xaml
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="RoutingExample.FirstView">
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="Hi, I'm the first view!" />
<TextBlock Text="{Binding UrlPathSegment}" />
</StackPanel>
</UserControl>
```"
**FirstView.xaml.cs**
如果我们需要处理视图模型的激活和停用，那么我们在视图中添加一个调用WhenActivated的方法。一般来说，一个经验法则是始终在视图中添加WhenActivated，详见[Activation](../../concepts/reactiveui/view-activation)文档了解更多信息。
```csharp
namespace RoutingExample
{
public class FirstView : ReactiveUserControl<FirstViewModel>
{
public FirstView()
{
this.WhenActivated(disposables => { });
AvaloniaXamlLoader.Load(this);
}
}
}
MainWindowViewModel.cs
然后，创建一个实现IScreen接口的视图模型。它包含管理导航堆栈的当前RoutingState。RoutingState还包含一些辅助命令，允许您向后和向前导航。
实际上，您可以在应用程序中使用任意数量的IScreen。尽管名称如此，它不必占据整个屏幕。您可以使用嵌套路由，在一侧放置IScreen等。
namespace RoutingExample
{
public class MainWindowViewModel : ReactiveObject, IScreen
{
// 与此Screen关联的Router。
// IScreen接口所需。
public RoutingState Router { get; } = new RoutingState();
// 导航用户到第一个视图模型的命令。
public ReactiveCommand<Unit, IRoutableViewModel> GoNext { get; }
// 导航用户返回的命令。
public ReactiveCommand<Unit, IRoutableViewModel> GoBack => Router.NavigateBack;
public MainWindowViewModel()
{
// 管理路由状态。使用Router.Navigate.Execute命令导航到不同的视图模型。
//
// 注意，Navigate.Execute方法接受一个视图模型的实例，这允许您向视图模型传递参数，或者重用现有的视图模型。
//
GoNext = ReactiveCommand.CreateFromObservable(
() => Router.Navigate.Execute(new FirstViewModel(this))
);
}
}
}
MainWindow.xaml
现在我们需要将RoutedViewHost XAML控件放置在我们的主视图中。它将根据提供的IViewLocator实现和传递的Router实例（类型为RoutingState）解析和嵌入适当的视图模型。请注意，您需要导入rxui命名空间以使RoutedViewHost正常工作。此外，您可以在XAML中重写RoutedViewHost.PageTransition属性，以覆盖RoutedViewHost更改视图时播放的动画。
<Window xmlns="https://github.com/avaloniaui"
xmlns:rxui="http://reactiveui.net"
xmlns:app="clr-namespace:RoutingExample"
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"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="RoutingExample.MainWindow"
Title="RoutingExample">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<rxui:RoutedViewHost Grid.Row="0" Router="{Binding Router}">
<rxui:RoutedViewHost.DefaultContent>
<TextBlock Text="Default content"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</rxui:RoutedViewHost.DefaultContent>
<rxui:RoutedViewHost.ViewLocator>
<!-- See AppViewLocator.cs section below -->
<app:AppViewLocator />
</rxui:RoutedViewHost.ViewLocator>
</rxui:RoutedViewHost>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="15">
<StackPanel.Styles>
<Style Selector="StackPanel > :is(Control)">
<Setter Property="Margin" Value="2"/>
</Style>
<Style Selector="StackPanel > TextBlock">
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</StackPanel.Styles>
<Button Content="Go next" Command="{Binding GoNext}" />
<Button Content="Go back" Command="{Binding GoBack}" />
<TextBlock Text="{Binding Router.NavigationStack.Count}" />
</StackPanel>
</Grid>
</Window>
要禁用动画，只需将RoutedViewHost.PageTransition属性设置为{x:Null}，如下所示：
<rxui:RoutedViewHost Grid.Row="0" Router="{Binding Router}" PageTransition="{x:Null}">
<rxui:RoutedViewHost.DefaultContent>
<TextBlock Text="Default content"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</rxui:RoutedViewHost.DefaultContent>
</rxui:RoutedViewHost>
AppViewLocator.cs
我们在上面显示的MainWindow.xaml标记中传递给RoutedViewHost控件的AppViewLocator负责根据ViewModel的类型解析View。类型为RoutingState的IScreen.Router实例确定当前应显示哪个ViewModel。有关详细信息，请参阅View Location。基于模式匹配的最简单的IViewLocator实现可能如下所示：
namespace RoutingExample
{
public class AppViewLocator : ReactiveUI.IViewLocator
{
public IViewFor ResolveView<T>(T viewModel, string contract = null) => viewModel switch
{
FirstViewModel context => new FirstView { DataContext = context },
_ => throw new ArgumentOutOfRangeException(nameof(viewModel))
};
}
}
MainWindow.xaml.cs
这是上面声明的MainWindow.xaml的代码后台。
namespace RoutingExample
{
public class MainWindow : ReactiveWindow<MainWindowViewModel>
{
public MainWindow()
{
this.WhenActivated(disposables => { });
AvaloniaXamlLoader.Load(this);
}
}
}
App.axaml.cs
请确保在 App.axaml.cs 中初始化根视图的 DataContext。
public override void OnFrameworkInitializationCompleted()
{
if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
{
desktop.MainWindow = new MainWindow
{
DataContext = new MainWindowViewModel(),
};
}
base.OnFrameworkInitializationCompleted();
}
最后，在你的 AppBuilder 中添加 .UseReactiveUI() ：
namespace RoutingExample
{
public static class Program
{
public static void Main(string[] args)
{
BuildAvaloniaApp().StartWithClassicDesktopLifetime(args);
}
public static AppBuilder BuildAvaloniaApp() =>
AppBuilder.Configure<App>()
.UseReactiveUI()
.UsePlatformDetect()
.LogToDebug();
}
}
现在，您可以运行该应用程序并查看路由的效果！
dotnet run --framework netcoreapp2.1
