Shapes in UWP Diagram (SfDiagram)

20 Aug 20211 minute to read

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

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

  • XAML
  • <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="ms-appx:///Syncfusion.SfDiagram.UWP/Resources/BasicShapes.xaml"/>
                </ResourceDictionary.MergedDictionaries>

    Basic Shapes

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

  • XAML
  • <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="ms-appx:///Syncfusion.SfDiagram.UWP/Resources/BasicShapes.xaml"/>
                </ResourceDictionary.MergedDictionaries>
                <!--Style for Shape of the Node-->
                <Style TargetType="Path" x:Key="ShapeStyle">
                    <Setter Property="Fill" Value="#FF5B9BD5"/>
                    <Setter Property="Stretch" Value="Fill"/>
                    <Setter Property="Stroke" Value="Black"/>
                </Style>
  • XAML
  • <!--Add Node with basic shape-->
    <Syncfusion:NodeViewModel x:Name="Node1" ID="Begin" OffsetX="300" OffsetY="200" Shape="{StaticResource Rectangle}" UnitHeight="100" UnitWidth="100" ShapeStyle="{StaticResource ShapeStyle}"/>

    Output Node will be,

    UWP SfDiagram Shapes Image1

    The list of basic shapes are as follows

    UWP SfDiagram Shapes Image2

    The list of flow shapes are as follows

    UWP SfDiagram Shapes Image4

    The list of arrow shapes are as follows

    UWP SfDiagram Shapes Image5