Expandable Nodes and links

I am using goxam 1.1 for silverlight and am having an issue with the link being drawn to other nodes when I use go:Node.ToSpot=“None”

If a link is pointing to the bottom of the node that is expandable it always ends at the right location for when the node is expanded even if the node is the collapsed state. When I expand a node and then collapse it the link will follow the node's bottom edge as it closes and move back to the edge where the expanded node was.

Could you provide more details about the situation? Are you talking about expanding/collapsing Groups, or expanding/collapsing trees?

If your situation involves Groups, can you describe the graph? Is the link connected to the Group or to a member Node? When the Group is collapsed does moving the Node at the other end of the link cause the link to be routed correctly?

The node being display on the goxam control have 2 states. One shows the notes associated with the node and the other state hides the notes.

Thanks for looking into this

Oh, right – there’s a third possibility: you are expanding/collapsing some part of the Node itself, not involving collapsing part of the graph (neither Group nor tree).

Is that the case for you? Are you just changing the Visibility of some of the FrameworkElements in your Node?

If so, I’m wondering why the size (ActualWidth, ActualHeight) of the node hadn’t changed. If it had, all of the Links connected to that Node would have been re-routed.

Could you see in the debugger what the value of ActualHeight is, when the Node is “collapsed”?

Also, does moving the “Coronary Heart Disease” node fix the end point of that link? I bet it won’t, because the ActualHeight of the collapsed node hasn’t changed.

We are changine the size of the control we are showing. Here is the xaml for the states

<VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="Collapsed_Expanded"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.3"> <VisualTransition.GeneratedEasingFunction> <CubicEase EasingMode="EaseInOut"/> </VisualTransition.GeneratedEasingFunction> </VisualTransition> </VisualStateGroup.Transitions> <VisualState x:Name="Collapsed"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="userControl"> <EasingDoubleKeyFrame KeyTime="0" Value="90"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="NodeExpand"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="NodeExpand"> <EasingDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Expanded"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="NodeExpand"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="userControl"> <EasingDoubleKeyFrame KeyTime="0" Value="220"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="NodeExpand"> <EasingDoubleKeyFrame KeyTime="0" Value="-1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups>

Did you check the Node.ActualHeight when the node was collapsed?

Where is your “userControl” in your Node DataTemplate?

The nodes actual height is 90 when collapsed and 220 when expanded

Did you set the Node.PortId attached property on any FrameworkElement of the node’s DataTemplate? If so, is that element’s ActualHeight also 90 or smaller when collapsed?

If not, I can’t explain the behavior, since once the Silverlight layout system has set the ActualHeight, it calls the SizeChanged event handlers, which include one that we have defined to note the new size and perform side-effects such as re-routing all connected links.

Well, I suppose there are possible explanations, but they require overriding methods. Have you defined any classes inheriting from GoXam classes?

No we did not set the portid on the node.

Here is the data template we are using
<DataTemplate x:Key="NodeTemplate"> <go:NodePanel go:Part.SelectionAdorned="True" Sizing="Auto" go:Part.SelectionAdornmentTemplate="{StaticResource StateSelectionTemplate}" go:Node.LinkableFrom="False" go:Node.LinkableTo="False" go:Node.LinkableDuplicates="True" go:Node.LinkableSelfNode="False" go:Node.ToSpot="None" go:Node.FromSpot="Center" go:Node.Location="{Binding Data.Location, Mode=TwoWay}"> <Path go:NodePanel.Figure="None" Stroke="Black" /> <GenBoss:SquareNode x:Name="Shape" NodeDeleted="NodeDelete_Click" NodeLeftButtonDown="Node_DoubleClick" RootNode="NodeRoot_Click" Height="90" /> </go:NodePanel> </DataTemplate>
It looks like the link is properly tracking the size of the node as it closes. Once it is closed it goes to the old location. You can see in this short video

It looks like your node DataTemplate could just be:


NodeLeftButtonDown=“Node_DoubleClick” RootNode=“NodeRoot_Click”






And your description sounds like its a problem with the animation. But I haven't had a chance to look at it carefully.

You were right about the animation. We had a textbox on the usercontrol which became invisible because the size of the user control changed. I now changed the visibililty of the textbox when we run the animation and the links now work correctly. I guess the goxam control was thinking the bottom of the textbox was the bottom of the control

I’m glad you figured it out.

Have you also tried the simpler NodeTemplate?

BTW, you have a nice-looking application. Once you’re done, we’d be happy to publicize it for you by adding it to our gallery.