How to add image annotations to a node in WPF Diagram (SfDiagram) control?
WPF Diagram (SfDiagram) control has support to show an Image or any UIElements in an Annotation by using the ViewTemplate and Content properties of the Annotation. Images can be added as the content of an Annotation, and the source of the image can be bound to the ViewTemplate 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); } }
Conclusion
I hope you enjoyed learning about how to add image annotations to a node in the WPF Diagram (SfDiagram) control.
You can refer to our WPF Diagram feature tour page to learn 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 clarification, please let us know in the comments section below. You can also contact us through our support forums or feedback portal. We are always happy to assist you!