How to create the WPF Diagram (SfDiagram) with 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 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 are playing vital role to display 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 Group based on the MappingName property. SymbolGroup is collection SymbolGroupProvider. |
SymbolFilter | It filters the symbols by using delegates. SymbolFilters are the collection of SymbolFilterProvider. |
- Symbol Source: Create a custom class for 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 to SelectedFliter
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 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. Diagram have support to notify the drag and drop action from stencil to Diagram and customization of the preview for drag and drop objects.
Conclusion
I hope you enjoyed learning about how to create the WPF Diagram (SfDiagram) with stencil.
You can refer to our WPF Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
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 clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
