Stencil in WPF Diagram (SfDiagram)

28 Dec 202114 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 SymbolSource-->
<stencil:Stencil.SymbolSource>
    <!--Define the SymbolCollection-->
    <local:SymbolCollection>
        <syncfusion:NodeViewModel x:Name="node" UnitHeight="70" UnitWidth="100" OffsetX="100" OffsetY="100" Shape="{StaticResource Rectangle}">
        </syncfusion:NodeViewModel>
        <syncfusion:ConnectorViewModel SourcePoint="100,100" TargetPoint="200,200"/>
        <!--Define the DiagramElement- Group-->
        <syncfusion:GroupViewModel>
            <!--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>
        <Syncfusion:ContainerViewModel Key="Container" UnitHeight="300" UnitWidth="300">
            <!--Creates the Groupable Nodes-->
            <Syncfusion:GroupViewModel.Nodes>
                <Syncfusion:NodeCollection>
                    <Syncfusion:NodeViewModel UnitHeight="70"
                                              OffsetX="0"
                                              OffsetY="100"
                                              UnitWidth="100"
                                              Shape="{StaticResource Rectangle}">
                    </Syncfusion:NodeViewModel>
                    <Syncfusion:NodeViewModel UnitHeight="70"
                                              OffsetX="100"
                                              OffsetY="200"
                                              UnitWidth="100"
                                              Shape="{StaticResource Rectangle}">
                    </Syncfusion:NodeViewModel>
                </Syncfusion:NodeCollection>
            </Syncfusion:GroupViewModel.Nodes>
        </Syncfusion:ContainerViewModel>
    </local:SymbolCollection>
</stencil:Stencil.SymbolSource>
//Define the SymbolSource with SymbolCollection.
stencil.SymbolSource = new SymbolCollection();

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

ConnectorViewModel cvm = new ConnectorViewModel()
{
    SourcePoint = new Point(100, 100),
    TargetPoint = new Point(200, 200),
};

GroupViewModel grp = new GroupViewModel()
{
    Nodes = new NodeCollection()
    {
       new NodeViewModel()
       {
         ID="srcnode",
         UnitHeight=70,
         UnitWidth=100,
         OffsetX=0,
         OffsetY=300,
         Shape=App.Current.Resources["Rectangle"]
        },
       new NodeViewModel()
       {
        ID="tarnode",
        UnitHeight=70,
        UnitWidth=100,
        OffsetX=100,
        OffsetY=500,
        Shape=App.Current.Resources["Rectangle"]
        }
    },
    Connectors = new ConnectorCollection()
    {
      new ConnectorViewModel()
      {
        SourceNodeID="srcnode", 
        TargetNodeID="tarnode"
      }
    }
};

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

//Adding an element to the collection.
(stencil.SymbolSource as SymbolCollection).Add(node);
(stencil.SymbolSource as SymbolCollection).Add(cvm);
(stencil.SymbolSource as SymbolCollection).Add(grp);
(stencil.SymbolSource as SymbolCollection).Add(container);

//Adding the ISymbol to the SymbolCollection.
public class SymbolCollection : ObservableCollection<Object>
{
}

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.SymbolSource>
    <!--Define the SymbolCollection-->
    <local:SymbolCollection>
        <Syncfusion:SymbolViewModel Symbol="User" SymbolTemplate="{StaticResource symboltemplate}"/>
         <Syncfusion:SymbolViewModel Symbol="Diamond" SymbolTemplate="{StaticResource Diamond}"/>
    </local:SymbolCollection>
</stencil:Stencil.SymbolSource>
//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);

//Adding the ISymbol to the SymbolCollection.
public class SymbolCollection : ObservableCollection<Object>
{
}

Symbol

Constraints

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

View Sample in GitHub

See also