Browse the symbols from the stencil in WPF Diagram (SfDiagram)

11 Jan 20242 minutes to read

You can search for symbols in the stencil by entering the symbol name (e.g: “rectangle”) into the search text box and clicking the search button. The symbols are resulted by matching the value of the Name property with the string entered in the search textbox. The ShowSearchTextBox property of the Stencil is used to show or hide the search textbox in a stencil.

XAML

<!--Initialize the stencil-->
<syncfusion:Stencil x:Name="stencil" Width="250" ExpandMode="All"  ShowSearchTextBox="True">
    <!--Initialize the SymbolSource-->
    <syncfusion:Stencil.SymbolSource>               
        <!--Define the SymbolCollection-->
        <syncfusion:SymbolCollection>
            <syncfusion:NodeViewModel Key = "Basic Shapes" Name="Rectangle" OffsetX="100" OffsetY="100" UnitHeight="100" UnitWidth="100"  Shape="{StaticResource Rectangle}">
            </syncfusion:NodeViewModel>
        </syncfusion:SymbolCollection>
    </syncfusion:Stencil.SymbolSource>
    <syncfusion:Stencil.SymbolGroups>
        <syncfusion:SymbolGroups>
            <!--Separate groups based on the key-->
            <syncfusion:SymbolGroupProvider MappingName = "Key" />
        </syncfusion:SymbolGroups>
    </syncfusion:Stencil.SymbolGroups>
</syncfusion:Stencil>

The following image shows the search result of the symbol.

Search Tags

Stencil provides support to add keywords for a symbol that can be used when you search for it. Keywords can be added to the symbols using the SearchTags property of SymbolViewModel class.

C#

// Defining tags to a symbol to make search easier.
var tags = new List() { "Process", "Input" };
var symbol1 = new SymbolViewModel()
{
    Name = "Source",
    SymbolTemplate = App.Current.Resources["Source"] as DataTemplate,
    SearchTags = tags
};
(stencil.SymbolSource as SymbolCollection).Add(symbol1);