avalonia_使用ReactiveUI和Avalonia在跨平台.NET Core GUI应用程序中将路由状态保存到磁盘

avalonia

User interfaces of modern enterprise applications are quite complex. You, as a developer, often need to implement in-app navigation, validate user input, show or hide screens based on user preferences. For better UX, your app should be capable of saving state to the disk when the app is suspending and of restoring state when the app is resuming.

现代企业应用程序的用户界面非常复杂。 作为开发人员，您通常需要实现应用内导航，验证用户输入，根据用户偏好显示或隐藏屏幕。 为了获得更好的用户体验，您的应用应该能够在应用处于挂起状态时将状态保存到磁盘上，并在应用恢复时恢复状态。

ReactiveUI provides facilities allowing you to persist application state by serializing the view model tree when the app is shutting down or suspending. Suspension events vary per platform. ReactiveUI uses the Exit event for WPF, ActivityPaused for Xamarin.Android, DidEnterBackground for Xamarin.iOS, OnLaunched for UWP.

ReactiveUI提供的功能使您可以在应用程序关闭或挂起时通过序列化视图模型树来保持应用程序状态。 暂停事件因平台而异。 ReactiveUI对WPF使用Exit事件，对Xamarin.Android使用ActivityPaused对于DidEnterBackground使用DidEnterBackground，对于UWP使用OnLaunched 。

In this tutorial we are going to build a sample application which demonstrates the use of the ReactiveUI Suspension feature with Avalonia — a cross-platform .NET Core XAML-based GUI framework. You are expected to be familiar with the MVVM pattern and with reactive extensions before reading this note. Steps described in the tutorial should work if you are using Windows 10 or Ubuntu 18 and have .NET Core SDK installed. Let's get started!

在本教程中，我们将构建一个示例应用程序，该应用程序演示ReactiveUI Suspension功能与Avalonia的结合使用-Avalonia是一个跨平台的基于.NET Core XAML的GUI框架。 在阅读本说明之前，您应该先熟悉MVVM模式和响应式扩展 。 如果您使用的是Windows 10或Ubuntu 18并且安装了.NET Core SDK，则本教程中描述的步骤应该可以使用。 让我们开始吧！

引导项目 (Bootstrapping the Project)

To see ReactiveUI routing in action, we create a new .NET Core project based on Avalonia application templates. Then we install the Avalonia.ReactiveUI package. The package provides platform-specific Avalonia lifecycle hooks, routing and activation infrastructure. Remember to install .NET Core and git before executing the commands below.

若要查看实际的ReactiveUI路由，我们基于Avalonia应用程序模板创建一个新的.NET Core项目。 然后，我们安装Avalonia.ReactiveUI软件包。 该软件包提供了特定于平台的Avalonia生命周期挂钩， 路由和激活基础结构。 执行以下命令之前，请记住先安装.NET Core和git 。

git clone https://github.com/AvaloniaUI/avalonia-dotnet-templates
git --git-dir ./avalonia-dotnet-templates/.git checkout 9263c6b
dotnet new --install ./avalonia-dotnet-templates 
dotnet new avalonia.app -o ReactiveUI.Samples.Suspension 
cd ./ReactiveUI.Samples.Suspension
dotnet add package Avalonia.ReactiveUI
dotnet add package Avalonia.Desktop
dotnet add package Avalonia

Let's run the app and ensure it shows a window displaying "Welcome to Avalonia!"

让我们运行该应用程序，并确保它显示一个显示“欢迎使用Avalonia！”的窗口。

# Use .NET Core version which you have installed.
# It can be netcoreapp2.0, netcoreapp2.1 and so on.
dotnet run --framework netcoreapp3.0

从MyGet安装Avalonia预览版 (Installing Avalonia Preview Builds from MyGet)

Latest Avalonia packages are published to MyGet each time a new commit is pushed to the master branch of the Avalonia repository on GitHub. To use the latest packages from MyGet in our app, we are going to create a nuget.config file. But before doing this, we generate an sln file for the project created earlier, using .NET Core CLI:

每次将新提交提交到GitHub上Avalonia存储库的master分支时，最新的Avalonia软件包就会发布到MyGet 。 要在我们的应用程序中使用MyGet的最新软件包，我们将创建一个nuget.config文件。 但是在执行此操作之前，我们使用.NET Core CLI为先前创建的项目生成一个sln文件：

dotnet new sln # Ctrl+C
dotnet sln ReactiveUI.Samples.Suspension.sln add ReactiveUI.Samples.Suspension.csproj

Now we create the nuget.config file with the following content:

现在，我们创建具有以下内容的nuget.config文件：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="AvaloniaCI" value="https://www.myget.org/F/avalonia-ci/api/v2" />
  </packageSources>
</configuration>

Usually, a restart is required to force our IDE to detect packages from the newly added MyGet feed, but reloading the solution should help as well. Then, we upgrade Avalonia packages to the most recent version (or at least to 0.9.1) using the NuGet package manager GUI, or .NET Core CLI:

通常，需要重新启动以强制我们的IDE从新添加的MyGet feed中检测软件包，但是重新加载解决方案也应该有所帮助。 然后，我们使用NuGet包管理器GUI或.NET Core CLI将Avalonia包升级到最新版本(或至少升级到0.9.1 )：

dotnet add package Avalonia.ReactiveUI --version 0.9.1
dotnet add package Avalonia.Desktop --version 0.9.1
dotnet add package Avalonia --version 0.9.1
cat ReactiveUI.Samples.Suspension.csproj

The ReactiveUI.Samples.Suspension.csproj file should look somewhat like as follows now:

ReactiveUI.Samples.Suspension.csproj文件现在应如下所示：

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>netcoreapp3.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <Compile Update="**\*.xaml.cs">
      <DependentUpon>%(Filename)</DependentUpon>
    </Compile>
    <AvaloniaResource Include="**\*.xaml">
      <SubType>Designer</SubType>
    </AvaloniaResource>
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="Avalonia" Version="0.9.1" />
    <PackageReference Include="Avalonia.Desktop" Version="0.9.1" />
    <PackageReference Include="Avalonia.ReactiveUI" Version="0.9.1" />
  </ItemGroup>
</Project>

We create two new folders inside the project root directory, named Views/ and ViewModels/ respectively. Next, we rename the MainWindow class to MainView and move it to the Views/ folder. Remember to rename references to the edited class in the corresponding XAML file, otherwise, the project won't compile. Also, remember to change the namespace for MainView to ReactiveUI.Samples.Suspension.Views for consistency. Then, we edit two other files, Program.cs and App.xaml.cs. We add a call to UseReactiveUI to the Avalonia app builder, move the app initialization code to the OnFrameworkInitializationCompleted method to conform Avalonia application lifetime management guidelines:

我们在项目根目录内创建两个新文件夹，分别名为Views/和ViewModels/ 。 接下来，我们将MainWindow类重命名为MainView并将其移至Views/文件夹。 请记住在相应的XAML文件中重命名对已编辑类的引用，否则，该项目将无法编