Alexander Smirnov

[2.3.1] Attachable labels explanation & tutorial

1 post in this topic


As of pre GraphX version 2.3.0 there was only one possibility to add labels to vertices and edges: using VertexLabelControl and EdgeLabelControl objects definition in VertexControl and EdgeControl XAML templates. This logic was quite straightforward and solid due to label management was tightly integrated into the Vertex(Edge)Control class and there was some issues like:

  • Label content were cut when fixed object size were used
  • Labels can be obscured by edges or other vertices
  • Edge endpoints behave strangely on certain type of edge label operations

Now i want to introduce a new type of labels called attachable labels. As you might get it from the name these labels are presented as standalone objects that can be attached to specific Vertex(Edge)Control thus providing many new customization features and design possibilities. The most notable features of the attachable labels are:

  • Independence from the host object size
  • Enhanced control on the labels rendering order allowing to define how and where the new vertices will be inserted into
  • Factory pattern implementation for labels generation logic provides unqiue customization possibilities for individual labels
  • Simplified design and label handling logic that corresponds to true modular app design and helps to customize core GraphX logic more easily

To start working with new labels you have to do following:

  • (Optional) Add your own customized XAML template for AttachableVertexLabelControl and/or AttachableEdgeLabelControl. Default templates are built into GraphX controls library.
  • Set GraphArea::VertexLabelFactory and/or GraphArea::EdgeLabelFactory properties specifying corresponding factories that will generate labels. There are default factories present such as DefaultVertexlabelFactory and DefaultEdgelabelFactory.
  • Set Vertex(Edge)Control::ShowLabel property to true or use GraphArea::ShowAllEdgesLabels() and/or GraphArea::ShowAllEdgesLabels() methods to enable labels display. 
  • Then you'll have several usecases depending on how you work with GraphX:
    • If you don't use automatic graph generation method and prefer to fill visual grah manualy then you should specify optional parameter generateLabel for GraphArea::AddVertex() and/or GraphArea::AddEdge() methods and such. You can also add them completely manualy but this kind of action isn't adviced.
    • If you use automatic graph generation methods such as GraphArea::GenerateGraph() then you shouldn't do anything else at all.


  • You should remove any references of VertexLabelControl and EdgeLabelControl classes from XAML templates if you plan to use attachable labels.
  • Attachable labels are created using factories so if label factory is set then labels will be generated though might not be visible due to ShowLabel property set to false by default.



Implementing custom attachable labels

You should note the following:

  • Attachable label class should be derived from UIElement base class or some of its descendants
  • Attachable label class should implement either IVertexLabelControl or IEdgeLabelControl interfaces depending on which label type you want to generate
  • Attachable label class should implement IAttachableControl<T> interface where T is the host object class (for ex. VertexControl or EdgeControl)




I don't think i have to post detailed code tutorial here as you can always examine the GraphX source code. Just let me point where to look:

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now