Advice on Floating Labels for Graph-Layout

[Michael]

I would like to implement "floating labels", where each node in the diagram has a label located next to it but the label is not embedded within the node (see the attached image as an example).  I realize that floating labels in a graph layout can be a very complex topic, and for now I am just looking to implement them in a basic way.  The labels do not need to dynamically adjust to edges, but rather lets say we assign the labels to the middle-right of each node.  So for each node, a label would appear to the middle and right (as in the image).  There would be a limit to the text on the label as well.  I assume this can be done where the labels themselves are separate nodes in the ObservableGraphSource (yes, this will need to be an MVVM approach).  But, I wan to apply tree layouts and do not want the location of the nodes to be affected by the labels.

Initially, this is how I thought of doing it: Each node has a content template where the text is from a field in the view model, but the context template has a margin that pushes the text to the middle right of the node.  While this seems do-able, it also seems lick a cheesy hack.  I'd like to know if anyone else has had to do this and if so, is there any feedback you can share on how you approached it?

Much thanks in advance,

Mike

[Petar Mladenov]

Hi MIchael,

Negative Margins has a negative side effect that you need to bind to the size of the shape. In such scenarios Canvas can help - it can have no size , but provides a floating area in which you can set Canvas.Top, Canvas.Left. I prepared a sample project demonstrating this approach and you can find it attached.

<DataTemplate x:Key="contentTemplate">
              <Canvas VerticalAlignment="Center" HorizontalAlignment="Right">
                  <TextBlock Text="{Binding Content}" Canvas.Left="15" Canvas.Top="-7"/>
              </Canvas>
          </DataTemplate>

          <Style TargetType="telerik:RadDiagramShape">
              <Setter Property="IsEditable" Value="False" />
              <Setter Property="Padding" Value="0" />
              <Setter Property="HorizontalContentAlignment" Value="Stretch" />
              <Setter Property="VerticalContentAlignment" Value="Stretch" />
          </Style>

I set AutoLayout = True on the RadDiagram to proved that the Layout does not take into consideration the Labels - you will see the second shape overlaps the first shape's label. However, Layout can have settings to set distance between shapes.

We hope the suggested approach fits well in your application.

Regards,
Petar Mladenov
Telerik