如何在 WPF WebView2 中嵌入 Roomle Rubens Configurator？

Question

我想在 Windows 桌面应用程序的 WPF 对话框中嵌入 Roomle Rubens Configurator。
我想使用 WebView2 control and have followed the instructions for Get started with WebView2 in WPF apps 创建桌面应用程序。
我也知道如何将配置器嵌入网站。可以在这里找到一个很好的文档：Embedding Integration.

我的问题是如何将它们组合在一起？

我想显示我的应用程序的 WebView 中记录的配置器并与之通信。我想在我的 WPF UI 中设置和更改参数，将参数发送到 Web 应用程序并更新视图。

Answer 1

一步一步做：

使用 WebView2 控件创建 WPF 对话框。参见 Get started with WebView2 in WPF apps
为网页内容创建资源文件夹并添加roomle-configurator-api.es.min.js。这些文件可以在这里找到：Roomle Rubens Configurator Embedding Lib.
（在示例中，文件夹的名称是 resource\wwwroot）
从这里获取快速入门 html：Embedding Integration - Copy & Paste without package manager.
在资源文件夹中创建一个 index.html 文件并粘贴快速入门指南中的内容。

建立虚拟主机名与网页资源文件夹路径的映射关系。通过本地主机设置网页视图的来源：

async private Task InitializeAsync(WebView2 webView)
{
    string hostName = "rubens.example"
    string localResourcePath = Path.Join(AppDomain.CurrentDomain.BaseDirectory, @"resource\wwwroot");

    await webView.EnsureCoreWebView2Async();
    webView.CoreWebView2.SetVirtualHostNameToFolderMapping(
        hostName, localResourcePath, CoreWebView2HostResourceAccessKind.DenyCors);
    webView.Source = new Uri($"https://{hostName}/index.html");
}

EnsureCoreWebView2Async 等待 CoreWebView2 初始化。该方法显式触发控件的 CoreWebView2 的初始化。
SetVirtualHostNameToFolderMapping 设置虚拟主机名和文件夹路径之间的映射，以通过该主机名提供给网站。

向主机应用程序添加一个事件侦听器。在下面的示例中，width 和 height 数据从事件中检索并设置为具有 configurator.extended.setParameterOfRootComponent 的根组件的相应属性:

window.chrome.webview.addEventListener('message', arg => {
    if (arg.data.width) {
        configurator.extended.setParameterOfRootComponent({ "key": "width" }, arg.data.width.toString());
    }
    if (arg.data.height) {
        configurator.extended.setParameterOfRootComponent({ "key": "height" }, arg.data.height.toString());
    }
});

将事件设置到主机应用程序：
```
public void ChangeHeight(WebView2 webView, int newHeight) =>
    webView.CoreWebView2.PostWebMessageAsJson($"{{ \"height\" : {newHeight} }}");
```
CoreWebView2.PostWebMessageAsJson 将指定的 webMessageAsJson 发布到此 WebView 中的顶级文档。
CoreWebView2.PostWebMessageAsString 发布的消息是一个简单的字符串，而不是 JavaScript 对象的 JSON 字符串表示形式。

完整示例可以在 GitHub 存储库中找到：Roomle/roomle-configurator-wpf-cs-example

如何在 WPF WebView2 中嵌入 Roomle Rubens Configurator？

How can I embed the Roomle Rubens Configurator in a WPF WebView2?

c#

wpf

window

roomle