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,

The list of basic shapes are as follows

The list of flow shapes are as follows

The list of arrow shapes are as follows