C#和WPF实现图形化编程 - 实现图形代码的显示

基于WPF的图形代码的显示

代码树的基本结构

上篇博客中讲解了代码树分为Expression和Statement两种基本结构，比如a+b是个二分法表达式，而c=a+b;是个赋值语句，一个Statement或者expression，可以由多个expression组成。

代码节点的显示

代码节点expression和statement都要重载相应的方法，以获取节点的结构
Expression必须重载 Descriptor Descriptor { get; }方法
Statement必须重载 Descriptor Descriptor { get; }和 BlockDescriptor BlockDescriptor { get; }方法

Descriptor是代码基本结构的数组，比如a+b，基本结构包括三部分，表达式a，+号和表达式b，表达式显示控件会根据结构数组进行显示，比如表达式a和b用文本框显示，+号用文本标签显示，这样就完成了表达式的显示。

BlockDescriptor表示语句除了第一行后面的结构。

比如for循环，语句定义是
for(init; test; update){
statement block
}
要包含init、test和update三个表达式，和一个内部循环语句，具体代码定义如下：

        public Expression Init { get; set; }
        public Expression Test { get; set; }
        public Expression Update { get; set; }
        public BlockStatement Body { get; set; } = new BlockStatement();

Descriptor要定义第一行的结构，显示三个表达式

        public override Descriptor Descriptor
        {
            get
            {
                Descriptor desc = new Descriptor();
                desc.Add(new TextItemDescriptor(this, "for", true));
                desc.Add(new TextItemDescriptor(this, "("));
                desc.Add(new ExpressionDescriptor(this, "Init", "number") { AcceptVariableDeclaration = true }) ;
                desc.Add(new TextItemDescriptor(this, ";"));
                desc.Add(new ExpressionDescriptor(this, "Test", "boolean") { IsOnlyNumberAllowed = false });
                desc.Add(new TextItemDescriptor(this, ";"));
                desc.Add(new ExpressionDescriptor(this, "Update", "number"));
                desc.Add(new TextItemDescriptor(this, ")"));
                return desc;
            }
        }

BlockDescriptor定义循环代码，

        public override BlockDescriptor BlockDescriptor
        {
            get
            {
                BlockDescriptor blockDescript = new BlockDescriptor();
                blockDescript.Add(new BlockStatementDescriptor(this, "Body"));
                return blockDescript;
            }
        }

这样Statement显示控件，根据Descritor显示第一行，然后根据BlockDescriptor显示后边结构，这样for语句就可以显示下边图片的样子。

使用WPF实现代码的显示

由于Expression和Statement显示结构式一个数组，所以可以WPF的ItemsControl来负责显示，对于每种显示基本结构，可以通过DataTemplate定义其对应的显示，
比如文本可以通过一个TextBox负责其显示

        <DataTemplate DataType="{x:Type script:TextItemDescriptor}">
            <TextBlock Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"
                       Foreground="{Binding Path=IsKeyword, Converter={StaticResource KeywordForegroundConverter}}"
                       FontWeight="{Binding Path=IsKeyword, Converter={StaticResource KeywordFontWeightConverter}}"
                       VerticalAlignment="Center" Padding="0" HorizontalAlignment="Center"
                       Focusable="False" Margin="0" Text="{Binding Path=Text}"/>
        </DataTemplate>

而表达式中的表达显示，除了显示表达式，还能能够接受表达式，也能显示文本

        <DataTemplate DataType="{x:Type script:ExpressionDescriptor}">
            <local:TextBoxExpressionHolder ExpressionDescriptor="{Binding}" BkColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/>
        </DataTemplate>

因此，我们用一个控件显示表达式（ExpressionControl），一个控件显示表达式中的表达式（TextBoxExpressionHolder），一个控件显示语句(StatementControl)，得益于WPF的属性结构（和代码树结构相同）和显示等特性，很容易实现表达式的显示和操作。

更多编辑功能的实现

作为一个图形编程编辑器，除了代码的显示，更重要的编辑，为了让编码更加简单，还需要非常多的功能，比如代码折叠、代码复制粘贴、函数调用和编辑等，所以还需要其他一些辅助类型。具体可以参考githup中的源码，代码地址WPF Blocky。实现的代码的显示、编辑、序列化和解释运行

同时，为了让图形代码更加强大，我们实现了面向对象、模块化（使用自己代码作为类库）、多线程、EV3和Arduino控制、Scratch、画板等，几乎涵盖了所有代码基础知识，也增加了很多有趣的例子，比如围棋和五子棋，让代码学习能够更加直观和有趣，可以从windows 10商店中下载使用