This is a migrated thread and some comments may be shown as answers.

Advice on Floating Labels for Graph-Layout

1 Answer 62 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 02 Mar 2015, 03:34 PM
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

1 Answer, 1 is accepted

Sort by
0
Accepted
Petar Mladenov
Telerik team
answered on 04 Mar 2015, 09:12 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Diagram
Asked by
Michael
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Share this question
or