Category / Section
How to add ToolTip for Diagram objects of Node, NodePort in WPF Diagram(SfDiagram)?
2 mins read
WPF Diagram (SfDiagram) supports to add tool tip for the Node and the NodePort using ToolTip Property. You can achieve this requirement by creating Custom class for NodeViewModel and NodePortViewModel to add custom tooltip properties. And then you can bind those custom tooltip properties to the ToolTip property of the nodes and node ports using their Style.
XAML
<!--Style for Node-->
<Style TargetType="Syncfusion:Node">
<Setter Property="Shape" Value="{StaticResource Rectangle}"/>
<Setter Property="ShapeStyle">
<Setter.Value>
<Style TargetType="Path">
<Setter Property="Fill" Value="#FF5B9BD5" />
<Setter Property="Stretch" Value="Fill" />
<Setter Property="Stroke" Value="#FFEDF1F6" />
</Style>
</Setter.Value>
</Setter>
<!--Binding TooTtip property to ToolTipContent custom property-->
<Setter Property="ToolTip" Value="{Binding ToolTipContent}"/>
</Style>
<!--style for NodePort-->
<Style TargetType="Syncfusion:NodePort">
<Setter Property="Shape" Value="{StaticResource FivePointStar}"/>
<Setter Property="ShapeStyle">
<Setter.Value>
<Style TargetType="Path">
<Setter Property="Stretch"
Value="Fill" />
<Setter Property="Fill"
Value="Yellow" />
</Style>
</Setter.Value>
</Setter>
<!--Binding TooTtip property to ToolTipContent custom property-->
<Setter Property="ToolTip" Value="{Binding ToolTipContent}"/>
</Style>
<!--Initialize the SfDiagram-->
<Syncfusion:SfDiagram PortVisibility="Visible">
<Syncfusion:SfDiagram.Nodes>
<Syncfusion:NodeCollection>
<!--Initialization of the Custom Node and adding tool tip content to the node.-->
<local:CustomNodeVM UnitHeight="100"
UnitWidth="100"
OffsetX="100"
OffsetY="100"
ToolTipContent="It is a Rectangle shaped Node.">
<!--Initialization of PortCollection-->
<Syncfusion:NodeViewModel.Ports>
<Syncfusion:PortCollection>
<!--Initialization of custom NodePort and adding tool tip content to the node port.-->
<local:CustomNodePortVM x:Name="port" ToolTipContent="It is a star shaped NodePort."/>
</Syncfusion:PortCollection>
</Syncfusion:NodeViewModel.Ports>
</local:CustomNodeVM>
</Syncfusion:NodeCollection>
</Syncfusion:SfDiagram.Nodes>
</Syncfusion:SfDiagram>
C#
/// <summary>
/// Represents a custom class to NodePortViewModel to add custom tooltip properties to it.
/// </summary>
public class CustomNodePortVM : NodePortViewModel
{
private string toolTipContent;
/// <summary>
/// Gets or sets tool tip content to the node ports.
/// </summary>
public string ToolTipContent
{
get
{
return toolTipContent;
}
set
{
if (toolTipContent != value)
{
toolTipContent = value;
OnPropertyChanged("ToolTipContent");
}
}
}
}
/// <summary>
/// Represents a custom class to NodeViewModel to add custom tooltip properties to it.
/// </summary>
class CustomNodeVM : NodeViewModel
{
private string toolTipContent;
/// <summary>
/// Gets or sets tool tip content to the node ports.
/// </summary>
public string ToolTipContent
{
get
{
return toolTipContent;
}
set
{
if (toolTipContent != value)
{
toolTipContent = value;
OnPropertyChanged("ToolTipContent");
}
}
}
}
