Stencil in WPF Diagram (SfDiagram)

29 Jan 202524 minutes to read

The Stencil is a gallery of reusable symbols and diagram elements that can be dragged and dropped on the diagram surface multiple times.

XAML
C#
<!--Namespace for stencil-->
xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfusion.SfDiagram.WPF"

<!--Define a Stencil-->
<stencil:Stencil x:Name="stencil" ExpandMode="All" BorderBrush="Black" BorderThickness="0,0,1,0" />
//Define a Stencil.
Stencil stencil = new Stencil()
{
    ExpandMode = ExpandMode.All,
    BorderThickness = new Thickness(0,0,1,0),
    BorderBrush = new SolidColorBrush(Colors.Black)
};

StencilDiagram

Add symbols in a Stencil

The Symbol is used to visualize the elements in a stencil that can be created using the following ways:

Using the diagram elements.
Using the SymbolViewModel.

The Stencil’s SymbolSource property is used to define the data source as a collection of objects (symbol, node, connector, and more) that needs to be populated as symbols.

Using the Diagram Elements

The diagram elements such as NodeViewModel, ConnectorViewModel, GroupViewModel, and ContainerViewModel can be used to visualize the symbol.

XAML
C#
<!--Initialize the stencil-->
<stencil:Stencil x:Name="stencil"
                 Grid.Column="0"
                 Grid.Row="1"
                 ExpandMode="ZeroOrMore"
                 BorderBrush="#dfdfdf"
                 BorderThickness="1"
                 GroupMappingName="Key">
    <stencil:Stencil.SymbolSource>
        <syncfusion:SymbolCollection>
            <!--Define the DiagramElement- Node-->
            <syncfusion:NodeViewModel x:Name="node"
                                      Key="Nodes"
                                      UnitHeight="70"
                                      UnitWidth="100"
                                      OffsetX="100"
                                      OffsetY="100"
                                      Shape="{StaticResource Rectangle}">
            </syncfusion:NodeViewModel>
            <!--Define the DiagramElement- Connector-->
            <syncfusion:ConnectorViewModel Key="Connectors" 
                                           SourcePoint="100,100"
                                           TargetPoint="200,200" />
            <!--Define the DiagramElement- Group-->
            <syncfusion:GroupViewModel Key="Groups">
                <!--Creates the Groupable Nodes-->
                <syncfusion:GroupViewModel.Nodes>
                    <syncfusion:NodeCollection>
                        <syncfusion:NodeViewModel UnitHeight="70"
                                                  ID="srcnode"
                                                  OffsetX="0"
                                                  OffsetY="300"
                                                  UnitWidth="100"
                                                  Shape="{StaticResource Rectangle}">
                        </syncfusion:NodeViewModel>
                        <syncfusion:NodeViewModel UnitHeight="70"
                                                  ID="tarnode"
                                                  OffsetX="100"
                                                  OffsetY="500"
                                                  UnitWidth="100"
                                                  Shape="{StaticResource Rectangle}">
                        </syncfusion:NodeViewModel>
                    </syncfusion:NodeCollection>
                </syncfusion:GroupViewModel.Nodes>
                <!--Creates the Groupable Connectors-->
                <syncfusion:GroupViewModel.Connectors>
                    <syncfusion:ConnectorCollection>
                        <syncfusion:ConnectorViewModel SourceNodeID="srcnode"
                                                       TargetNodeID="tarnode" />
                    </syncfusion:ConnectorCollection>
                </syncfusion:GroupViewModel.Connectors>
            </syncfusion:GroupViewModel>
            <!--Creates the container-->
            <syncfusion:ContainerViewModel Key="Container" 
                                           OffsetX="300" 
                                           OffsetY="300" 
                                           UnitHeight="200" 
                                           UnitWidth="250">
                <!--Creates the container Nodes-->
                <syncfusion:GroupViewModel.Nodes>
                    <syncfusion:NodeCollection>
                        <syncfusion:NodeViewModel UnitHeight="70"
                                                  UnitWidth="100"
                                                  OffsetX="250"
                                                  OffsetY="250"
                                                  Shape="{StaticResource Rectangle}">
                        </syncfusion:NodeViewModel>
                        <syncfusion:NodeViewModel UnitHeight="70"
                                                  UnitWidth="100"
                                                  OffsetX="300"
                                                  OffsetY="350"
                                                  Shape="{StaticResource Rectangle}">
                        </syncfusion:NodeViewModel>
                    </syncfusion:NodeCollection>
                </syncfusion:GroupViewModel.Nodes>
            </syncfusion:ContainerViewModel>
        </syncfusion:SymbolCollection>
    </stencil:Stencil.SymbolSource>
</stencil:Stencil>
//Define the SymbolSource with SymbolCollection.
stencil.SymbolSource = new SymbolCollection();

//Initialize the node diagram element.
NodeViewModel node = new NodeViewModel()
{
    Key = "Nodes",
    UnitHeight = 70,
    UnitWidth = 100,
    OffsetX = 100,
    OffsetY = 100,
    Shape = this.Resources["Rectangle"],
};

//Initialize the connector diagram element.
ConnectorViewModel connector = new ConnectorViewModel()
{
    Key = "Connectors",
    SourcePoint = new Point(100, 100),
    TargetPoint = new Point(200, 200),
};

