Hi Stoyo

I modified your custom node creation from template file to have a following look.


As you see in the image, the node is having two colors. This is done by having two nested grids in the template.
The outer grid is having 3 rows and 3 columns. The inner grid is placed in 2nd row and 2nd column.

To show the anchor points, I overide two function,
AddHandlesToCanvas and UpdateVisuals as discussed in one of my topic posted previously.
The anchor points are adjusted such that they will either add/remove some offset value from top,left and right, bottom values of shape node to show anchor point inside the node.

The offset is having the value for the 1st and last row,column of the outer grid.

Here when I try to resize the shape by picking one of the anchor point, my mouse cursor move to the actual corner of the shape.

I guess, since i can provide my anchor point, when resizing mouse cursor should retain its position.

I want to implement something like shown in following 5 min demo -[ Please click on the demo link on the page]
http://www.bizagi.com/index.php?option=com_content&view=article&id=15&catid=5&It...

Regards
Rajesh

Hi Stoyo

Thanks for the reply. Your suggested method is so cool.

Will you provide me a template in which I can display a border when the mouse is moved to the shapes canvas/shape itself and when mouse is out of canvas/shape the border is hidden.

Regards
Rajesh

Hi Rajesh,

Are you attaching MouseEnter and Leave events to the node, or to the Rectangle object?

Stoyan

Hi Rajesh,

Attaching them to the node seems to work fine:

1. In the page code-behind:

node1.MouseEnter += new System.Windows.Input.MouseEventHandler(OnNodeMouseEnter);
node1.MouseLeave += new System.Windows.Input.MouseEventHandler(OnNodeMouseLeave);
...

void OnNodeMouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
	var node = (OrgChartNode)sender;
	var outerRect = node.GetOuterRect();
	if (outerRect != null)
		outerRect.Fill = new SolidColorBrush(Colors.Blue);
}

void OnNodeMouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
	var node = (OrgChartNode)sender;
	var outerRect = node.GetOuterRect();
	if (outerRect != null)
		outerRect.Fill = new SolidColorBrush(Colors.Red);
}
 

2. In the template:

<Rectangle x:Name="OuterRect" ...
 

3. In the derived node class:

public Rectangle GetOuterRect()
{
	return GetTemplateChild("OuterRect") as Rectangle;
}
 

I hope that helps,
Stoyan

Hi Stoyo

Will you provide me solution for the above issue. Please find the url in previous message.

Another issue - How i will get the event which indicates that the node gets added in the selection list and removed from the selection list.

In my example I am trying to achive following behaviour -

1. When user moves the mouse cursor on the node area, border is shown.

2. Once border is shown, user can either move the cursor on the node or rectangle ( complete canvas area) border remains visible [ Even user moves the cursor outsider the node(grid area ]

3. Case 2nd has exception : if node is selected then moving outside the node area/canvas area border is not removed until user moves cursor on another node [ Moving mouse cursor on another node keeps the previous node selected ]

4. With case 3, if user moves the mouse cursor outside the shape canvas border remains visible (node is selected) but now clicking on anywhere on the diagram area (not on any node) I want to remove the border which is shown visible.

How to handle case 4 or do I need the extra event ( node added in selection and node removed from selection).

Regards
Rajesh

Hi Stoyo

Ya. True. The code is modified from Tutorial3.

I modified the derived class and generic template.
Node1 is referred in main.xaml.cs.

To meet my requirement for all nodes of type orgchart , it gets handled from generic.xaml and orgchatnode.cs file with help of visual state.
I guess, i should not write the handler explicitiy for all nodes from main.xaml.cs explicitly.

----------------------------------------------------------
Update on the above issue :
I just re-checked my sample and it seems working with anchor point also. May be somechanges which I applied make it working.

How I resolve my last issue i.e getting the event for node gets selected and unselected in its own class.

Regards
Rajesh

Hi Stoyo

I think, you didn't get my question. Will explain it again -

With mouseenter in another node, I am able to hide the border of selected node ( using this.diagram.Selection.Item[0] )

diagram.Selection.Item[0] and this both are different node.

My concern is when node is selected, I keep the border active even mouse is moved in diagram area. Now when user clicks anywhere in the diagram, item which exists in selection collection is removed. When this item is removed from selection, I want to remove the border.

-Rajesh

I have a problem regarding Anchor Points. I have different diagram nodes and i have set anchor points as percentage points to them to set it onto the boundaries of the node. The issue is these points behaves like absolute values when i do the scaling or resizing of the node. ie The points location does not change as the size of the Node changes.

Please tell me what could be the issue.

my code is like
AnchorPattern anchorPattern = new AnchorPattern();
           anchorPattern.Points = inputAnchorPoints;

           foreach (AnchorPoint anchorPoint in anchorPattern.Points)
           {
               anchorPoint.MarkStyle = MarkStyle.Rectangle;
           }

           diagramNode.EnabledHandles = nodeControl.EnableHandles;
           diagramNode.AnchorPattern = anchorPattern;