Shapes in WPF Diagram (SfDiagram)

29 Nov 202420 minutes to read

We have provided some basic built-in shapes as ResourceDictionary.

The following code example illustrates how to merge shapes into diagram.

<ResourceDictionary.MergedDictionaries>
    <!--Initialize Shapes-->
    <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />
</ResourceDictionary.MergedDictionaries>

Basic Shapes

The following code example illustrates how to assign Shape property of the Node.

<!--Style for Node-->
<Style TargetType="syncfusion:Node">
    <Setter Property="ShapeStyle">
        <Setter.Value>
            <Style TargetType="Path">
                <Setter Property="Fill" Value="CornflowerBlue"/>
                <Setter Property="Stretch" Value="Fill"/>
                <Setter Property="Stroke" Value="Black"/>
            </Style>
        </Setter.Value>
   </Setter>
</Style>

<!--Initialize the SfDiagram-->
<syncfusion:SfDiagram x:Name="diagram">
    <!--Initialize the NodeCollection-->
    <syncfusion:SfDiagram.Nodes>
        <syncfusion:NodeCollection>
            <!--Add Node with basic shape-->
            <syncfusion:NodeViewModel x:Name="Node" UnitHeight="100" UnitWidth="100" 
                                      OffsetX="100" OffsetY="100" 
                                      Shape="{StaticResource Rectangle}"/>  
        </syncfusion:NodeCollection>
    </syncfusion:SfDiagram.Nodes>
</syncfusion:SfDiagram>
//Initialize the diagram
SfDiagram diagram = new SfDiagram();

//Initialize the NodeViewModel
NodeViewModel node = new NodeViewModel()
{
    UnitHeight = 100,
    UnitWidth = 100,
    OffsetX = 100,
    OffsetY = 100,
    Shape = new RectangleGeometry() { Rect = new Rect(0, 0, 10, 10) },
};

// Add the node into Nodes collection
(diagram.Nodes as NodeCollection).Add(node);

Output Node will be,

WPF Diagram Shapes

The list of shapes are available in the resource dictionary as follows

Shape Category Shape Name Output Shape
Basic Shapes Rectangle BasicRectangle
  Triangle BasicTriangle
  Plus BasicPlus
  Pentagon BasicPentagon
  Hexagon BasicHexagon
  Heptagon BasicHeptagon
  Octagon BasicOctagon
  Trapezoid BasicTrapezoid
  Decagon BasicDecagon
  RightTriangle BasicRightTriangle
  Cylinder BasicCylinder
  Diamond BasicDiamond
  TwoSideFlatCorner BasicTwoSideFlatCorner
  TwoSideRoundCorner BasicTwoSideRoundCorner
  RoundedRectangle BasicRoundedRectangle
  Cloud BasicCloud
  CloudCallOut BasicCloudCallOut
  Paralleogram BasicParalleogram
  Frame BasicFrame
  Donut BasicDonut
  RectangleCallOut BasicRectangleCallOut
  RoundedRectangleCallOut BasicRoundedRectangleCallOut
  OvalCallOut BasicOvalCallOut
  Cube BasicCube
  NoSymbol BasicNoSymbol
  FourPointStar BasicFourPointStar
  FivePointStar BasicFivePointStar
  SixPointStar BasicSixPointStar
  SevenPointStar BasicSevenPointStar
  SixteenPointStar BasicSixteenPointStar
  TwentyFourPointStar BasicTwentyFourPointStar
  ThirtyTwoPointStar BasicThirtyTwoPointStar
Flow Shapes Process FlowProcess
  Decision FlowDecision
  Terminator FlowTerminator
  Sort Sort
  Document FlowSort
  MultiDocument FlowMultiDocument
  DirectData FlowDirectData
  SequentialData FlowSequentialData
  PaperTap FlowPaperTap
  Collate FlowCollate
  SummingJunction FlowSummingJunction
  Or Or
  InternalStorage FlowInternalStorage
  PredefinedProcess FlowPredefinedProcess
  Extract FlowExtract
  Merge FlowMerge
  OffPageReference FlowOffPageReference
  SequentialAccessStorage FlowSequentialAccessStorage
  Delay FlowDelay
  StoredData FlowStoredData
  Display FlowDisplay
  ManualOperation FlowManualOperation
  Data FlowData
  OnPageReference FlowOnPageReference
  Prepration FlowPrepration
  PunchedCard FlowPunchedCard
  Card FlowCard
  LoopLimit LoopLimit
  ManualInput ManualInput
Arrow Shapes CurvedDownArrow CurvedDownArrow
  CurvedLeftArrow CurvedLeftArrow
  CurvedRightArrow CurvedRightArrow
  CurvedUpArrow CurvedUpArrow
  CircularArrow CircularArrow
  JumpingLeftArrow JumpingLeftArrow
  JumpingRightArrow JumpingRightArrow
  UTurnArrow UTurnArrow
  LeftArrow LeftArrow
  RightArrow RightArrow
  DoubleArrow DoubleArrow
  TopArrow TopArrow
  BottomArrow BottomArrow
  MultiArrow MultiArrow
  BlockArrow BlockArrow
  QuadBlockArrow QuadBlockArrow
  NotchedArrow NotchedArrow
  LeftRightBlockArrow LeftRightBlockArrow
  QuadArrow QuadArrow
  FlexibleArrow FlexibleArrow
Data Flow Shapes OvalProcess OvalProcess
  ExternalIndicator ExternalIndicator
  Object Object
  MultipleProcess MultipleProcess
  State State
  Stop1 Stop1
  Entity1 Entity1
  Entity2 Entity2
Electrical Shapes Resistor Resistor
  Capacitor Capacitor
  AC AC
  Dc1 Dc1
  EquiPotent EquiPotent
  Inductor Inductor
  Crystal Crystal
  Attenuator Attenuator
  Antenna Antenna
  LoopAntenna LoopAntenna
  CircuitBreaker CircuitBreaker
  Fuse Fuse
  IdealSource IdealSource
  GenericComponent GenericComponent
  Transducer Transducer
  Transducer2 Transducer2
  PickupHead PickupHead
  HalfConductor HalfConductor
  Pulse Pulse
  Pulse1 Pulse1
  Sawtooth Sawtooth
  Step Step
  SensingLinkSquib SensingLinkSquib
  Indicator Indicator
  Material Material
  DelayElement DelayElement
  SurgeProtector SurgeProtector
  SurgeProtector1 SurgeProtector1
  PermanentMagnet PermanentMagnet
  Magnetoresistor_shape Magnetoresistor_shape
  IgnitorPlug IgnitorPlug
  Bell Bell
  Buzzer Buzzer
  ThermalElement ThermalElement
  ThermoCouple ThermoCouple

Find the Shapes sample to depict the shapes.