How to create the WPF Diagram (SfDiagram) with the stencil?
The stencil control is a gallery of reusable symbols and nodes. Drag and drop these symbols onto the surface of the WPF Diagram (SfDiagram) any number of times.
Steps to create a stencil with a diagram in WPF:
- Include the following namespaces in the MainWindow.xaml file.
XAML
xmlns:diagram="clr-namespace:Syncfusion.UI.Xaml.Diagram;assembly=Syncfusion.SfDiagram.WPF" xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfusion.SfDiagram.WPF"
- Create a stencil instance in XAML.
XAML
<stencil:Stencil x:Name="stencil"> </stencil:Stencil>
The following are the important properties of Stencil, which play a vital role in displaying the symbols in Stencil.
SymbolSource | This is the collection of objects (i.e., Symbol, Node, Connector, etc.). The Stencil will populate the Symbols based on it. |
SymbolGroup | It groups the symbols into a Group based on the MappingName property. SymbolGroup is a collection of SymbolGroupProvider. |
SymbolFilter | It filters the symbols by using delegates. SymbolFilters are a collection of SymbolFilterProvider. |
- Symbol Source: Create a custom class for the collection of objects.
XAML
public class DiagrammingElements : ObservableCollection<object>
{
}
- Create and add NodeViewModel (Key property will be for mapping to group the symbols) to SymbolSource.
XAML
<stencil:Stencil.SymbolSource>
<!--Custom class for symbol source - collection of objects-->
<local:DiagrammingObjects>
<!--Assign Key property and it is mapping for symbol group in Stencil-->
<!-- Any Geometry can be assigned for Shape from Basic Shapes.xml-->
<diagram:NodeViewModel Key="Shapes" UnitHeight="50" UnitWidth="50" Shape="{StaticResource Rectangle}"/>
<!--Custom Shape for NodeViewModel-->
<diagram:NodeViewModel Key="Shapes" UnitHeight="50" UnitWidth="50"
Shape="F0 M10,100 L100,100 100,50Z"/>
</local:DiagrammingObjects>
</stencil:Stencil.SymbolSource>
- Create SymbolGroup and assign Mapping Name.
XAML
<stencil:Stencil.SymbolGroups> <stencil:SymbolGroups> <stencil:SymbolGroupProvider MappingName="Key"/> </stencil:SymbolGroups> </stencil:Stencil.SymbolGroups>
- Create SymbolFilterProvider and assign it to the SelectedFilter
XAML
stencil.SelectedFilter = new SymbolFilterProvider()
{
Content = "All",
SymbolFilter = SymbolFilter
};
// Delegate for symbols
private bool SymbolFilter(SymbolFilterProvider sender, object symbol)
{
return true;
}
- Set the Shape and ShapeStyle for NodeViewModel in the common node style.
XAML
<Window.Resources>
<!--View for the NodeViewModel-->
<Style TargetType="{x:Type diagram:Node}">
<!--Style to customize Shape and it is based on Path-->
<Setter Property="ShapeStyle">
<Setter.Value>
<Style TargetType="Path">
<Setter Property="Fill" Value="CornflowerBlue"/>
<Setter Property="Stroke" Value="LightGray"/>
<Setter Property="Stretch" Value="Fill"/>
</Style>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
The diagram provides some Built-in Shapes for NodeViewModel. The diagram has support to notify the drag and drop action from the stencil to the Diagram and customization of the preview for drag and drop objects.
Conclusion
I hope you learning about how to create the WPF Diagram with a Stencil.
You can refer to our WPF Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forums or feedback portal. We are always happy to assist you!
