像块状一样实现可拖动的 UI

本文关键字：实现 拖动 UI 一样 | 更新日期: 2023-09-27 18:34:03

我目前正在开发一个允许用户编写一些脚本的应用程序。我开发了一个"编译器"来分析用户制作的脚本，但现在我想创建一个具有用户所有可能性的可视化编辑器，类似于这样： Blockly - 可视化编程编辑器 .

我目前正在使用 C#，我不知道如何开发类似上面的东西。我想过在我的DSL之上做我自己的可拖动UI，但不知道如何开始。

谢谢

像块状一样实现可拖动的 UI

对于其他试图做类似事情的 Wpf 开发人员，我不建议自己这样做，而是实际使用 Wpf 中的网页，然后通过它与 Blockly 进行通信。我向你保证，这将比实际尝试自己做这件事要容易得多。

在 Web 浏览器中使用 Blockly

如果您不想重新创建所有脚本生成代码，您还可以为 Blockly 创建自定义 xml 生成器，然后打印出连接了哪些块，如下所示：

<block>
   <whileblock repeat="20"/>
<block/>

然后破译这一点并根据连接的块从 c# 生成脚本。

Blockly 是开源的，所以请随意将其用于您的编辑器。 你真的不需要知道很多JavaScript就可以使用Blockly库，并且有一个支持小组。

对于任何偶然发现这一点的人：使用 Blazor，现在可以创建 WPF 程序并使用 razor 文件 （HTML/CSS/JS/C#） 作为 UI 说明 （https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/wpf?view=aspnetcore-7.0）

这样就可以直接在 C# 应用程序的 UI 中使用 Blockly 等 JS 函数，只需遵循 Blockly 指令 （https://developers.google.com/blockly/guides/get-started/web?hl=en） 并使用 Blazor 的 JSInterop。

您可以使用 WPF 执行此操作。使用拖放，您可以真正接近。观看此视频将帮助您了解此机制的工作原理。尝试慢慢改进它并玩它。第二步是使用列表和拖放如图所示。通过使用从鼠标位置获得的数据来进一步改进它，这里演示了一个好方法。

相关文章：