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.

<!--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.

<!--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.

<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.

See also

How to drag and drop elements from a treeview ?

How to refresh the stencil when adding a new symbol in the symbol source ?

How to host different UI elements as a node content ?

How to notify stencil has been loaded ?

How to get the base node interface while dropping a Symbol from Stencil to SfDiagram ?

How to use different User Controls into Stencil?

How to refresh the stencil with new collection or new symbol?

How to create the SfDiagram with stencil control?

How to modify stencil’s symbol template dynamically at run time?

How to drag and drop elements from treeview?

How to drag and drop different shapes from SfTreeView to WPF Diagram?

How to restrict the symbol dropping from the SymbolPalette?

How to create parent and child relationship by drag and drop nodes?

How to get the notification when symbol is added to the stencil?

How to get base node interface while dropping a symbol from stencil?

How to expand all symbol groups in stencil?

How to change the color of a node in the stencil and diagram while loading a saved file in WPF Diagram(SfDiagram)?

How to group all the SymbolViewModels into the same group in the WPF Diagram (SfDiagram)?

How to Create Customized Stencil Using SVG Images in WPF SfDiagram?

How to Change Cursor to Block Cursor When Hovering in WPF SfDiagram?

How to Change the Background Color of a Symbol in WPF SfDiagram?

How to drag and drop both default and custom node from the stencil into the WPF Diagram (SfDiagram)?

How to enable/disable the Stencil symbol in WPF Diagram (SfDiagram)?

How to Achieve the Stencil Preview Effect Without Dragging a Symbol in the WPF Diagram (SfDiagram)

How to refresh stencil with new collection or symbol in WPF Diagram?

How to create the WPF Diagram (SfDiagram) with stencil?

How to achieve the AutoConnect functionality in WPF Diagram (SfDiagram)?