简答
您可以使用 WPF WebBrowser 控件中的所有块状功能，包括 UI 工具和 API 函数。为此，您应该：
- 创建一个 HTML 内容，其中包含引用 Blocky
js 的 script 标记，或您想从 C# 调用的方法，以及根据您的要求（例如工具箱和工作区）所需的 HTML 和 XML 内容。您可以在运行时动态加载工具箱和工作区。
- 使用
Navigate或NavigateToString将内容加载到WebBrowser控件
- 如果您需要调用脚本，请使用
WebBrowser 控件的InvokeScript 方法。
另外，为了能够使用Blocky，您应该使WebBrowser 使用最新的文档模式而不使用兼容模式并显示现代内容。
示例
这个例子显示：
- 如何动态加载工具箱
- 如何动态加载工作区
- 如何使用 javascript 方法调用 Blocky API 方法。在示例中，您可以看到
showCode 和 runCode 代理方法，它们独立于 wprkspace 并且适用于任何工作空间。您可以从 C# 调用 javascript 方法。
例如，您可以使用Blocky Demos 中的任何一个。我创建了一个示例，展示了使用 Blocky API 方法和 Blocky UI 工具。此示例基于Generating Javascript 示例，该示例展示了如何使用 Blocky API 从 Blocky 工作区生成 javascript。
下载
您可以从以下位置克隆或下载工作示例：
逐步创建示例
该示例包含一个简单的 HTML 文件，在其 head 标签中添加了所需的 javascript 文件。它还包含两个我们创建的从 C# 调用的代理方法。
该示例还包含两个 xml 文件。为 Blocky 工作区打开，为工具箱打开一个。
注意：创建这些文件不是强制性的，您可以在运行时动态创建工作区或工具箱。这只是为了表明您可以在运行时加载工作区和工具箱，它们不需要是静态的。
1) 创建 WPF 应用程序
创建一个 WPF 项目并将其命名为 WpfAppllicatin1。
2) 创建blockyWorkspace.xml 文件
使用以下内容创建blockyWorkspace.xml 文件。该文件将用于创建 Blocky 工作区。
<xml>
<block type="controls_if" inline="false" x="20" y="20">
<mutation else="1"></mutation>
<value name="IF0">
<block type="logic_compare" inline="true">
<field name="OP">EQ</field>
<value name="A">
<block type="math_arithmetic" inline="true">
<field name="OP">ADD</field>
<value name="A">
<block type="math_number">
<field name="NUM">6</field>
</block>
</value>
<value name="B">
<block type="math_number">
<field name="NUM">7</field>
</block>
</value>
</block>
</value>
<value name="B">
<block type="math_number">
<field name="NUM">13</field>
</block>
</value>
</block>
</value>
<statement name="DO0">
<block type="text_print" inline="false">
<value name="TEXT">
<block type="text">
<field name="TEXT">Don't panic</field>
</block>
</value>
</block>
</statement>
<statement name="ELSE">
<block type="text_print" inline="false">
<value name="TEXT">
<block type="text">
<field name="TEXT">Panic</field>
</block>
</value>
</block>
</statement>
</block>
</xml>
3) 创建blockyToolbox.xml 文件
使用以下内容创建blockyToolbox.xml 文件。该文件将用于创建 Blocky 工具箱。
<xml>
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
4) 创建blockyHTML.html 文件
使用以下内容创建blockyHTML.html 文件。该文件仅包含对 Blocky 脚本的引用以及我们的 javascript 方法，这些方法将使用 C# 代码从我们的应用程序中调用：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<script src="https://blockly-demo.appspot.com/static/blockly_compressed.js"></script>
<script src="https://blockly-demo.appspot.com/static/blocks_compressed.js"></script>
<script src="https://blockly-demo.appspot.com/static/javascript_compressed.js"></script>
<script src="https://blockly-demo.appspot.com/static/msg/js/en.js"></script>
</head>
<body>
<div id="host" style="height: 480px; width: 600px;"></div>
<script>
var workspace;
function init(toolboxXML, workspaceXML) {
workspace = Blockly.inject('host',
{ media: '../../media/', toolbox: toolboxXML });
var wx = Blockly.Xml.textToDom(workspaceXML)
Blockly.Xml.domToWorkspace(wx, workspace);
}
function showCode() {
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
var code = Blockly.JavaScript.workspaceToCode(workspace);
return code;
}
function runCode() {
window.LoopTrap = 1000;
Blockly.JavaScript.INFINITE_LOOP_TRAP =
'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
var code = Blockly.JavaScript.workspaceToCode(workspace);
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
try { eval(code); } catch (e) { alert(e); }
}
</script>
</body>
</html>
5) 编写 C# 代码
放置一个WebBrowser 控件并将其命名为browser 并处理其LoadCompleted 事件。还要在窗口上放置两个Button 控件并将它们命名为showCodeButton 和runCodeButton 并像这样处理它们的Click 事件：
public MainWindow()
{
InitializeComponent();
showCodeButton.IsEnabled = false;
runCodeButton.IsEnabled = false;
browser.NavigateToString(System.IO.File.ReadAllText(@"d:\blockyHTML.html"));
}
private void browser_LoadCompleted(object sender, NavigationEventArgs e)
{
showCodeButton.IsEnabled = true;
runCodeButton.IsEnabled = true;
var toolboxXML = System.IO.File.ReadAllText(@"d:\blockyToolbox.xml");
var workspaceXML = System.IO.File.ReadAllText(@"d:\blockyWorkspace.xml");
//Initialize blocky using toolbox and workspace
browser.InvokeScript("init", new object[] { toolboxXML, workspaceXML });
}
private void showCodeButton_Click(object sender, RoutedEventArgs e)
{
var result = browser.InvokeScript("showCode", new object[] { });
MessageBox.Show(result.ToString());
}
private void runCodeButton_Click(object sender, RoutedEventArgs e)
{
browser.InvokeScript("runCode", new object[] { });
}
6) 运行应用程序
当您运行应用程序时，在启用按钮后，单击第一个按钮，然后您可以得到 showCode 方法的结果，该方法使用块 API 从块工作区生成 javascript 代码。
您还可以通过单击第二个按钮来运行您使用 blocky 创建的代码。