//Initialize the group element.
GroupViewModel group = new GroupViewModel()
{
    Key = "Groups",
    //Adding group nodes
    Nodes = new NodeCollection()
    {
        new NodeViewModel()
        {
            ID="srcnode",
            UnitHeight=70,
            UnitWidth=100,
            OffsetX=0,
            OffsetY=300,
            Shape=this.Resources["Rectangle"]
        },
        new NodeViewModel()
        {
            ID="tarnode",
            UnitHeight=70,
            UnitWidth=100,
            OffsetX=100,
            OffsetY=500,
            Shape=this.Resources["Rectangle"]
        }
    },
    //Adding group connector.
    Connectors = new ConnectorCollection()
    {
        new ConnectorViewModel()
        {
            SourceNodeID="srcnode",
            TargetNodeID="tarnode"
        }
    }
};
GroupViewModel group = new GroupViewModel()
{
    Key = "Groups",
    //Adding group nodes
    Nodes = new NodeCollection()
    {
        new NodeViewModel()
        {
            ID="srcnode",
            UnitHeight=70,
            UnitWidth=100,
            OffsetX=0,
            OffsetY=300,
            Shape=this.Resources["Rectangle"]
        },
        new NodeViewModel()
        {
            ID="tarnode",
            UnitHeight=70,
            UnitWidth=100,
            OffsetX=100,
            OffsetY=500,
            Shape=this.Resources["Rectangle"]
        }
    },
    //Adding group connector.
    Connectors = new ConnectorCollection()
    {
        new ConnectorViewModel()
        {
            SourceNodeID="srcnode",
            TargetNodeID="tarnode"
        }
    }
};

//Creating container element.
ContainerViewModel container = new ContainerViewModel()
{
    Key = "Container",
    UnitHeight = 200,
    UnitWidth = 250,
    OffsetX = 300,
    OffsetY = 300,
    //Creating container nodes
    Nodes = new NodeCollection()
    {
        new NodeViewModel()
        {
            UnitHeight = 70,
            UnitWidth = 100,
            OffsetX = 250,
            OffsetY = 250,
            Shape = this.Resources["Rectangle"],
        },
        new NodeViewModel()
        {
            UnitHeight = 70,
            UnitWidth = 100,
            OffsetX = 300,
            OffsetY = 350,
            Shape = this.Resources["Rectangle"],
        },
    },
};

//Adding diagram elements to the stencil SymbolSource collection.
(stencil.SymbolSource as SymbolCollection).Add(node);
(stencil.SymbolSource as SymbolCollection).Add(connector);
(stencil.SymbolSource as SymbolCollection).Add(group);
(stencil.SymbolSource as SymbolCollection).Add(container);

DiagramElements

View Sample in GitHub

Using the SymbolViewModel

The SymbolViewModel has Symbol and SymbolTemplate properties to visualize the Symbol in the stencil.

XAML
C#
<DataTemplate x:Key="Diamond">
    <StackPanel>
        <Path Stretch="Fill"
              Data="M 397.784,287.875L 369.5,316.159L 341.216,287.875L 369.5,259.591L 397.784,287.875 Z"
              Fill="White"
              Stroke="Black"
              StrokeThickness="1" />
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Diamond" />
    </StackPanel>
</DataTemplate>
<DataTemplate x:Key="symboltemplate">
    <StackPanel>
       <Image Source="/Image/user_image.png" Width="100" Height="80" />
       <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="User" />
    </StackPanel>
</DataTemplate>

<stencil:Stencil x:Name="stencil"
                 Grid.Column="0"
                 Grid.Row="1"
                 ExpandMode="ZeroOrMore"
                 BorderBrush="#dfdfdf"
                 BorderThickness="1"
                 GroupMappingName="Key">
    <stencil:Stencil.SymbolSource>
        <syncfusion:SymbolCollection>
            <syncfusion:SymbolViewModel Symbol="User" Key="Image"
                                        SymbolTemplate="{StaticResource symboltemplate}" />
            <syncfusion:SymbolViewModel Symbol="Diamond" Key="Template"
                                        SymbolTemplate="{StaticResource Diamond}" />

        </syncfusion:SymbolCollection>
    </stencil:Stencil.SymbolSource>
</stencil:Stencil>
//Define the SymbolSource with the SymbolCollection.
stencil.SymbolSource = new SymbolCollection();
 
//Initialize the SymbolItem.
SymbolViewModel imagenode = new SymbolViewModel()
{    
    Symbol = "User",
    SymbolTemplate = this.Resources["symboltemplate"] as DataTemplate
};

SymbolViewModel symbol = new SymbolViewModel()
{    
    Symbol = "Diamond",
    SymbolTemplate = this.Resources["Diamond"] as DataTemplate
};

//Adding the element to the collection.
(stencil.SymbolSource as SymbolCollection).Add(imagenode);
(stencil.SymbolSource as SymbolCollection).Add(symbol);

Symbol

View Sample in GitHub

Constraints

The Constraints property of stencil allows you to enable or disable certain features. For more information about stencil constraints, refer to the StencilConstraints.

Stencil in WPF Diagram (SfDiagram)

Add symbols in a Stencil

Using the Diagram Elements

Using the SymbolViewModel

Constraints

See also