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

Stats

27.3K views
1.2K downloads
26 bookmarked

The Simplest WPF Diagram Designer - Part 2

Rate me:
Please Sign up or sign in to vote.
4.37/5 (7 votes)
12 Oct 2014CPOL2 min read
Added text, resize operation and a color picker to a designer

Introduction

In the previous part, I've shown how to build the simplest designer - drag and drop shapes on canvas. Now it is time to make it a little more complex. I will add the option to resize shapes, add the text to shapes and change their color.

Image 1

Resize

That is the biggest change. Previously, I had a simple Shape class to represent shapes in MyBase but now to implement resizing (and add resize thumbs at corners), we need to create a user control for it. It is called ShapeContainer and consists of a Grid 3x3, with a ResizeThumbs at the corners and the main shape in the centre. Everything is quite straightforward and accessible from the code. However, there are few points of interest.

The main one is that with resizing to the left or top, we have to not only change the shape's size but as well move the shape itself accordingly. And in that case, we have to recalculate the attached connector`s coordinates as well. To do it, the ShapeContainer has to implement INotifyPropertyChanged and override its Width and Height properties. Relevant code can be found at MyShape.container_PropertyChanged.

Another point is that for drag operation, now we have to check the original source of the event. If it is a ResizeThumb control, then the drag operation is invalid as it is possible to resize the shape in a wrong manner.

And as an icing on the cake, we can now change the behaviour of the IsSelected property. It will change the color of the connector as before, but for actual shapes, it will show or hide the corresponding thumbs.

Text

As we have changed the control of the MyShape class, it is really simple. We need to add 2 controls to the grid: label to show the text and textbox to edit it.

C#
public void EditText()
{
    Label.Visibility = Visibility.Hidden;
    EditableText.Visibility = Visibility.Visible;
    EditableText.Text = Text;

    EditableText.Focus();
}

This public method is called to start the editing - just show the textbox while hiding the label. The last point here is to publish a TextChanged event...

C#
public event Action TextChanged;

...in order to save the changes from the control back to the model.

Color

In my blog, I have described how I`ve done elliptic menu (here). But in this project, I've decided to use the Microsoft.Expression.Drawing assembly and the Arc control from it to draw the ring. To create a whole pallet, I've used 7 arc segments with linear gradients: Red -> Orange -> Yellow -> Green -> Cyan -> Blue -> Magenta -> Red. And to find out what is the color under the mouse pointer, I have to render my control to the RenderTargetBitmap and if the mouse is over the ring - copy pixel information.

Probably, the only tricky part here is to remember the circle formula and to get the mouse position before the rearrangement of the control (you have to do it or it is possible to get the black rectangle as a result):

C#
var point = Mouse.GetPosition(element);

element.Measure(new Size(element.Width, element.Height));
element.Arrange(new Rect(new Size(element.Width, element.Height)));
element.UpdateLayout();

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

 
Questionhi, how can I select a line not a connector at runtime in this simple diagram designer Pin
Member 1158978017-Aug-15 22:19
MemberMember 1158978017-Aug-15 22:19 
Questionthanks , and i need to know how to rotate the shapes in the canvas at runtime and serialize its angle Pin
Member 1157492628-Jul-15 22:31
MemberMember 1157492628-Jul-15 22:31 
QuestionGood idea to build your editor Pin
Laval Philippe14-Oct-14 7:12
MemberLaval Philippe14-Oct-14 7:12 
QuestionI did one too ... Pin
Serge Desmedt13-Oct-14 8:19
professionalSerge Desmedt13-Oct-14 8:19 
AnswerRe: I did one too ... Pin
JleruOHeP13-Oct-14 12:14
MemberJleruOHeP13-Oct-14 12:14 
QuestionI did a WPF diagram designer a while back to Pin
Sacha Barber12-Oct-14 22:04
MemberSacha Barber12-Oct-14 22:04 
AnswerRe: I did a WPF diagram designer a while back to Pin
JleruOHeP12-Oct-14 22:53
MemberJleruOHeP12-Oct-14 22:53 
GeneralRe: I did a WPF diagram designer a while back to Pin
Dirk Bahle13-Oct-14 7:30
MemberDirk Bahle13-Oct-14 7:30 
GeneralRe: I did a WPF diagram designer a while back to Pin
JleruOHeP13-Oct-14 12:12
MemberJleruOHeP13-Oct-14 12:12 

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.