基于 Angular UI 构建 C# 跨平台桌面应用

现代用户体验已成为桌面应用的基础要求，采用 Web 技术能帮助团队更快交付软件。

本文将展示基于 C# 的桌面应用架构，其用户界面采用 Angular 实现。该应用支持离线运行且无需本地服务器。

为什么在桌面应用中使用 Web UI？

Web UI 技术栈拥有庞大且经过充分验证的组件生态系统。采用 Angular 构建桌面 UI，可借助熟悉的工具处理布局、主题和交互逻辑，避免在原生 UI 框架中重复实现相同控件。

这种方式同时简化了代码复用流程。同一个 Angular 应用既能在浏览器中运行，也能嵌入桌面应用宿主程序，大幅减少代码冗余，实现 UI 变更的集中管理。原生窗口与系统集成的工作由独立模块负责，Web 层保持可移植性，桌面应用则能与各个操作系统实现无缝集成。

C# 桌面应用中的 Web UI

本文将构建一个跨平台的 Avalonia 桌面应用，其 UI 是一个基于 Angular 的简单偏好设置界面。Angular Web 应用被打包进桌面程序中，而 .NET 端负责将设置保存到持久化存储中。

UI 使用了 PrimeNG 作为现成的 Angular 组件库，但在该架构下，任何类似的组件库都可以使用。

将网页界面嵌入桌面壳层时，需克服以下障碍：

1. 需采用符合现代网页标准的可靠网页视图组件。
2. 需实现无服务器环境下的网页内容加载，确保应用自包含性。
3. 需建立 JavaScript 与 .NET 之间的双向通信机制。

后续章节将依次说明：窗口与网页视图的配置方案、无服务器加载 Angular UI 的实现方法，以及通过 OpenAPI 规范定义的接口连接 JavaScript 与 .NET 的具体方案。

应用窗口与网页视图

对于桌面壳层，我们使用 Avalonia 创建原生窗口和布局，并通过 DotNetBrowser（基于 Chromium 的跨平台网页视图组件）将其嵌入其中：

MainWindow.axaml

<Window Title="Angular Demo">
    <Grid>
        <app:BrowserView x:Name="BrowserView" />
    </Grid>
</Window>

在后端代码中，窗口会监听生命周期事件，并在打开时初始化浏览器组件：

MainWindow.axaml.cs

public partial   :  {
       Url = ResourceRequestHandler.Domain;
     IBrowser? Browser { ; ; }
     IServiceProvider? ServiceProvider { ; ; }

     {
        InitializeComponent();
        Opened += OnOpened;
        Closed += OnClosed;
    }

     {
        Browser = ServiceProvider.GetRequiredService<IEngineService>().CreateBrowser();
        BrowserView.InitializeFrom(Browser);
         Browser.Navigation.LoadUrl(Url);
    }

     {
        Browser?.Dispose();
    }
}