Skip to content

Commit f6b1e70

Browse files
KarkuvelRajanKarkuvelRajan
authored
Merge pull request #1603 from syncfusion-content/WPF-925464-SymbolGroupViewModel_UG_Revamp_HotFix
WPF-925464-SymbolGroupViewModel UG Revamp HotFix
2 parents fe293ac + 3524e35 commit f6b1e70

File tree

3 files changed

+98
-112
lines changed

3 files changed

+98
-112
lines changed

‎wpf/Diagram/Stencil/SymbolGroup/SymbolGroup.md‎

Lines changed: 98 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ documentation: ug
1111

1212
A set of stencil symbols can be combined together to create a group and many numbers of group can be created. This helps you to look overall stencil symbols into split view and it is easy to find specific or particular shape category into stencil.
1313

14-
## Group symbols into a category
14+
## SymbolCollection With GroupMappingName in Stencil
1515

1616
The symbols of the same category can be grouped using the [GroupMappingName](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.Stencil.html#Syncfusion_UI_Xaml_Diagram_Stencil_Stencil_GroupMappingName) property of the [Stencil](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.html) class. The `Stencil` groups the symbols based on the `GroupMappingName` property, which specifies the name of the property whose value will determine the group category. In the following code example, the `GroupMappingName` is set to "Key", so the `Stencil` will create the SymbolGroups based on the value of the Key property.
1717

@@ -229,18 +229,70 @@ When there is more number of symbol groups in the stencil, then you can expand a
229229
|ZeroOrMore| Enables none or more symbol group that can be expanded |![ExpandMode ZeroOrMore](SymbolGroup_images/ExpandModeZeroOrMore.Gif)|
230230
|ZeroOrOne | Enables none or one symbol group that can be expanded |![ExpandMode ZeroOrMore](SymbolGroup_images/ExpandModeZeroOrOne.Gif)|
231231

232-
## Symbol categories
232+
## SymbolGroupViewModel in Stencil
233233

234-
There are plenty of shapes available in the diagram resource dictionary. It takes more time and allows repeated code samples to add all symbols to the stencil. To avoid this, the shapes are split and categorized as a list of symbols in the [StencilCategory](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.StencilCategory.html ) class. You can add more than one category using the [`Categories`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.Stencil.html#Syncfusion_UI_Xaml_Diagram_Stencil_Stencil_Categories) property of the stencil class.
234+
The [SymbolGroupViewModel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.SymbolGroupViewModel.html) class provides the support to create the view models to the symbol group and provides supports to add symbols to it as Node, Connectors, groups and list of predefined symbols. It includes the following properties:
235235

236-
The `Categories` can be mentioned by using the following properties of the `StencilCategory` class:
236+
* [Name](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.SymbolGroupViewModel.html#Syncfusion_UI_Xaml_Diagram_Stencil_SymbolGroupViewModel_Name): Specifies the display name of the symbol group. It also adds the symbols to the symbol groups defined through the `SymbolSource` property which symbol has same `Key` value as this `Name` property.
237+
* [Symbols](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.SymbolGroupViewModel.html#Syncfusion_UI_Xaml_Diagram_Stencil_SymbolGroupViewModel_Symbols): Specifies the list of symbols need to be added to the symbol group. It can be any diagram elements such as Nodes, Connectors, Groups, Containers, BPMN elements.
238+
* [CategorySource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.SymbolGroupViewModel.html#Syncfusion_UI_Xaml_Diagram_Stencil_SymbolGroupViewModel_CategorySource): Specifies the list of symbols need to be added to the `SymbolGroupViewModel` using the static resource key value from the predefined category collections.
237239

238-
* Keys: Specifies the static resource key name value of the category collection.
239-
* Title: Specifies the title that should be displayed as a header of the category collection.
240+
Additionally, You can dynamically add new symbols to symbol groups or remove existing ones at runtime. Similarly, you can also add or remove entire symbol groups within the stencil as needed.
240241

241-
## Built-in symbol categories
242+
### Adding Symbols via Symbols Property in SymbolGroupViewModel
242243

243-
The built-in shape paths available in the diagram resource dictionary are grouped by categories. The following are the built-in categories being available in the diagram resource dictionary:
244+
To add symbols through the `Symbols` property, you can define a collection of symbols directly within the `SymbolGroupViewModel`, allowing for more customized symbol definitions.
245+
246+
{% highlight xaml %}
247+
248+
<!--Initialize the stencil-->
249+
<syncfusion:Stencil x:Name="stencil"
250+
Title="Shapes"
251+
SymbolGroupDisplayMode="Accordion"
252+
SymbolSelectionMode="Multiple"
253+
DisplayMode="Expanded"
254+
GroupMappingName="Key">
255+
<syncfusion:Stencil.SymbolGroups>
256+
<syncfusion:SymbolGroups>
257+
<syncfusion:SymbolGroupViewModel Name="Symbols">
258+
<syncfusion:SymbolGroupViewModel.Symbols>
259+
<syncfusion:SymbolCollection>
260+
<syncfusion:NodeViewModel Name="Object"
261+
UnitHeight="50"
262+
UnitWidth="50"
263+
Shape="{StaticResource Object}"/>
264+
<syncfusion:NodeViewModel Name="User"
265+
UnitHeight="50"
266+
UnitWidth="50"
267+
Shape="{StaticResource User}"/>
268+
<syncfusion:NodeViewModel Name="Amplifier"
269+
UnitHeight="50"
270+
UnitWidth="50"
271+
Shape="{StaticResource Amplifier}"/>
272+
<syncfusion:NodeViewModel Name="CircularArrow"
273+
UnitHeight="50"
274+
UnitWidth="50"
275+
Shape="{StaticResource CircularArrow}"/>
276+
<syncfusion:NodeViewModel Name="Data1"
277+
UnitHeight="50"
278+
UnitWidth="50"
279+
Shape="{StaticResource Data1}"/>
280+
</syncfusion:SymbolCollection>
281+
</syncfusion:SymbolGroupViewModel.Symbols>
282+
</syncfusion:SymbolGroupViewModel>
283+
</syncfusion:SymbolGroups>
284+
</syncfusion:Stencil.SymbolGroups>
285+
</syncfusion:Stencil>
286+
287+
{% endhighlight %}
288+
289+
![SymbolGroupViewModel](SymbolGroup_images/SGVMSymbols.png)
290+
291+
[View Sample in GitHub](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Stencil/SymbolGroupViewModel/BasicSymbolGroupViewModel)
292+
293+
### Adding Symbols via CategorySource Property in SymbolGroupViewModel
294+
295+
The `sfDiagram` resource dictionary includes a wide array of shapes organized into categorized lists. These shape paths are grouped into specific categories to simplify the process of adding them to the stencil, avoiding repetitive additions. Below are the built-in categories available in the diagram resource dictionary:
244296

245297
* BasicShapes
246298
* FlowShapes
@@ -253,73 +305,52 @@ The built-in shape paths available in the diagram resource dictionary are groupe
253305
* SwimlaneShapes
254306
* BPMNEditorShapes
255307

256-
{% tabs %}
257-
{% highlight xaml %}
258-
<!--Initialize the stencil-->
259-
<stencil:Stencil x:Name="stencil"
260-
Title="Shapes"
261-
TitleTemplate="{StaticResource TitleTemplate}"
262-
ExpandMode="ZeroOrMore"
263-
BorderBrush="#dfdfdf"
264-
BorderThickness="1"
265-
GroupMappingKey="Key">
266-
<!--Initialize the stencil categories-->
267-
<stencil:Stencil.Categories>
268-
<stencil:StencilCategoryCollection>
269-
<!--Specify the basic shapes category with title and resource key-->
270-
<stencil:StencilCategory Title="Basic Shapes" Keys="{StaticResource BasicShapes}"/>
271-
</stencil:StencilCategoryCollection>
272-
</stencil:Stencil.Categories>
273-
</stencil:Stencil>
274-
{% endhighlight %}
275-
{% endtabs %}
276-
277-
![Basic Shapes](SymbolGroup_images/CategoryBasicShapes.png)
308+
You can also create custom symbol collections. This additional flexibility allows you to tailor the stencil to your specific needs beyond the built-in options.
278309

279-
## Add the custom shapes categories
310+
To add symbols to a Stencil through `SymbolGroupViewModel`, you can utilize the `CategorySource` property, which allows you to bind a predefined collection of symbols based on a static resource key. This enables dynamic loading of symbols into the group, ensuring that any updates to the category collection are reflected in the symbol group automatically.
280311

281-
The custom symbol collections can be added to the stencil by defining the custom symbol's resource collection.
282-
283-
{% tabs %}
284312
{% highlight xaml %}
285313

286-
<!--custom path data-->
287-
<sys:String x:Key="CustomPath">
288-
F1M1.66,0.25C0.882,0.25,0.25,0.881,0.25,1.66L0.25,24.622C0.25,25.401,0.882,26.032,1.66,26.032L4.48,26.032C5.259,26.032,5.89,25.401,5.89,24.622L5.89,1.66C5.89,0.881,5.259,0.25,4.48,0.25z
289-
</sys:String>
290-
291-
<!--custom shapes collection-->
292-
<x:Array Type="sys:String" x:Key="customShapeCollection">
293-
<sys:String>Rectangle</sys:String>
294-
<sys:String>Cube</sys:String>
295-
<sys:String>Triangle</sys:String>
296-
<sys:String>Ellipse</sys:String>
297-
<sys:String>CustomPath</sys:String>
298-
</x:Array>
299-
300-
<!--Template for stencil title-->
301-
<DataTemplate x:Key="TitleTemplate">
302-
<TextBlock x:Name="HeaderText" Text="{Binding}" FontSize="15" FontWeight="SemiBold" Foreground="#2b579a" >
303-
</TextBlock>
304-
</DataTemplate>
314+
<ResourceDictionary>
315+
<ResourceDictionary.MergedDictionaries>
316+
<!--Dictionary which contains the inbuilt shapes-->
317+
<ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />
318+
</ResourceDictionary.MergedDictionaries>
319+
320+
<!--custom path data-->
321+
<sys:String x:Key="CustomPath">
322+
F1M1.66,0.25C0.882,0.25,0.25,0.881,0.25,1.66L0.25,24.622C0.25,25.401,0.882,26.032,1.66,26.032L4.48,26.032C5.259,26.032,5.89,25.401,5.89,24.622L5.89,1.66C5.89,0.881,5.259,0.25,4.48,0.25z
323+
</sys:String>
324+
325+
<!--custom shapes collection-->
326+
<x:Array Type="sys:String" x:Key="customShapeCollection">
327+
<sys:String>Rectangle</sys:String>
328+
<sys:String>Cube</sys:String>
329+
<sys:String>Triangle</sys:String>
330+
<sys:String>Ellipse</sys:String>
331+
<sys:String>CustomPath</sys:String>
332+
</x:Array>
333+
</ResourceDictionary>
305334

306335
<!--Initialize the stencil-->
307-
<stencil:Stencil x:Name="stencil" Title="Shapes" TitleTemplate="{StaticResource TitleTemplate}" ExpandMode="ZeroOrMore"
308-
BorderBrush="#dfdfdf" BorderThickness="1">
309-
<!--Initialize the stencil categories-->
310-
<stencil:Stencil.Categories>
311-
<stencil:StencilCategoryCollection>
312-
<!--Specify the custom shapes category with title and resource key-->
313-
<stencil:StencilCategory Title="Custom shapes" Keys="{StaticResource customShapeCollection}"/>
314-
</stencil:StencilCategoryCollection>
315-
</stencil:Stencil.Categories>
316-
</Stencil:Stencil>
317-
{% endhighlight %}
318-
{% endtabs %}
336+
<syncfusion:Stencil x:Name="stencil"
337+
Title="Shapes"
338+
SymbolGroupDisplayMode="Accordion"
339+
SymbolSelectionMode="Multiple"
340+
DisplayMode="Expanded"
341+
GroupMappingName="Key">
342+
<syncfusion:Stencil.SymbolGroups>
343+
<syncfusion:SymbolGroups>
344+
<syncfusion:SymbolGroupViewModel Name="Basic Shapes" CategorySource="{StaticResource BasicShapes}"/>
345+
<syncfusion:SymbolGroupViewModel Name="BPMNEditor Shapes" CategorySource="{StaticResource BPMNEditorShapes}"/>
346+
<syncfusion:SymbolGroupViewModel Name="Custom Shapes" CategorySource="{StaticResource customShapeCollection}"/>
347+
</syncfusion:SymbolGroups>
348+
</syncfusion:Stencil.SymbolGroups>
349+
</syncfusion:Stencil>
319350

320-
![Custom Shapes collection](SymbolGroup_images/CustomShapes.png)
351+
![Category Source](SymbolGroup_images/BuiltInShapesList.png)
321352

322-
N> The custom symbol collections should be added in the App.xaml file.
353+
{% endhighlight %}
323354

324355
## Customize the appearance of the symbols in the built-in categories
325356

@@ -381,51 +412,6 @@ public class StencilViewModel : Stencil
381412

382413
[View Sample in GitHub](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Stencil/StencilCategory)
383414

384-
## View Models for the SymbolGroups
385-
386-
The `SfDiagram` provides supports to populate view models for each SymbolGroup created for the symbols added through the `SymbolSource` property.
387-
388-
The [SymbolGroupViewModel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.SymbolGroupViewModel.html) class provides the support to create the view models to the symbol group and provides supports to add symbols to it as Node, Connectors, groups and list of predefined symbols.
389-
390-
* [Name](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.SymbolGroupViewModel.html#Syncfusion_UI_Xaml_Diagram_Stencil_SymbolGroupViewModel_Name): Specifies the display name of the symbol group. It also adds the symbols to the symbol groups defined through the `SymbolSource` property which symbol has same `Key` value as this `Name` property.
391-
* [Symbols](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.SymbolGroupViewModel.html#Syncfusion_UI_Xaml_Diagram_Stencil_SymbolGroupViewModel_Symbols): Specifies the list of symbols need to be added to the symbol group. It can be any diagram elements of Nodes, Connectors, Groups, Containers, BPMN elements.
392-
* [CategorySource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Stencil.SymbolGroupViewModel.html#Syncfusion_UI_Xaml_Diagram_Stencil_SymbolGroupViewModel_CategorySource): Specifies the list of symbols need to be added to the `SymbolGroupViewModel` using the static resource key value from the predefined category collections.
393-
394-
In addition to that, new symbols can be added into the symbol groups or you can remove the existing symbols from any symbol group at run time. As same as symbols, new symbol group can be added into the stencil and remove the existing symbol group from the stencil.
395-
396-
{% highlight xaml %}
397-
<!--Initialize the stencil-->
398-
<syncfusion:Stencil x:Name="stencil"
399-
Title="Shapes"
400-
SymbolGroupDisplayMode="Accordion"
401-
SymbolSelectionMode="Multiple"
402-
DisplayMode="Expanded"
403-
GroupMappingName="Key">
404-
<!--Initialize the symbol groups-->
405-
<syncfusion:Stencil.SymbolGroups>
406-
<syncfusion:SymbolGroups>
407-
<syncfusion:SymbolGroupViewModel Name="Basic Shapes" CategorySource="{StaticResource BasicShapes}">
408-
<syncfusion:SymbolGroupViewModel.Symbols>
409-
<syncfusion:SymbolCollection>
410-
<syncfusion:NodeViewModel Name="Object"
411-
UnitHeight="50"
412-
UnitWidth="50"
413-
Shape="{StaticResource Object}"/>
414-
<syncfusion:NodeViewModel Name="User"
415-
UnitHeight="50"
416-
UnitWidth="50"
417-
Shape="{StaticResource User}"/>
418-
</syncfusion:SymbolCollection>
419-
</syncfusion:SymbolGroupViewModel.Symbols>
420-
</syncfusion:SymbolGroupViewModel>
421-
</syncfusion:SymbolGroups>
422-
</syncfusion:Stencil.SymbolGroups>
423-
</syncfusion:Stencil>
424-
{% endhighlight %}
425-
426-
![SymbolGroupViewModel](SymbolGroup_images/SymbolGroupViewModel.png)
427-
428-
[View Sample in GitHub](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Stencil/SymbolGroupViewModel/BasicSymbolGroupViewModel)
429415

430416
## See also
431417

‎wpf/Diagram/Stencil/SymbolGroup/SymbolGroup_images/BuiltInShapesList.png‎

74.1 KB
Loading

‎wpf/Diagram/Stencil/SymbolGroup/SymbolGroup_images/SGVMSymbols.png‎

10.3 KB
Loading

0 commit comments

Comments
 (0)