Create NodeViewModel in Code Behind - No Image in Symbol -

[Klaus Kirchhoff]

Hello,
I want to create the symbols for the stencil object (symbol source) in the code behind. The objects themselves are probably created but unfortunately you can see no symbol / image (See screenshot in appendix)

I can also select an object with the mouse and drag it to the designer, but it is not attached there.

If I use Conectoren, it works very well.

Is there a corresponding example? I am using C # WPF as a desktop application.

Here is my Code:

        private ObservableCollection<object> CreateSymbolSource()
        {

            ObservableCollection<object> symbolSource = new ObservableCollection<object>();

            var test = (this.Resources["Star"] as DataTemplate).Template;

            NodeViewModel nodeViewModel = new NodeViewModel();
            nodeViewModel.OffsetX = 100;
            nodeViewModel.OffsetY = 100;
            nodeViewModel.UnitHeight = 100;
            nodeViewModel.UnitWidth = 100;
            nodeViewModel.Key = "Basic Shapes";
            nodeViewModel.ShapeStyle = this.Resources["shapeStyle"] as Style;
            nodeViewModel.Shape = this.Resources["Star"] as DataTemplate;

            // That works
            ConnectorViewModel connectorViewModel = new ConnectorViewModel();
            connectorViewModel.Key = "Connectors";
            connectorViewModel.SourcePoint = new Point(100, 100);
            connectorViewModel.TargetPoint = new Point(200, 200);

            symbolSource.Add(connectorViewModel);
            symbolSource.Add(nodeViewModel);

            return symbolSource;

        }

Attachment: 1210_2017_122219_16f0691c.zip

[Ranjitha Amirthalingam]

Hi Klaus, 

 

Thanks for contacting Syncfusion support. 

 

Reported Issue: NodeViewModel is not visible on the Stencil. 

 

We have provided binding style support for ViewModel to View binding. We suspect that binding style is not added in your sample which causes the reported issue. We have provided sample and code example to represent this. Please refer to the sample from the below link. 

 

Code example: 

<ResourceDictionary.MergedDictionaries> 

                <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BindingStyle.xaml" />           </ResourceDictionary.MergedDictionaries> 

 

 

Also, we have provided code example to customize the ViewModel by using Common style for View. Please refer to the code example as below.

 

Code Example: 

<ResourceDictionary.MergedDictionaries> 

               <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BindingStyle.xaml" />           </ResourceDictionary.MergedDictionaries>

 

//to apply custom style for Node,NodeViewModel,Connector,ConnectorViewModel 

<Style TargetType="syncfusion:Node" BasedOn="{StaticResource NodeBindingStyle}">
</Style> 

<Style TargetType="syncfusion:Connector" BasedOn="{StaticResource ConnectorBindingStyle}">
</Style> 

 

 

 

 

Sample Link:
StencilSample
 

 

For more details, please navigate to the topic “View to ViewModel Binding” in the below online help documentation link.

Link: https://help.syncfusion.com/wpf/sfdiagram/data-binding 

 

 

Regards, 

Ranjitha A.