Articles in this section
Category / Section

How to add image annotations to a node in WPF Diagram (SfDiagram) control?

1 min read

WPF Diagram (SfDiagram) control have a support to show an Image or any UIElements in Annotation by using ViewTemplate and Content properties of Annotation.  Images can be added as the content of Annotation and source of the image can be bind to the view template of the annotation.

xaml

<ResourceDictionary>
     <ResourceDictionary.MergedDictionaries>
          <!--Initialize Shapes-->
          <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
     <!--annotation viewtemplate-->
     <DataTemplate x:Key="viewtemplate">
          <Border BorderBrush="Black" BorderThickness="1">
               <Image Source="{Binding Path=Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="60" Height="60" Stretch="Fill" />
          </Border>
     </DataTemplate>
 
     <!--annotation edittemplate-->
     <DataTemplate x:Key="edittemplate">
          <Border BorderBrush="Black" BorderThickness="1">
               <Image Source="{Binding Path=Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="60" Height="60" Stretch="Fill" />
          </Border>
     </DataTemplate>
 
     <!--Shape style for node-->
     <Style TargetType="Path" x:Key="nodeshapestyle">
         <Setter Property="Fill" Value="LightBlue" />
         <Setter Property="Stretch" Value="Fill" />
     </Style>
</ResourceDictionary>

C#

public class ImageAnnotationViewModel: DiagramViewModel
{
  public ImageAnnotationViewModel()
  {
    //Initialize the nodes and connectors collection
    this.Nodes = new NodeCollection();
    this.Connectors = new ConnectorCollection();
 
    //Create the node
    NodeViewModel node = new NodeViewModel();
    node.OffsetX = 150;
    node.OffsetY = 150;
    node.UnitHeight = 150;
    node.UnitWidth = 150;
 
    //Create the annotation collection to the node
    node.Annotations = new AnnotationCollection()
    {
      new AnnotationEditorViewModel()
      {
        //adding image path as annotation content
        Content=@"pack://application:,,,/Image/image43.png",
        VerticalAlignment=VerticalAlignment.Center,
        HorizontalAlignment=HorizontalAlignment.Center,
 
        //adding ViewTemplate property 
        ViewTemplate=App.Current.Resources["viewtemplate"]as DataTemplate,
                    
        //adding EditTemplate property
        EditTemplate=App.Current.Resources["edittemplate"] as DataTemplate
      }
    };
    node.Shape = new RectangleGeometry() { Rect = new Rect(0, 0, 150, 150) };
 
    //adding shape style to the node
    node.ShapeStyle = App.Current.Resources["nodeshapestyle"] as Style;
    //Adding the created node into node's collection
    (this.Nodes as NodeCollection).Add(node);
  }
}

A picture containing television, screenshot, picture frame

Description automatically generated

View sample in GitHub.


Conclusion

I hope you enjoyed learning about how to add image annotations to a node in WPF Diagram (SfDiagram) control.

You can refer to our WPF Diagram feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Diagram documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied