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

1. 完成WebView2基础配置与Roomle页面加载 #

你已掌握的普通网站嵌入Roomle逻辑可直接复用，将包含嵌入代码的HTML页面作为本地资源放到WPF项目中，按如下配置WebView2控件即可：

<wv2:WebView2 x:Name="RoomleWebView" 
              Source="pack://siteoforigin:,,,/你的Roomle嵌入页面路径.html"
              IsWebMessageEnabled="True"
              NavigationCompleted="RoomleWebView_NavigationCompleted"
              WebMessageReceived="RoomleWebView_WebMessageReceived"/>

IsWebMessageEnabled必须设为True，是双向通信的基础开关；NavigationCompleted事件用来确认页面加载完成后再发起通信，避免消息发送失败。

2. 实现WPF端向Roomle配置器同步参数 #

步骤1：在嵌入的HTML页面中封装公开的JS调用方法 #

直接复用你已掌握的Roomle API参数修改逻辑，封装为可供WPF调用的全局方法即可：

// 嵌入页面的全局JS代码
function syncWPFParamToRoomle(paramKey, paramValue) {
    // 此处替换为你已实现的Roomle配置参数修改逻辑
    rubensConfigurator.setParameter(paramKey, paramValue);
    rubensConfigurator.requestUpdate();
}

步骤2：WPF端修改参数后调用JS方法 #

在WPF UI参数修改的触发事件中调用WebView2的ExecuteScriptAsync方法执行上述JS方法：

// WPF后端C#代码
private async void OnWPFParamChanged(string paramKey, string paramValue)
{
    // 确保WebView2初始化完成且页面加载完毕
    if (RoomleWebView?.CoreWebView2 == null) return;
    // 构造JS执行语句并调用
    string execScript = $"syncWPFParamToRoomle('{paramKey}', '{paramValue}')";
    await RoomleWebView.ExecuteScriptAsync(execScript);
}

3. 实现Roomle配置器状态同步到WPF端 #

步骤1：在嵌入的HTML页面中监听Roomle状态变更并推送消息 #

用WebView2提供的window.chrome.webview.postMessage方法推送配置变更：

// 嵌入页面的JS代码，监听Roomle配置变更事件
rubensConfigurator.addEventListener('configChange', (latestConfig) => {
    // 序列化需要同步的配置信息发送到WPF端
    window.chrome.webview.postMessage(JSON.stringify({
        msgType: 'roomleConfigUpdate',
        payload: latestConfig
    }));
});

步骤2：WPF端接收消息并更新UI #

实现WebMessageReceived事件的处理逻辑：

private void RoomleWebView_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    string webMsg = e.TryGetWebMessageAsString();
    // 解析消息后更新WPF端UI，跨线程更新UI需用Dispatcher包裹
    // 示例：var config = JsonSerializer.Deserialize<你的配置实体类>(webMsg);
    // Dispatcher.Invoke(() => { 同步更新WPF控件的显示值 });
}

注意事项 #

• 所有跨线程更新WPF UI的操作必须用Dispatcher.Invoke包裹，避免线程冲突
• 建议所有通信消息统一格式，通过消息类型字段区分不同业务场景，方便后续功能扩展
• 确保项目引用的WebView2运行时版本与系统安装的WebView2版本兼容，避免API调用异常

内容的提问来源于stack exchange，提问作者Rabbid76