Customized link

Hello,

I arrived to custumized as i want my nodes, now I’d like to have some aesthetical links.

I’d like to have links with lineargradientbrush. wanted

 <LinearGradientBrush x:Key="BelongsLinkBrush"  StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#FFA6A1FF" Offset="0"/>
            <GradientStop Color="#FFCCD7FF" Offset="0.424"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.464"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.562"/>
            <GradientStop Color="#FFCCD7FF" Offset="0.607"/>
            <GradientStop Color="#FFA6A1FF" Offset="1"/>
        </LinearGradientBrush>

and

 <DataTemplate x:Key="BelongsLink">
            <go:LinkPanel go:Part.SelectionElementName="PART_Path" go:Part.SelectionAdorned="True">           
            <go:LinkShape x:Name="PART_Path" Stroke="{StaticResource BelongsLinkBrush}" StrokeThickness="5" />
            </go:LinkPanel>
        </DataTemplate>

but the gradient is not as i want : getted

Thanks
Aurore

In general such effects are not supported.

But you could get such an effect for relatively thin links by using two link shapes. This is not supported directly in GoXam, but you could implement it using a custom LinkPanel.

<DataTemplate x:Key="LinkTemplate1"> <local:DoubleLinkPanel go:Link.SelectionElementName="Path" go:Part.SelectionAdorned="True" go:Part.Reshapable="True"> <go:Link.Route> <go:Route Routing="Orthogonal" Corner="10" /> </go:Link.Route> <go:LinkShape x:Name="Path2" Stroke="#FFA6A1FF" StrokeThickness="5" /> <go:LinkShape x:Name="Path" Stroke="#FFCCD7FF" StrokeThickness="2" /> </local:DoubleLinkPanel> </DataTemplate>
In Silverlight:

<DataTemplate x:Key="LinkTemplate1"> <local:DoubleLinkPanel go:Part.SelectionElementName="Path" go:Part.SelectionAdorned="True"> <go:Link.Route> <go:Route Routing="Orthogonal" Corner="10" /> </go:Link.Route> <Path x:Name="Path2" go:LinkPanel.IsLinkShape="True" Stroke="#FFA6A1FF" StrokeThickness="5" /> <Path x:Name="Path" go:LinkPanel.IsLinkShape="True" Stroke="#FFCCD7FF" StrokeThickness="2" /> </local:DoubleLinkPanel> </DataTemplate>
Note how the outer color is drawn using a thick pen behind the inner color drawn using a thin pen.

For WPF, this is easy to implement:

public class DoubleLinkPanel : LinkPanel { protected override Size ArrangeOverride(Size finalSize) { Size sz = base.ArrangeOverride(finalSize); Link link = Part.FindAncestor<Link>(this); if (link != null) { LinkShape path2 = link.FindNamedDescendant("Path2") as LinkShape; if (path2 != null) { path2.Arrange(new Rect(0, 0, finalSize.Width, finalSize.Height)); } } return sz; } }
But if you are using Silverlight, this is more difficult, primarily because Silverlight does not permit the sharing of Geometry objects:

[code] public class DoubleLinkPanel : LinkPanel {
protected override Size MeasureOverride(Size availableSize) {
Link link = Part.FindAncestor(this);
if (link != null) {
Path path2 = link.FindNamedDescendant(“Path2”) as Path;
if (path2 != null) {
path2.Data = GeoHelper.Copy(link.Route.DefiningGeometry);
}
}
return base.MeasureOverride(availableSize);
}

protected override Size ArrangeOverride(Size finalSize) {
  Size sz = base.ArrangeOverride(finalSize);
  Link link = Part.FindAncestor<Link>(this);
  if (link != null) {
    Path path2 = link.FindNamedDescendant("Path2") as Path;
    if (path2 != null) {
      path2.Arrange(new Rect(0, 0, finalSize.Width, finalSize.Height));
    }
  }
  return sz;
}

}[/code]
Note that it depends on a static method for copying Geometry objects. I’ll post that separately, since it’s not specific to showing multiple link shapes in a LinkPanel.

I forgot to include a screenshot:

I think this is more esthetically pleasing than in the screenshot you chose.