Stencil in WPF Diagram (SfDiagram)
10 Nov 202214 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)
};
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-->
<Syncfusion: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>
</Syncfusion: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);
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-->
<Syncfusion:SymbolCollection>
<Syncfusion:SymbolViewModel Symbol="User" SymbolTemplate="{StaticResource symboltemplate}"/>
<Syncfusion:SymbolViewModel Symbol="Diamond" SymbolTemplate="{StaticResource Diamond}"/>
</Syncfusion: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);
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?