Drawing controls/library guide

Answered (Verified) This post has 1 verified answer | 8 Replies | 2 Followers Thread's RSS feed.

Jyotika S
Points 110
Replied On: Fri, Jun 2 2017 9:35 AM Reply

I have requirement to have a window/page that will support

background Image, Ruler, zoom functionality , draw points (add, remove and move points)

draw lines and able to join lines to points.

I have attached an image gives rough idea.

Which controls/ library can I use to achieve this?

Thanks you


  • Post Points: 20

Verified Answer

MartinT
Points 1,330
Infragistics Employee
Answered (Verified) Replied On: Mon, Jun 12 2017 12:18 PM Reply
Verified by Jyotika S

Actually, using XamDataChart as a ruler for XamDiagram control is not good idea because converting from coordinate system of XamDiagram to XamDataChart will result in incorrect values. However, I implemented a diagram ruler in application code which shows accurate coordinates of XamDiagram control. Also, I added some comments and suggestions that you can improve upon. Please up vote this feature request if you would like to see these rulers implemented in XamDiagram with better performance and more customization. 

  • Post Points: 20

All Replies

MartinT
Points 1,330
Infragistics Employee
Replied On: Mon, Jun 5 2017 7:06 PM Reply

Hello Jyotika,

You can achieve your requirements using XamDiagram to draw and edit shapes and XamDataChart to show a ruler around the plot area of the XamDiagram. I attached sample app that demonstrates how to do this.

Let me know if you have more questions about these controls.

  • Post Points: 20
Jyotika S
Points 110
Replied On: Thu, Jun 8 2017 12:42 PM Reply

Thank you for sample app.

Somehow node position values are not correctly presented by chart ruler.

I like to understand how xamdatachart is related to xamdiagram in terms of coordinates.

What is the relation between XamDataChart WindowRect and XamDiagram WindowRect,WorldRect and ViewportRect.

Thanks again

  • Post Points: 20
MartinT
Points 1,330
Infragistics Employee
Answered (Verified) Replied On: Mon, Jun 12 2017 12:18 PM Reply
Verified by Jyotika S

Actually, using XamDataChart as a ruler for XamDiagram control is not good idea because converting from coordinate system of XamDiagram to XamDataChart will result in incorrect values. However, I implemented a diagram ruler in application code which shows accurate coordinates of XamDiagram control. Also, I added some comments and suggestions that you can improve upon. Please up vote this feature request if you would like to see these rulers implemented in XamDiagram with better performance and more customization. 

  • Post Points: 20
Jyotika S
Points 110
Replied On: Thu, Jun 15 2017 1:10 PM Reply

Hi there,

Thanks you again for updated sample app, ruler works as expected. Some question regarding my requirements.

1 Feeling I am getting from using XAMDiagram is that it supports nodes and connections and a node can be  connected to a connection.

  Is it possible to connect connection with connection? Or introduce custom type ? My requirement is to create a circuit and draw segments, It means

  I want to connect connections edges with lines. (a Line that will snap to connection edges) 

2. How to hide square boxes displayed at the end of connection when it is selected

Thank You

  

  • Post Points: 20
MartinT
Points 1,330
Infragistics Employee
Replied On: Fri, Jun 16 2017 6:50 PM Reply


The DiagramConnection does not provide ConnectionPoints property like DiagramNode does and therefore you cannot snap one DiagramConnection to another DiagramConnection. I suggest you to submit feature request on our website: http://ideas.infragistics.com/forums/192363-wpf

That being said, you can partially achieve what you need by defining LineGeomerty for a custom DiagramNode and then specify ConnectionPoints:
<GeometryGroup x:Key="VerticalLine">
            <LineGeometry StartPoint="0,0" EndPoint="0,10"  />  
</GeometryGroup>

<ig:DiagramConnectionPointCollection x:Key="VerticalLineConnections">
     <ig:DiagramConnectionPoint Position="0.5,0.0" Name="c0" />
     <ig:DiagramConnectionPoint Position="0.5,0.25" Name="c1" />
     <ig:DiagramConnectionPoint Position="0.5,0.50" Name="c2" />
     <ig:DiagramConnectionPoint Position="0.5,0.75" Name="c3" />
     <ig:DiagramConnectionPoint Position="0.5,1.0" Name="c4" />
  </ig:DiagramConnectionPointCollection>

<ig:DiagramNode Width="1" Height="25" Stroke="Red"
                MaintainAspectRatio="False" StrokeThickness="1"
                ConnectionPoints="{StaticResource VerticalLineConnections}"
                Geometry="{StaticResource VerticalLine}"/>


This way you can connect any DiagramConnection to above DiagramNode. However, you will not be able to re-position StartPoint and EndPoint of the VerticalLine in free-mode as you can with starting/ending points of DiagramConnection.

As questions #2, Diagram controls does not provide a way to hide square boxes displayed at the end of connection when it is selected, because they allow end-users to re-position of starting/ending points.

  • Post Points: 35
Jyotika S
Points 110
Replied On: Mon, Jun 19 2017 8:47 AM Reply

Thank you very much for your help. I am going to ask for new features like ruler and connection to connection support.

  • Post Points: 5
Jyotika S
Points 110
Replied On: Mon, Jun 19 2017 8:49 AM Reply

Is there print support in XAMDiagram ?

Many Thanks

  • Post Points: 20
MartinT
Points 1,330
Infragistics Employee
Replied On: Tue, Jun 20 2017 11:25 AM Reply

The XamDiagram does not support print functionality at this moment but you can up vote this feature request here.

That being said, you can implement a workaround by creating an image out of the xamDiagram, and print it instead.

  • Post Points: 5
Page 1 of 1 (9 items) | RSS