Click here to Skip to main content
15,445,757 members
Articles / Desktop Programming / WPF
Tip/Trick
Posted 5 Oct 2014

Stats

23.9K views
1.5K downloads
31 bookmarked

The Simplest WPF Diagram Designer

Rate me:
Please Sign up or sign in to vote.
4.57/5 (11 votes)
5 Oct 2014CPOL2 min read
If you want to implement the simplest drag-n-drop diagram designer.

Introduction

In this tip, I want to share how I've implemented the simplest diagram designer using WPF and C#. In later tips, I am going to expand this project to a fully functional mind mapper application.

For the next tip, see Part 2.

Image 1

Code Structure

For now, the attached solution consists of only 1 project - MyDesigner. It has once again only 1 simple window (to fulfill the title).

It is possible to draw using only Shape class of the WPF, but if we want better interaction between shapes, we have to introduce some wrappers - with an additional logic.

In this case, we have a base abstract class BaseShape and 2 more classes - MyShape and MyConnector who inherit from it. There is also one another shape class - MyLine, it is separate as it is 1 dimensional shape. Each line has 2 connectors which can be glued either to shape or to canvas itself.

Model class is simple for now as well. It has 3 collections - for shapes, lines and connectors - and a property for an active tool - it can be either hand to drag shapes over canvas or a line to draw new lines.

Points of Interest

C#
Panel.SetZIndex(shape, 10);

As shapes are added one after another and it is possible to overlap them, we have to organize shapes by layers. There are 3 layers. Z index = 0 for general shapes, Z index = 10 for lines and Z index = 11 for connectors. That way, Connectors are on the top and lines are above shapes.

C#
Mouse.Capture(MyCanvas);

This means that all mouse events will relate to the canvas, even if the mouse should be moved outside it. Without it, moving would be stopped as soon as mouse moved outside the canvas.

C#
var newX = currentPoint.X - shape.Width / 2;
var newY = currentPoint.Y - shape.Height / 2;

if (newX < 0) newX = 0;
if (newX + shape.Width > MyCanvas.ActualWidth) newX = MyCanvas.ActualWidth - shape.Width;

if (newY < 0) newY = 0;
if (newY + shape.Height > MyCanvas.ActualHeight) newY = MyCanvas.ActualHeight - shape.Height;

We don't want to move shapes outside the canvas so we have to restrict new coordinates.

Enum binding to the radio buttons is as described here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Australia Australia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionvote of 5 Pin
Member 1045917619-Oct-14 14:20
MemberMember 1045917619-Oct-14 14:20 
AnswerRe: vote of 5 Pin
JleruOHeP21-Oct-14 19:03
MemberJleruOHeP21-Oct-14 19:03 
QuestionMy vote of 5 Pin
EveryNameIsTakenEvenThisOne5-Oct-14 20:50
professionalEveryNameIsTakenEvenThisOne5-Oct-14 20:50 
AnswerRe: My vote of 5 Pin
_Noctis_5-Oct-14 22:20
professional_Noctis_5-Oct-14 22:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.