DiagramConnectionPoint's ZIndex support

Hi,

Previously I did request for an update on Diagram to support rendering of ConnectionPoints with layering(using ZIndex or any other alternative). This is critical for us because our node might contains many ConnectionPoints on one edge, and it basically stacks on each other and make it very hard to create connections. Our initial idea was to stack them but with different ZIndex dynamically. So whenever user mouse over a particular ConnectionPoint, the hovered ConnectionPoint will appear top-most, this should solve the issue. It would be great if you could advice me on this update. Or anyway to workaround it?

Thanks.

Hello

I have attached a sample of how you could achieve dynamically changing the ZOrder of connection points on a node. To run the sample, make sure to include a reference to your copy of the Mindscape.WpfDiagramming.Foundation.dll. This sample does not require a nightly build meaning you can implement this as soon as you can.

If you run up the sample, the diagram will display a single node with three connection points on the bottom edge. If you move the mouse over the node, you will only see one connection point because they are all stacked on top of each other. Press the button under the diagram and then move the mouse over the node again. The button cycles the Z order of the 3 connection points, so now you will see a different connection point. (The connections points each have a different color to make this more clear).

To achieve this functionality, I created a CustomConnectionPoint that extends DiagramConnectionPoint and added a ZOrder property. Make sure this property raises property changed notifications in the setter. In App.xaml I have a custom node element style. You should have seen this before and probably have something similar in your application. This is a copy of the generic DiagramNodeElement style. The magic happens at line 66 where I use a setter on the ItemContainerStyle that displays each connection point. This sets the Panel.ZIndex attached property using a binding to the ZOrder property on the custom connection point. And that's basically it. All the rest of the code in the sample is for displaying a node with 3 points, and giving each point a different color using the ConnectionPointTemplateMatcher.

Let me know if you have any questions about implementing this.

Jason Fauchelle

Hi,

Now only I found this, after I tried out.

Here is the problem I found:

I can achieve the effects of changing ZIndex by clicking button to trigger the ZOrder changes, However, I can't find a way to change the ZOrder on MouseOver. :/ Any idea to change ZOrder dynamically when user MouseOver on any specific ConnectionPoint?

Hello

The simplest solution is to include a trigger in the ItemContainerStyle of the connection point panel. In the demo I posted, the DiagramNodeElementStyle displays the connection points in an ItemsControl. In the ItemContainerStyle (lines 64-84) of this ItemsControl add this trigger:

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Panel.ZIndex" Value="100" />
    </Trigger>
</Style.Triggers>

Also, make sure to set the TargetType of the style (line 64) to be TargetType="{x:Type ContentPresenter}" so that the IsMouseOver property can be resolved.

This trigger simply checks to see if the mouse is over the connection point, and if so, increases the ZIndex to a value that should display it topmost. If this is the only ZIndex logic you need, then you probably don't actually need the ZOrder property on the connection point model objects.

Let me know if you need further help with this.

Jason Fauchelle