Hi,
I’m adding grouping functionality to my flow diagram (WPF),
and I have a problem with group rendering. For some reason the border surrounding the group is to big.
This is my group template:
<Expander Margin=“0” IsExpanded="{Binding Path=Group.IsExpandedSubGraph, Mode=TwoWay}"
Header="{Binding Path=Data.Name}"
go:Node.LocationElementName=“myGroupPanel”>
<Expander.HeaderTemplate>
</Expander.HeaderTemplate>
<go:GroupPanel x:Name=“myGroupPanel” Padding=“0”/>
My expected result is this:
Thanks
Is there a reason you set the Height and Margin on the Border?
Oh, sorry for that - the height and margin is there just for demonstrating the expected result. The problematic screenshot is when I don’t set the height.
How are you implementing the connection between the last “Item” and the “End” node? Are there actually two links?
Is there a zero-sized node there at the bottom of the group? And does the bottom link connect the group to the “End” node?
Or is there just a single Link from the last “Item” to the “End” node, with an extra arrowhead in the middle?
Maybe I should be asking: what are the logical relationships between all of the model data? And do you want things to appear different from what the model has?
Yes, there are actually two “dummy” zero sized start/end nodes in each group, to allow the user to drop nodes onto the links so that they will be the first/last nodes in the group.
I first tried to implement this functionality with this model:
Start_node -> node_A -> group_1(top port) -> group_member1 -> group_member2 -> group_1(bottom port) -> node_b -> end_node
However with these links the diagram looked like a total mess… So now the group node is not linked at all, just surrounds the member nodes, using this model:
Start_node -> node_A -> group_start(dummy) -> group_member1 -> group_member2 -> group_end(dummy) -> node_b -> end_node
Each group/subgraph should appear exactly like the model.
At the moment I solved it using binding on the height property with a converter (number of child nodes to height), but i don’t like this solution.
Moreover, sometimes (after several add/remove nodes) the groups are “messed-up” again, although the model (links and nodes) seems the same - still trying to figure out
the cause. see example:
(In the image I’ve set the dummy start/end nodes to be visible).
I suspect the problem is that the diagram layout is not realizing that it ought to be working on groups as part of the whole diagram, not as separate pieces. That’s because your graph isn’t connecting to the group itself, but to member nodes of the group.
As an experiment, try setting Group.Layout="{x:Null}".
(And don’t bind the Height or Margin.)
Another solution would be to customize the layouts so that links that cross a group boundary connect to the group, not to the individual member nodes.
Hey, I’ve tried Group.Layout="{x:Null}" - still no luck.
I don't mind connecting the nodes to the group itself, but i couldn't got it to behave like I wanted (in the second image above) - basically like the flowgrammar sample, only with groups.
Is there a way to make it look like it by connecting the group itself?
The wierdest thing is that the same model (links & nodes) appears good if the first thing i do is create the group, but if i first create and remove some nodes and only then create the group - it's a mess:
BTW - when the group is collapsed, everything looks great. Any idea what could be the problem?
Thanks in advance
In the past, most people who do what you seem to want have the subgraph be completely disconnected from the graph that contains the group. I think you have already made steps toward that by having explicit “start” and “end” nodes inside the group. Typically these nodes are visible; often they are arranged near the edges of the group. But they don’t need to be: having invisible nodes on the top and bottom edges should be fine.
But the nodes outside of the group would have links that connect directly to the group, not to a member node inside the group. This gives flexibility in the layout that is used by the group, because the Group.Layout can be whatever you want instead of just a part of the Diagram.Layout.
That was my direction in the first place (to connect nodes to the group itself, and not to its members), but that resulted in this behavior:
=> the groups are always after the 'End' node when expanded (again, when collapsed everything works great).
Maybe I'm missing some property in the layout?
My current layout is this:
<go:Diagram.Layout>
<go:TreeLayout Conditions="All" Angle="90"
LayerSpacing="50" TreeStyle="Layered"/>
</go:Diagram.Layout>
That looks like the group is not part of the tree – it appears to be a separate tree consisting of the group as its only node.
Saying Conditions=“All” is a bit excessive but should work. Is your Group.Layout similar? You’ll want the GroupPanel.Padding Top and Bottom values to be zero.
Works! Thanks again, you always come through with a solution.
All I needed to do was to set the Group.Layout the same as the diagram's layout, although i thought that was only necessary if I wanted a different layout for a group.
Anyway - Now it works great, so thanks again.