Stencil in WPF Diagram (SfDiagram)

11 Jun 202424 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?