How to customize the WPF Diagram (SfDiagram) thumb style?

2 mins read

Appearance of the DiagramThumb can be customized by using its Shape and ShapeStyle properties in WPF Diagram (SfDiagram). This is the base for Segment, End, and Control thumbs of the connector. The ControlPointType property will differentiate the type of thumbs.

Refer to the following code example and sample to customize the thumbs of the connector.

Segment thumb (Orthogonal)

XAML

<Style TargetType="Path" x:Key="OrthogonalThumbStyle">
  <Setter Property="Fill" Value="Black"/>
  <Setter Property="Stroke" Value="Yellow"/>
  <Setter Property="StrokeThickness" Value="1"/>
</Style>
 
<Style TargetType="Syncfusion:DiagramThumb">
  <Style.Triggers>
    <Trigger Property="ControlPointType" Value="HorizontalOrthogonalSegment">
       <Setter Property="Shape">
         <Setter.Value>
           <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,0"/>
         </Setter.Value>
       </Setter>
       <Setter Property="ShapeStyle" Value="{StaticResource OrthogonalThumbStyle}"/>
    </Trigger>
    <Trigger Property="ControlPointType" Value="VerticalOrthogonalSegment">
      <Setter Property="Shape">
        <Setter.Value>
          <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,0"/>
        </Setter.Value>
      </Setter>
      <Setter Property="ShapeStyle" Value="{StaticResource OrthogonalThumbStyle}"/>
    </Trigger>
   </Style.Triggers>
</Style>

Screenshot

OrthogonalThumb

End thumb (Source/Target)

XAML

<Style TargetType="Path" x:Key="EndThumbStyle">
  <Setter Property="Fill" Value="SkyBlue"/>
  <Setter Property="Stroke" Value="DarkBlue"/>
  <Setter Property="StrokeThickness" Value="1"/>
</Style>
 
<Style TargetType="Syncfusion:DiagramThumb">
  <Style.Triggers>
     <Trigger Property="ControlPointType" Value="SourcePoint">
        <Setter Property="Shape">
            <Setter.Value>
                <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,0"/>
            </Setter.Value>
         </Setter>
        <Setter Property="ShapeStyle" Value="{StaticResource EndThumbStyle}"/>
     </Trigger>
     <Trigger Property="ControlPointType" Value="TargetPoint">
        <Setter Property="Shape">
            <Setter.Value>
                <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,0"/>
            </Setter.Value>
        </Setter>
        <Setter Property="ShapeStyle" Value="{StaticResource EndThumbStyle}"/>
     </Trigger>
  </Style.Triggers>
</Style>

Screenshot

EndThumb

Control thumb (CubicBezier)

XAML

<Style TargetType="Syncfusion:DiagramThumb">
   <Style.Triggers>
       <Trigger Property="ControlPointType" Value="CubicCurveSegment">
            <Setter Property= "Shape">
               <Setter.Value>
                  <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,0"/>
               </Setter.Value>
            </Setter>
            <Setter Property="ShapeStyle">
               <Setter.Value>
                  <Style TargetType="Path">
                    <Setter Property="Fill" Value="Yellow"/>
                    <Setter Property="Stroke" Value="Black"/>
                    <Setter Property="StrokeThickness" Value="1"/>
                  </Style>
               </Setter.Value>
            </Setter>
       </Trigger>
   </Style.Triggers>
</Style>

Screenshot

CubicbezierThumb