Problems with MVVM implementation of SfDiagram Control

[Walz]

Hey,

i have watched at your side :

- https://help.syncfusion.com/wpf/sfdiagram/overview

- and on Essential Studio Dashboard Examples

But for me everything is in codebehind. i am not able to bind my sfdiagram to a ViewModel. I would be glad if you could show me a mvvm example where you have bind the sfdiagram, nodes and connectors in a ViewModel. Thank you.

And I´m not able to use Sfdiagram. I always get the following 

Exeption:

The tag´SfDiagram´ does not exist in XML namespace 'http://schemas.syncfusion.com/wpf' 

But if you do F12 to SfDiagram the class SfDiagram gets opend, so it exist but still i get this message. I don´t understand

Code

Window x:Class="DiagramPrototype1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

        xmlns:local="clr-namespace:DiagramPrototype1"

   Grid

      syncfusion:SfDiagram x:Name="diagram" DefaultConnectorType="Line" 

         !--Initializes the Nodes--

         syncfusion:SfDiagram.Nodes....

         !--Initialize Connectors--

         syncfusion:SfDiagram.Connectors....

      /syncfusion:SfDiagram>

   /Grid

/Window

Can somebody explane why?

Kind regards

Raffi

[Suresh Shanmugam]

Hi Raffaella, 

 

Please find the response for your reported queries as below, 

 

S.No	Query	Response
1	i have watched at your side :  - https://help.syncfusion.com/wpf/sfdiagram/overview  - and on Essential Studio Dashboard Examples  But for me everything is in codebehind. i am not able to bind my sfdiagram to a ViewModel. I would be glad if you could show me a mvvm examplewhere you have bind the sfdiagram, nodes and connectors in a ViewModel. Thank you.	We have provided the Diagram control functionalities in our dashboard samples with MVVM. For more information about your requirement, Please refer the Diagram builder sample. Please refer the below location.    WPF sample  location : Dashboard -> WPF -> Showcase Samples -> DiagramBuilder
2	And I´m not able to use Sfdiagram. I always get the following    Exeption:    The tag´SfDiagram´ does not exist in XML namespace 'http://schemas.syncfusion.com/wpf'	Please let us know the specific details and sample to represent this, so that we can proceed with the issue further.

 

 

Regards, 

Suresh Shanmugam 

[Suresh Shanmugam]

Hi Raffaella, 

 

Please ignore our previous update. 

 

Please find the response for your reported queries as below, 

 

S.No	Query	Response
1	i have watched at your side :  - https://help.syncfusion.com/wpf/sfdiagram/overview  - and on Essential Studio Dashboard Examples  But for me everything is in codebehind. i am not able to bind my sfdiagram to a ViewModel. I would be glad if you could show me a mvvm examplewhere you have bind the sfdiagram, nodes and connectors in a ViewModel. Thank you.	We have provided the Diagram control functionalities in our dashboard samples with MVVM. For more information about your requirement, Please refer the Diagram builder sample. Please refer the below location.    WPF sample  location : Dashboard -> WPF -> Showcase Samples -> DiagramBuilder
2	And I´m not able to use Sfdiagram. I always get the following    Exeption:    The tag´SfDiagram´ does not exist in XML namespace 'http://schemas.syncfusion.com/wpf'	Could you please verify that assemblies "Syncfusion.SfDiagram.WPF" added in your application? Also ensure that the TargetFramework version of your project and referred assemblies are the same.    ScreenShot:

 

 

Regards, 

Suresh Shanmugam 

[Walz]

Thank you for your quick answer. For the first issue i will have a look again, thanks. For the second issue i use a wrong version of sfdiagram so i had to use another one as reference in my project.

kind regards 

Raffi

[Suresh Shanmugam]

Hi Raffaella, 

 

Thanks for the update. We will wait to hear from you . 

 

Regards, 

Suresh Shanmugam 

[Walz]

Hey ,

thanks for waiting. I´m still not possible to reproduce the samples to 100% Because I miss one file.

 I´m not able to bind the Resourcedictionary for shapes in my xaml view when i don´t have your BasicShapes.xaml

Link: https://help.syncfusion.com/wpf/sfdiagram/shapes 

       
        Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />

from where can i get this?

Kind regards

Raffi

[Suresh Shanmugam]

Hi Raffaella, 

 

Reported query : “Not able to bind the Resourcedictionary for shapes in my xaml view when i don´t have your BasicShapes.xaml” 

 

BasicShapes.xaml is a resource file that has some built-in shapes. This file is embedded with SfDiagram assembly. You can access these built-in shapes in application side, when you refer the BasicShapes.xaml in ResourceDictionary. Please make sure that your project is has SfDiagram assembly reference before accessing this resource. 

 

In DiagramBuilder sample, we have refer BasicShapes.xaml file in App.Xaml and also access these shapes in DiagramBuilderUI.xaml file. In this file, we have used these Shapes to the Node’s Shape property. 

 

Please refer the code as below, 

 

Code example, 

 

 

