C
C#4mo ago
oke

Drag-And-Drop Environment Like NeetCode Roadmap or Scratch

I'm incredibly new to WPF. I'm trying to make an app with WPF .NET Core, and want to make an "environment" in the bottom right section of a grid. The items are just boxes that look neat and will hold text information, maybe even an icon or two. At this stage in development, I'm aiming for a functioning app before I get into snapping on all four sides to create larger blocks and such. But this is tricky being so new to WPF as I don't know what to do. Is there an element that's already available to create this? Or would I need to create all elements on my own? Thanks ~~~ I found this repo for an actual Scratch clone, but with WPF: https://github.com/weihuajiang/WPF-Blockly it's just that it is an actual code maker. I'm going to go through it and see if there's anything I can use.
GitHub
GitHub - weihuajiang/WPF-Blockly: A WPF based visual programming ed...
A WPF based visual programming editor and execution engine, which support all the code syntax (including module and object oriented programming), and even you can define your own syntax. - GitHub ...
8 Replies
Denis
Denis4mo ago
So you want some sort of diagramming UI component? Not sure, maybe nodify might be what you are looking for If that is for an opensource project/you are a student, you can get commercial UI components from Syncfusion for free They offer a diagramming control; however, it is not a node editor. Solely for creating diagrams
oke
oke4mo ago
I'm just worried I'll need to almost virtualize this environment by coming up with the math myself for dragging the environment and the blocks. I've done C# for a while, but my math skills aren't up to par with CPUs.
Denis
Denis4mo ago
Drag drop in wpf isn't that difficult Especially when doing do within one application A custom solution would require you to use a canvas control But I highly suggest figuring out what is the name of the control type you ate looking for It probably already exists And remember diagramming control != node editor
oke
oke4mo ago
it doesnt need to be a node (with child) editor like in scratch where one note encloses another this is going to be an app for assisting with class seating charts, so it just need to be literal blocks (or desks) that can be moved around im stroking out thinking of what to do for the environment feel what about using a desktop blazor app instead and using html/css?
br4kejet
br4kejet4mo ago
If you're struggling with the math in terms of actually positioning the squares:
int PixelToSquare(double pixel, double squareSize) => (int) Math.Round(pixel / squareSize);
double SquareToPixel(int square, double squareSize) => (double) square * squareSize;
int PixelToSquare(double pixel, double squareSize) => (int) Math.Round(pixel / squareSize);
double SquareToPixel(int square, double squareSize) => (double) square * squareSize;
oke
oke4mo ago
Mostly, but I'm mostly talking about being able to move in the environment. the closest things for me to compare are both neetcode's roadmap and scratch
br4kejet
br4kejet4mo ago
Then in your tile grid control, you'd process the mouse drop, convert the pixels into square positions, then do what you want from there Move as in moving the tiles? squares/tiles? Oh like scratch oop
oke
oke4mo ago
yes because you can pan around like a game map im gonna try with the blazor rq because both of my references were made with html/css, so theres gotta be a library for it