Link labels (Begin End)

GoXam
1

Hello, i’m wondering if what i want to do is possible. i would like to display some complex label at the begining of a link and at the end of a link. This complex label are built dynamically from some data.

The label should look like something like this :

<font face="Courier New, Courier, mono">-----------------------------------
|Multiple line text | an Icon     |
-----------------------------------</font>

and should be displayed at the left of the link (considering a North to south oriented link)

This label is displayed at the beginning of the link and at the end of the link like this :

<font face="Courier New, Courier, mono">               -------------
              | from node  |
              --------------
        [Begin Label] |
                      |
                      |
         [End Label ] |
              ---------------
              |  To node    |
              ---------------</font>

From what i have understand, i need to set the offset of the linkPanel to determine the position of my begin and end link labels.

Considering the data template below :

<!-- Link between step -->
        <DataTemplate x:Key="LinkTemplateBetweenStepAndStep">
            <go:LinkPanel go:Part.Reshapable="True" >
                <go:Link.Route>
                    <go:Route Routing="AvoidsNodes" Corner="10" Curve="JumpOver" />
                </go:Link.Route>
                <!-- Link arrow -->
                <Polygon Fill="Black" Points="0 0  8 4  0 8  3 4" go:LinkPanel.Index="-1"
                 go:LinkPanel.Alignment="1 0.5" go:LinkPanel.Orientation="Along" />
                <!-- link stroke -->
                <Path go:LinkPanel.IsLinkShape="True"
                      Stroke="Black"
                      StrokeThickness="2"
                      StrokeDashArray="{Binding Path=Data.ReturnLink, Converter={StaticResource theBooleanDottedLineConverter}}" />
                <b><!-- Begin link label element --></b>
                <b><font color="#00ff00"><go:NodePanel</font></b> Sizing="Auto"
                              go:LinkPanel.Index="0"
                              <b><font color="#ff0000">go:LinkPanel.Offset="0 0"</font></b>
                              go:LinkPanel.Orientation="None">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Path=Data.From, Converter={StaticResource theNodeNotificationListStringConverter}}"
                                   TextAlignment="Right"
                                   Visibility="{Binding Path=Data.From, Converter={StaticResource theNodeEnableNotificationConverter}}" />
                        <Rectangle Style="{StaticResource EmailStyle}"
                                   Effect="{Binding Path=Data.From, Converter={StaticResource theNodeNotificationDisableEffectConverter}}"
                                   Cursor="Hand"
                                   MouseLeftButtonDown="Notification_MouseLeftButtonDown">
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{Binding Path=Data.From, Converter={StaticResource theNodeNotificationToolTipConverter}}" />
                            </ToolTipService.ToolTip>
                        </Rectangle>
                        
                    </StackPanel>
                </go:NodePanel>
                <!-- Middle link label element -->
                <go:NodePanel Sizing="Auto"
                              go:LinkPanel.Offset="NaN NaN" 
                              go:LinkPanel.Orientation="None">
                    <TextBlock Text="{Binding Path=Data.Text, Mode=TwoWay}"
                                   Style="{StaticResource TextBlockStyle}"
                                   go:Part.TextEditable="True"
                                   Visibility="{Binding Path=Link, Converter={StaticResource theLabelVisibilityConverter}}" />
                </go:NodePanel>
                <b><!-- End link label element --></b>
                <b><font color="#00ff00"><go:NodePanel</font></b> Sizing="Auto"
                              <font color="#ff0000"><b>go:LinkPanel.Offset ="0 0"</b></font>
                              go:LinkPanel.Index="-1"
                              go:LinkPanel.Orientation="None">                                            
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Path=Data.To, Converter={StaticResource theNodeNotificationListStringConverter}}"
                                   TextAlignment="Right"
                                   Visibility="{Binding Path=Data.To, Converter={StaticResource theNodeEnableNotificationConverter}}" />
                        <Rectangle Style="{StaticResource EmailStyle}"
                                   Effect="{Binding Path=Data.To, Converter={StaticResource theNodeNotificationDisableEffectConverter}}"
                                   Cursor="Hand"
                                   MouseLeftButtonDown="Notification_MouseLeftButtonDown">
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{Binding Path=Data.To, Converter={StaticResource theNodeNotificationToolTipConverter}}" />
                            </ToolTipService.ToolTip>
                        </Rectangle>                        
                    </StackPanel>
                </go:NodePanel>
            </go:LinkPanel>
        </DataTemplate>

I would like to dynamically set the offset.X and offset.Y (highlighted in red) depending of the NodePanel (highlighted in green) width and height. But i don’t succeed in binding the linkPanel offset to the nodePanel width and height.

Is it possible to do that ? if so how ?

Maybe its a wrong approach to do that ? if so could you suggest me another way to do that ?

2

Did you look at the Entity Relationship diagram sample’s link decorations?

Try setting the LinkPanel.Offset=“NaN NaN”. That will cause the LinkPanel to calculate the offset based on the size of the element. I hope that helps.

By the way, it appears that you don’t need to use a NodePanel at all here. Just set the LinkPanel’s attached properties directly on your StackPanel or TextBlock.

3

Yes, i have looked the Entity relationship diagram. I made this datatemplate from it and the GoXamIntro.pdf file.

I already tried LinkPanel.Offset=“NaN NaN”. As far as i just display a small icon without any text (a fixed size element) its ok. But as soon as i include dynamic text on the left of the icon, the link label appear at some random position sometimes far away from it’s “normal” position. And the diagram start to be messy.

And with NaN, nothing insure me that the link label will be on le left side of the link (considering a North to south oriented link).

That’s why i was thinking about calculating the offset manualy with some binding and converter.

But i didn’t succeed to retrieve the stackpanel width and height.

I have put a NodePanel, in order to avoid link going across the label when i display a lot of elements on my diagram (I’m using avoid node routing). But yes maybe it’s not needed.

4

Ah, you probably want to set the LinkPanel.Alignment attached property.

If you really want complete control over the positioning of the elements, you can override methods of LinkPanel.