C#拖拽式流程图开发（含层级逻辑）及转C代码新手求助

Hey there! Let's tackle your two main challenges—building nested drag-and-drop logic for loops/conditionals, and converting those visual blocks into C code. As someone who's built educational coding tools before, here's a practical, beginner-friendly approach:

First, you need a way to represent the structure of your code blocks (including parent-child relationships). Start with a simple data model:

// Define the types of blocks you support
public enum BlockType { WhileLoop, IfElse, Assignment, PrintStatement }

// Each block holds its type, content, and child blocks
public class CodeBlock
{
    public BlockType Type { get; set; }
    public string Condition { get; set; } // For while/if-else
    public string Content { get; set; } // For assignments/prints
    public List<CodeBlock> ChildBlocks { get; set; } = new List<CodeBlock>();
    // Optional: For if-else, track separate branches
    public List<CodeBlock> ElseChildBlocks { get; set; } = new List<CodeBlock>();
    // Link to the UI element for visual nesting
    public FrameworkElement UiElement { get; set; }
}

Next, handle the drag-and-drop logic with a "current parent" state to track where new blocks should go:

• Keep a variable like CodeBlock _currentParent (starts as null for root-level blocks).
• When a user drops a container block (While or IfElse):
  • If _currentParent isn't null, add the new block to _currentParent.ChildBlocks and attach its UI element to the parent's nested panel.
  • Set _currentParent to this new container block—this tells your app that subsequent blocks should be nested inside it.
• When a user drops a regular block (assignment/print):
  • Add it directly to _currentParent.ChildBlocks (or root list if _currentParent is null) and place its UI element accordingly.
• Add a simple "Exit Level" button to each container block. When clicked, set _currentParent to its parent block (or null if it's a root block).

For the UI (assuming you're using WPF), visualize nesting with indentation:

• Each container block can have a vertical StackPanel where child blocks are added.
• Give child blocks a left margin (e.g., 20px) to visually show they're nested.

Here's a quick snippet for handling the Drop event:

private void Canvas_Drop(object sender, DragEventArgs e)
{
    if (e.Data.GetDataPresent(typeof(CodeBlock)))
    {
        var newBlock = (CodeBlock)e.Data.GetData(typeof(CodeBlock));
        
        if (_currentParent != null)
        {
            // Add to current parent's children
            _currentParent.ChildBlocks.Add(newBlock);
            // Add UI element to parent's nested panel
            ((StackPanel)_currentParent.UiElement.FindName("ChildPanel")).Children.Add(newBlock.UiElement);
        }
        else
        {
            // Add to root level
            _rootBlocks.Add(newBlock);
            MyCanvas.Children.Add(newBlock.UiElement);
        }

        // If this is a container, set it as the new current parent
        if (newBlock.Type is BlockType.WhileLoop or BlockType.IfElse)
        {
            _currentParent = newBlock;
        }
    }
}

Since your blocks are in a nested hierarchy, recursion is perfect for generating code. Write a method that takes a CodeBlock and returns its C code equivalent, then recursively processes child blocks.

Here's a basic implementation:

public string GenerateCCode(CodeBlock block)
{
    switch (block.Type)
    {
        case BlockType.WhileLoop:
            // Start the while loop, then add indented child code
            var whileCode = $"while ({block.Condition}) {{\n";
            foreach (var child in block.ChildBlocks)
            {
                whileCode += $"    {GenerateCCode(child)}\n"; // Indent child lines
            }
            whileCode += "}";
            return whileCode;

        case BlockType.IfElse:
            var ifCode = $"if ({block.Condition}) {{\n";
            // Add if branch children
            foreach (var child in block.ChildBlocks)
            {
                ifCode += $"    {GenerateCCode(child)}\n";
            }
            ifCode += "}";

            // Add else branch if it exists
            if (block.ElseChildBlocks.Any())
            {
                ifCode += " else {\n";
                foreach (var child in block.ElseChildBlocks)
                {
                    ifCode += $"    {GenerateCCode(child)}\n";
                }
                ifCode += "}";
            }
            return ifCode;

        case BlockType.Assignment:
            // Convert visual assignment (e.g., "x = 5") to C syntax
            return $"{block.Content};";

        case BlockType.PrintStatement:
            // Simplify printf for kids—adjust based on your tool's needs
            return $"printf(\"{block.Content}\\n\");";

        default:
            return string.Empty;
    }
}

To generate full C code from all your blocks:

var codeBuilder = new StringBuilder();
// Add basic C boilerplate (kid-friendly, optional)
codeBuilder.AppendLine("#include <stdio.h>");
codeBuilder.AppendLine("int main() {");

// Process all root blocks
foreach (var rootBlock in _rootBlocks)
{
    codeBuilder.AppendLine($"    {GenerateCCode(rootBlock)}");
}

codeBuilder.AppendLine("    return 0;");
codeBuilder.AppendLine("}");

string finalCCode = codeBuilder.ToString();

Pro tip: For kids, simplify condition inputs (e.g., let them select "x is greater than 5" from a dropdown, then map that to x > 5 in your code generator). This avoids them having to type raw expressions.

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