<viewmodel:NodeVM Key="Basic Shapes" UnitHeight="100" UnitWidth="100"                                 

                  Shape="{StaticResource Rectangle}" ShapeStyle="{StaticResource SymbolStyle}"> 

 

Here, Rectangle Shape is access from BasicShapes.xaml file. 

 

 

 

 

Regards, 

Suresh Shanmugam 

[Walz]

Okey I will try it and give you feedback to the shapes topic if it works or not.

But still i have the mvvm problem binding an employeelist with one employee as one node on my sfdiagram. And EmployeeList is a property (observablecollection) in my Viewmodel. I have tried the following code:

     

     

                                     DataSource="{Binding EmployeeList}"

                                     Id="EmpId"

                                     ParentId="ParentId"

                                     Root="1" />

   

   

     

     

                            DataSourceSettings="{StaticResource DataSourceSettings}"

                            MouseDoubleClick="Diagram_OnMouseDoubleClick" />

   

But this doesn´t work, because the exception says that i can only use Binding when i have a dependency property and dependency object, so how can i bind my list for each node into sfdiagram?

[Walz]

Shape implementation Still not work. Here you can see my code:

MyResourceDictionary.xaml:

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

   

     

     

   

App.xaml:

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             StartupUri="MainWindow.xaml">

   

     

   

MainWondow.xaml:

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

        mc:Ignorable="d">

   

     

           

         

     

     

     

   

   

     

     

   

[Walz]

something went wrong with my copy paste code, because here you get it again:

Shape Problem

MyResourceDictionary.xaml

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

   

     

     

   

App.xaml

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             StartupUri="MainWindow.xaml">

   

     

   

MainWindow.xaml

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

        mc:Ignorable="d">

   

     

 Hello,           

         

 you can close this ticket. I think it is better to split my questions into new topic and smaller units. Thanks

Kind regards

Raffi

   

   

     

     

   

MVVM DataBinding Problem

     

     

                                     DataSource="{Binding EmployeeList}"

                                     Id="EmpId"

                                     ParentId="ParentId"

                                     Root="1" />

   

   

     

     

                            DataSourceSettings="{StaticResource DataSourceSettings}"

                            MouseDoubleClick="Diagram_OnMouseDoubleClick" />

   

[Keerthivasan Ramamoorthy]

Hi Raffaella, 

Requirements: 

Need to Create a DataSourceSettings sample in MVVM with below requirements. 

1.Different width and Height for each Node. 

2.Each Node contains different shape. 

3.Bind a custom Collection to DataSource. 

 

Based on your requirements, we have created a simple MVVM sample for DataSourceSettings. Please refer the sample link and screenshot as below. 

 

Sample link: MVVM_DataSource
 

 

Screenshot: 

 

 

Sample details: 

As DataSourceSetting class is a CLR object, it not possible to do data binding with its properties. It is expected to treat DataSourceSettings object as a ViewModel object and bind it to SfDiagram.DataSourceSetting. However, to enable binding, you can create your own Class that inherits Freezable and implementing IDataSourceSettings as dependency property. This will enable binding. 

For information about DataSource, Datasourcesettings and layout, Please refer our online documentation link as below. 

Datasource and Datasourcesetting link: https://help.syncfusion.com/wpf/sfdiagram/datasource 

Layout link: https://help.syncfusion.com/wpf/sfdiagram/automatic-layouts 

 

Regards, 

Keerthivasan R. 

 

[Keerthivasan Ramamoorthy]

Hi Raffaella, 

 

Please ignore our last update. 

 

Requirements: 

Need to Create a DataSourceSettings sample in MVVM with below requirements. 

1.Different width and Height for each Node. 

2.Each Node contains different shape. 

3.Bind a custom Collection to DataSource. 

4. shape gets from resource-dictionary(MyResourceDictionary.xaml). 

 

Based on your requirements, we have created a simple MVVM sample for DataSourceSettings. Please refer the sample link and screenshot as below. 

 

Sample link: MVVM_DataSource
 

 

Screenshot: 

 

 

Sample details: 

As DataSourceSetting class is a CLR object, it not possible to do data binding with its properties. It is expected to treat DataSourceSettings object as a ViewModel object and bind it to SfDiagram.DataSourceSetting. However, to enable binding, you can create your own Class that inherits Freezable and implementing IDataSourceSettings as dependency property. This will enable binding. 

We get the shape from resourcedictionary((ResourceDictionary.xaml) and have setted different shape, width and height for the each Node. 

For information about DataSource, Datasourcesettings and layout, Please refer our online documentation link as below. 

Datasource and Datasourcesetting link: https://help.syncfusion.com/wpf/sfdiagram/datasource 

Layout link: https://help.syncfusion.com/wpf/sfdiagram/automatic-layouts 

 

Regards, 

Keerthivasan R. 

[Walz]

Hello Keerthivasan R.,

thank you very much :)

Kind regards 

Raffi

[Keerthivasan Ramamoorthy]

Hi Raffaella, 

 

Thanks for the update.    

Please let us know if you need any other assistance.   

   

Regards,   

Keerthivasan R.