Animating Nodes in a Diagram (app uses Prism & MVVM)

[Marc Francois NO LONGER WITH COMPANY]

Third time lucky posting (different issue this time) :)

I'm working on an application that utilises Prism and an MVVM architecture.  We currently have a requirement to animate nodes on a sync fusion diagram as the user drags an item over them, from another user control on the same screen.

Using the Seat Booking demo from the SDK as a starting point, I've noticed a few fundamental differences in the way things are done, that are not compatible with how we need to do them to fit with our architecture.

** Your demo code does all of the data initialisation/creation, diagram.nodes collection population, eventhandler initialisation and animation logic in the code behind.

** Our application requires the nodes to be created and the diagram.nodes collection to be populated when the view model loads.  This means that we cannot initialise per-node eventhandlers in this part of the code, nor have any animation logic.

** Our application architecture is such that events coming from the view are handled using Prism Behaviours or object binding, to allow us to decouple event and UI logic between view and view model.  This works very well so far, however it seems that only events on the SFDiagram itself (such as Diagram.Drop) can be handled in this manner, and not events from "child" objects such as node.pointerenter.   

I'd be extremely grateful if you could provide guidance on how we make use of the way things are done in the demo in conjunction with our architecture to get animated nodes working as required - but make sure that we do not have UI specific code in our view model (which is currently where our events must be handled)

Many thanks in advance

[Ramya Thirugnanam]

Hi Marc,

 

Regarding to “Animating Nodes in a Diagram (app uses Prism & MVVM)”, after analyzing your scenario, we have suggested the following two ways to achieve your requirement. Please refer to the suggestions as below. We have created a simple samples to represent both the suggestions. Please refer to the sample from the attachment.

 

Suggestion 1: When using Sfdiagram.Nodes.Add (Business Object /INode)

 

Sample Details:

When a non UIElement is added in SfDiagram.Nodes, a new view will be created using ‘GetNodeForItemOverride’ virtual method, this function can be overridden to create a new View (Eg: Node).

In this sample, a new property ‘NodeDataTemplate’ of type ‘DataTemplate’ is used to create Node (View) in Xaml. We have derived the SfDiagram to override the GetNodeForItemOverride for creating the View for the BO (Non-UI elements) using the property ‘NodeDataTemplate’.

1. Create the Node (View )in  Data Template in Xaml .

[XAML]

 

  <local:DerivedSfDiagram>

            <local:DerivedSfDiagram.NodeDataTemplate>

                <DataTemplate>

                   <!-- Add necessary PRISM API to bind events to ViewModel for Node-->

                    <Syncfusion:Node></Syncfusion:Node>

                </DataTemplate>

            </local:DerivedSfDiagram.NodeDataTemplate>

        </local:DerivedSfDiagram>

2. In Overridden method of SfDiagram, please use LoadContent() method of DatatTemplate to create a new Node as below.

[C#]

 

protected override Node GetNodeForItemOverride(object item)

{

   //Creating the View for Non-UI elements

    return NodeDataTemplate.LoadContent() as Node;
}

Suggestion 2: When using Sfdiagram.Nodes.Add (Node)

 

After analyzing your requirement, you are directly creating the new instance of Node and adding it into SfDiagram.Nodes. Instead you can create the Node by using use the LoadContent() method of Data Template.

1.Create the DataTemplate somewhere in resource.

[XAML]
<DataTemplate x:Key="NewNode">

<!-- —Add necessary PRISM API to bind events to ViewModel for Node>           

<Syncfusion:Node>

 

</Syncfusion:Node>

</DataTemplate>

2.Create the Node suing LoadContent() of DataTemplate.

[C#] (existing code):

Node n1 = new Node();

 

[C#] (new approach)

Node n1 = (this.Resources["NewNode"] as DataTemplate).LoadContent() as Node;

For further details about rendering of View and ViewModel, please refer to the online help documentation link.

Link: http://help.syncfusion.com/UG/winrt/Documents/rendering.htm

Please let us know if you have any concerns,
Regards,
Ramya

114699_3620fcfe.zip

[fernando]

hello good afternoon I am fernando(Zuko).

I have a question?

as I can create the button event that there will be the xml file created by diagram builler without the OpenDialog so I have understood would have a static route but I have no idea how to display it in the environment Diagram builler of Syncfusion.

Can you help me please.

[fernando]

hello good afternoon I am fernando(Zuko).

I have a question?

as I can create the button event that there will be the xml file created by diagram builler without the OpenDialog so I have understood would have a static route but I have no idea how to display it in the environment Diagram builler of Syncfusion.

Can you help me please.

how can I open a file in Diagram builler without using an OpenDialog?

is there way to do this programmatically?

[fernando]

hello good afternoon I am fernando(Zuko).

I have a question?

as I can create the button event that there will be the xml file created by diagram builler without the OpenDialog so I have understood would have a static route but I have no idea how to display it in the environment Diagram builler of Syncfusion.

Can you help me please.

how can I open a file in Diagram builler without using an OpenDialog?

is there way to do this programmatically?

I am using WPF

[Keerthivasan Ramamoorthy]

Hi Fernando, 

 

Requirement: Need to open a xml file  without using OpenFileDialog. 

 

We have analyzed your requirement and prepared a simple sample to achieve your requirement. Please refer to the sample link as below. 

Sample Link:114699
 

 

If our sample doesn’t meet your requirement, please provide a simple sample or screenshot to represent your requirement. 

 

Regards, 

Keerthivasan R.  

[fernando]

I can send as the parameter OnOpenCommand bring in another class and try but I could not get him to send mark an error when trying to open the xml in the diagram builler.

This code belongs to diagrambuillerVM forming Mars lataforma of Syncfutions.

I am using wpf.

then you have the code diagrambuillerVM

 public void OnOpenCommand (object param)

{

 (This.SelectedDiagram.Nodes as ObservableCollection <NodeVM>) Clear ().;

                (This.SelectedDiagram.Connectors as ObservableCollection <ConnectorVM>) Clear ().;

                (This.SelectedDiagram.Groups as ObservableCollection <GroupVM>) Clear ().;

                IGraphInfo graph = this.SelectedDiagram.Info as IGraphInfo;

                // Code of download file in view of the db using new

                string [] = Directory.GetFiles filepaths ( "C: \\ Users \\ \\ \\ Documents Allware xml_prueba_soriana \\");

                using (FileStream stream = new FileStream (filepaths [0], FileMode.Open, FileAccess.Read))

                {

                    graph.Load (stream);

                }

                (This.SelectedDiagram.PageSettings as PageVM) .InitDiagram ();

                (This.SelectedDiagram.PageSettings as PageVM) .InitDiagram (this.SelectedDiagram);

                File.Delete (filepaths [0]);

                //}

            }

}

this is my code where command to bring is through window called test against

 private void dataGrid_MouseDoubleClick (object sender, MouseButtonEventArgs e)

        {

     DiagramBuilderVM DiagramBuilderVM open = new ();

open.OnOpenCommand () -> error I have to send a parameter but not as sending a parameter in this part since OnOpenCommand expects espesifico value for opening the file in the environment diagrambuiller

}

[Keerthivasan Ramamoorthy]

Hi Fernando, 

 

Requirement: Need to open a xml Diagram file  without using OpenFileDialog 

 

We have analyzed your requirement and provided a “code example” and “xml file” to achieve your requirement. Place a attached xml file(contain nodes and connectors) into the bin folder of the DiagramBuilder sample, then execute the open command by click the open button. Please refer the code example and xml file link as mentioned below. 

 

Code Example: 

Place the below code in MainWindow.xaml(above the SaveAs command) 

<!--Open Command--> 

<syncfusion:BackstageTabItem Header="Open"> 

 <Grid Margin="10"> 

  <Button Height="65" Width="300" Command="{Binding DataContext.Open,   Mode=TwoWay,ElementName=ribbon}" VerticalAlignment="Top" HorizontalAlignment="Left"> 

  <Button.Template> 

  <ControlTemplate> 

   <StackPanel Orientation="Horizontal"> 

   <Image Source="{StaticResource newpagepng}" Width="35" Height="35" Stretch="Fill" VerticalAlignment="Center"/> 

   <TextBlock Text="Computer" FontSize="14" VerticalAlignment="Center"/> 

 <StackPanel.Style> 

<Style TargetType="StackPanel"> 

<Style.Triggers> 

<Trigger Property="IsMouseOver" Value="True"> 

<Setter Property="Background" Value="LightBlue"/> 

</Trigger> 

<Trigger Property="IsMouseOver" Value="False"> 

<Setter Property="Background" Value="Transparent"/> 

</Trigger> 

</Style.Triggers> 

</Style> 

</StackPanel.Style> 

</StackPanel> 

</ControlTemplate> 

</Button.Template> 

</Button> 

</Grid> 

</syncfusion:BackstageTabItem> 

 

C# code(DiagramBuillerVM): 

//Open Command  

  public void OnOpenCommand(object param) 

        { 

                (this.SelectedDiagram.Nodes as ObservableCollection<NodeVM>).Clear(); 

                (this.SelectedDiagram.Connectors as ObservableCollection<ConnectorVM>).Clear(); 

                (this.SelectedDiagram.Groups as ObservableCollection<GroupVM>).Clear(); 

                IGraphInfo graph = this.SelectedDiagram.Info as IGraphInfo; 

                FileStream fs = new FileStream("Diagram.xml", FileMode.Open, FileAccess.Read); 

                graph.Load(fs); 

                fs.Close(); 

                (this.SelectedDiagram.PageSettings as PageVM).InitDiagram(); 

                (this.SelectedDiagram.PageSettings as PageVM).InitDiagram(this.SelectedDiagram); 

 

        } 

 

 

Xml File: 

 

Regards, 

Keerthivasan R. 

 

[Keerthivasan Ramamoorthy]

Hi Fernando, 

 

Please ignore our previous update. 

 

Requirement: Need to open a xml Diagram file  without using OpenFileDialog 

 

We have analyzed your requirement and provided a “code example” and “xml file” to achieve your requirement. Place a attached xml file(contain nodes and connectors) into the bin folder of the DiagramBuilder sample, then execute the open command by click the open button. Please refer the code example and xml file link as mentioned below. 

 

Code Example: 

Place the below code in MainWindow.xaml(above the SaveAs command) 

<!--Open Command--> 

<syncfusion:BackstageTabItem Header="Open"> 

 <Grid Margin="10"> 

  <Button Height="65" Width="300" Command="{Binding DataContext.Open,   Mode=TwoWay,ElementName=ribbon}" VerticalAlignment="Top" HorizontalAlignment="Left"> 

  <Button.Template> 

  <ControlTemplate> 

   <StackPanel Orientation="Horizontal"> 

   <Image Source="{StaticResource newpagepng}" Width="35" Height="35" Stretch="Fill" VerticalAlignment="Center"/> 

   <TextBlock Text="Computer" FontSize="14" VerticalAlignment="Center"/> 

 <StackPanel.Style> 

<Style TargetType="StackPanel"> 

<Style.Triggers> 

<Trigger Property="IsMouseOver" Value="True"> 

<Setter Property="Background" Value="LightBlue"/> 

</Trigger> 

<Trigger Property="IsMouseOver" Value="False"> 

<Setter Property="Background" Value="Transparent"/> 

</Trigger> 

</Style.Triggers> 

</Style> 

</StackPanel.Style> 

</StackPanel> 

</ControlTemplate> 

</Button.Template> 

</Button> 

</Grid> 

</syncfusion:BackstageTabItem> 

 

C# code(DiagramBuillerVM): 

//Open Command  

  public void OnOpenCommand(object param) 

        { 

                (this.SelectedDiagram.Nodes as ObservableCollection<NodeVM>).Clear(); 

                (this.SelectedDiagram.Connectors as ObservableCollection<ConnectorVM>).Clear(); 

                (this.SelectedDiagram.Groups as ObservableCollection<GroupVM>).Clear(); 

                IGraphInfo graph = this.SelectedDiagram.Info as IGraphInfo; 

                FileStream fs = new FileStream("Diagram.xml", FileMode.Open, FileAccess.Read); 

                graph.Load(fs); 

                fs.Close(); 

                (this.SelectedDiagram.PageSettings as PageVM).InitDiagram(); 

                (this.SelectedDiagram.PageSettings as PageVM).InitDiagram(this.SelectedDiagram); 

 

        } 

 

 

Xml File:Diagram_XML
 

 

Regards, 

Keerthivasan R. 

[fernando]

Hi Fernando, 

 

Please ignore our previous update. 

 

Requirement: Need to open a xml Diagram file  without using OpenFileDialog 

 

We have analyzed your requirement and provided a “code example” and “xml file” to achieve your requirement. Place a attached xml file(contain nodes and connectors) into the bin folder of the DiagramBuilder sample, then execute the open command by click the open button. Please refer the code example and xml file link as mentioned below. 

 

Code Example: 

Place the below code in MainWindow.xaml(above the SaveAs command) 

<!--Open Command--> 

<syncfusion:BackstageTabItem Header="Open"> 

 <Grid Margin="10"> 

  <Button Height="65" Width="300" Command="{Binding DataContext.Open,   Mode=TwoWay,ElementName=ribbon}" VerticalAlignment="Top" HorizontalAlignment="Left"> 

  <Button.Template> 

  <ControlTemplate> 

   <StackPanel Orientation="Horizontal"> 

   <Image Source="{StaticResource newpagepng}" Width="35" Height="35" Stretch="Fill" VerticalAlignment="Center"/> 

   <TextBlock Text="Computer" FontSize="14" VerticalAlignment="Center"/> 

 <StackPanel.Style> 

<Style TargetType="StackPanel"> 

<Style.Triggers> 

<Trigger Property="IsMouseOver" Value="True"> 

<Setter Property="Background" Value="LightBlue"/> 

</Trigger> 

<Trigger Property="IsMouseOver" Value="False"> 

<Setter Property="Background" Value="Transparent"/> 

</Trigger> 

</Style.Triggers> 

</Style> 

</StackPanel.Style> 

</StackPanel> 

</ControlTemplate> 

</Button.Template> 

</Button> 

</Grid> 

</syncfusion:BackstageTabItem> 

 

C# code(DiagramBuillerVM): 

//Open Command  

  public void OnOpenCommand(object param) 

        { 

                (this.SelectedDiagram.Nodes as ObservableCollection<NodeVM>).Clear(); 

                (this.SelectedDiagram.Connectors as ObservableCollection<ConnectorVM>).Clear(); 

                (this.SelectedDiagram.Groups as ObservableCollection<GroupVM>).Clear(); 

                IGraphInfo graph = this.SelectedDiagram.Info as IGraphInfo; 

                FileStream fs = new FileStream("Diagram.xml", FileMode.Open, FileAccess.Read); 

                graph.Load(fs); 

                fs.Close(); 

                (this.SelectedDiagram.PageSettings as PageVM).InitDiagram(); 

                (this.SelectedDiagram.PageSettings as PageVM).InitDiagram(this.SelectedDiagram); 

 

        } 

 

 

Xml File:Diagram_XML
 

 

Regards, 

Keerthivasan R. 

but my question still?

as I can get  the  parameter (object param) at an event doubleclick.

immediately he showed them my code are two distinct classes

the first code is of Syncfution. In this code I have just a problem in the part of (graph)

  public void OnOpenCommand(object param)

        {

            (this.SelectedDiagram.Nodes as ObservableCollection<NodeVM>).Clear();

            (this.SelectedDiagram.Connectors as ObservableCollection<ConnectorVM>).Clear();

            (this.SelectedDiagram.Groups as ObservableCollection<GroupVM>).Clear();

            IGraphInfo graph = this.SelectedDiagram.Info as IGraphInfo; // error date null 

            FileStream fs = new FileStream(@"C:\Soriana_Dll\Download_file.xml", FileMode.Open, FileAccess.Read);

            graph.Load(fs);

            fs.Close();

            (this.SelectedDiagram.PageSettings as PageVM).InitDiagram();

            (this.SelectedDiagram.PageSettings as PageVM).InitDiagram(this.SelectedDiagram);

        }

my code the other class openfile

 private void dataGrid_MouseDoubleClick(object sender, MouseButtonEventArgs e)

        {

 DiagramBuilderVM open = new DiagramBuilderVM(); //DiagramBuilderVM is the name of the class of syncfution where is the method OnOpenCommand

open.OnOpenCommand(); // there is no argument givent that corresponds to the  required  formal  parameter `param` of  DiagramBuilderVM .OnOpenCommand(object)

}

I try placing

Este

null

and this bad  as it expects an object but I do not know what the object is.

Can you help me? place Atte: zuko 

[Keerthivasan Ramamoorthy]

Hi Fernando, 

 

After analyzing the provided code example, We came to know that the new instance for the DiagramBuilderVM is created. So, the info property of the SelectedDiagram becomes null.  

Please set the Datacontext of custom class as represented in below Code Example to resolve the issue. Please refer to the code example as below. 

 

Code Example: 

//In MainWindow we have created a new instance of your class and set DataContext for your class as MainWindow.(MainWindow) 

private void TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

{ 

 

YourNewClass n = new YourNewClass(); 

n.DataContext = this; 

} 

 

 

//Place the below code into your new class Loaded event.(YourNewClass) 

void Window_Loaded(object sender, RoutedEventArgs e) 

{ 

 

DiagramBuilder.MainWindow Main=this.DataContext as DiagramBuilder.MainWindow; 

(Main.DataContext as DiagramBuilder.ViewModel.DiagramBuilderVM).OnOpenCommand(param); 

} 

 

 

//Open Command(DiagramBuilderVM) 

public void OnOpenCommand(object param) 

{ 

(this.SelectedDiagram.Nodes as ObservableCollection<NodeVM>).Clear(); 

(this.SelectedDiagram.Connectors as ObservableCollection<ConnectorVM>).Clear(); 

(this.SelectedDiagram.Groups as ObservableCollection<GroupVM>).Clear(); 

IGraphInfo graph = this.SelectedDiagram.Info as IGraphInfo; 

FileStream fs = new FileStream("Diagram.xml", FileMode.Open, FileAccess.Read); 

graph.Load(fs); 

fs.Close(); 

(this.SelectedDiagram.PageSettings as PageVM).InitDiagram(); 

(this.SelectedDiagram.PageSettings as PageVM).InitDiagram(this.SelectedDiagram); 

} 

 

 

Regards, 

Keerthivasan R. 

 

[fernando]

I am Using  

dataGrid_MouseDoubleClick 

I'm not using 

TextBlock_MouseLeftButtonDown

I have a problem if I use.

void Window_Loaded(object sender, RoutedEventArgs e) 

{ 

 

DiagramBuilder.MainWindow Main=this.DataContext as DiagramBuilder.MainWindow; 

(Main.DataContext as DiagramBuilder.ViewModel.DiagramBuilderVM).OnOpenCommand(param); --> on the part of param not find the parameter value

} 

[fernando]

sorry for the previous publication

I have a problem and followed in his footsteps but I make a mistake and look in forums but can not find help, the mistake I have is the following

void Window_Loaded(object sender, RoutedEventArgs e) 

{ 

Soriana.MainWindow Main = this.DataContext as Soriana.MainWindow;

(Main.DataContext as Soriana.ViewModel.DiagramBuilderVM).OnOpen(param);--> on the part of param not find the parameter value

} 

error :D

Object reference not set to an instance of an object.

Attachment: Captura_de_pantalla_(200)_6046c97e.rar

[Keerthivasan Ramamoorthy]

 Hi Fernando, 

 

Thanks for provided a screenshot. 

 

We have analyzed your scenario and suspect the value of Main.DataContext or OnOpen(param) become null. So please check with your end. 

 

Note: 

To replicate and validate the reported issue at our end, please share a sample to check and provide you the prompt solution at the earliest. 

 

 

Regards, 

Keerthivasan R. 

[fernando]

 Hi Fernando, 

 

Thanks for provided a screenshot. 

 

We have analyzed your scenario and suspect the value of Main.DataContext or OnOpen(param) become null. So please check with your end. 

 

Note: 

To replicate and validate the reported issue at our end, please share a sample to check and provide you the prompt solution at the earliest. 

 

 

Regards, 

Keerthivasan R. 

Hi !!

Can you help me?

This is my code.

<syncfusion:BackStageCommandButton Header="Open" Click="openButton_Click"  Command="{Binding DataContext.Open,ElementName=diagrambuilder}"></syncfusion:BackStageCommandButton>

As I can prevent it runs first.

Command="{Binding DataContext.Open,ElementName=diagrambuilder}"

I first want to run the option

 Click="openButton_Click"

Then I leave a video

Attachment: Can_you_Help_me__1fa18fe6.rar

[fernando]

Hi !!

Can you help me?

This is my code.

<syncfusion:BackStageCommandButton Header="Open" Click="openButton_Click"  Command="{Binding DataContext.Open,ElementName=diagrambuilder}"></syncfusion:BackStageCommandButton>

As I can prevent it runs first.

Command="{Binding DataContext.Open,ElementName=diagrambuilder}"

I first want to run the option

 Click="openButton_Click"

Then I leave a video

Attachment: Can_you_Help_me__83d86bb4.rar

[Keerthivasan Ramamoorthy]

Hi Fernando, 

 

Thanks for shared a video. 

 

Reported issue: Need to execute the button click event functionality first then execute the Button command. 

 

We have analyzed the reported query, the Click event and Command depict  the same behavior of Button. We suggest that create a custom Button and use custom button command to resolve the reported issue . 

 

Regards, 

Keerthivasan R. 

[fernando]

Hi Fernando, 

 

Thanks for shared a video. 

 

Reported issue: Need to execute the button click event functionality first then execute the Button command. 

 

We have analyzed the reported query, the Click event and Command depict  the same behavior of Button. We suggest that create a custom Button and use custom button command to resolve the reported issue . 

 

Regards, 

Keerthivasan R. 

Thank you.

[Keerthivasan Ramamoorthy]

Hi Fernando,  

  

Thanks for the update.   

Please let us know if you need any further assistance.  

  

Regards,  

Keerthivasan R.  

[fernando]

Hi Fernando, 

 

Thanks for shared a video. 

 

Reported issue: Need to execute the button click event functionality first then execute the Button command. 

 

We have analyzed the reported query, the Click event and Command depict  the same behavior of Button. We suggest that create a custom Button and use custom button command to resolve the reported issue . 

 

Regards, 

Keerthivasan R. 

How i can create other figure?

As an example a sign of cents  ¢

[Keerthivasan Ramamoorthy]

Hi Fernando, 

 

Following is the same response as updated in the Forum #115983. 

We have provided a code example for Diagrambuilder sample in WPF. Please find the code example and screenshot as below. 

Code Example: 

<!--Dolor--> 

<DataTemplate x:Key="Dolor"> 

<Viewbox Stretch="Fill"> 

<Grid> 

<TextBlock Text="$"></TextBlock> 

</Grid> 

</Viewbox> 

</DataTemplate> 

 

<!--Cent--> 

<DataTemplate x:Key="Cent"> 

<Viewbox Stretch="Fill"> 

<Grid> 

<TextBlock Text="¢"></TextBlock> 

</Grid> 

</Viewbox> 

</DataTemplate> 

 

<!--Basic Shapes--> 

<syncfusion:NodeViewModel  Key="Basic Shapes" UnitHeight="50" UnitWidth="50" OffsetX="100" OffsetY="100" ContentTemplate="{StaticResource Dolor}" Shape="{StaticResource Rectangle}" ShapeStyle="{StaticResource SymbolStyle}"></syncfusion:NodeViewModel> 

<syncfusion:NodeViewModel  Key="Basic Shapes" UnitHeight="50" UnitWidth="50" OffsetX="100" OffsetY="100" ContentTemplate="{StaticResource Cent}" Shape="{StaticResource Rectangle}" ShapeStyle="{StaticResource SymbolStyle}"></syncfusion:NodeViewModel> 

 

In NodeVm.cs, we need to comment this.ContentTemplate = null line in OnContentTemplateChanged event. For more information please refer the below code. 

 

private void OnContentTemplateChanged() 

{ 

//this.ContentTemplate = null; 

} 

 

 

 

Screenshot: 

 

 

 

Regards, 

Keerthivasan R. 

[fernando]

Hi Fernando, 

 

Following is the same response as updated in the Forum #115983. 

We have provided a code example for Diagrambuilder sample in WPF. Please find the code example and screenshot as below. 

Code Example: 

<!--Dolor--> 

<DataTemplate x:Key="Dolor"> 

<Viewbox Stretch="Fill"> 

<Grid> 

<TextBlock Text="$"></TextBlock> 

</Grid> 

</Viewbox> 

</DataTemplate> 

 

<!--Cent--> 

<DataTemplate x:Key="Cent"> 

<Viewbox Stretch="Fill"> 

<Grid> 

<TextBlock Text="¢"></TextBlock> 

</Grid> 

</Viewbox> 

</DataTemplate> 

 

<!--Basic Shapes--> 

<syncfusion:NodeViewModel  Key="Basic Shapes" UnitHeight="50" UnitWidth="50" OffsetX="100" OffsetY="100" ContentTemplate="{StaticResource Dolor}" Shape="{StaticResource Rectangle}" ShapeStyle="{StaticResource SymbolStyle}"></syncfusion:NodeViewModel> 

<syncfusion:NodeViewModel  Key="Basic Shapes" UnitHeight="50" UnitWidth="50" OffsetX="100" OffsetY="100" ContentTemplate="{StaticResource Cent}" Shape="{StaticResource Rectangle}" ShapeStyle="{StaticResource SymbolStyle}"></syncfusion:NodeViewModel> 

 

In NodeVm.cs, we need to comment this.ContentTemplate = null line in OnContentTemplateChanged event. For more information please refer the below code. 

 

private void OnContentTemplateChanged() 

{ 

//this.ContentTemplate = null; 

} 

 

 

 

Screenshot: 

 

 

 

Regards, 

Keerthivasan R. 

Hi !! 

Again?

How I can convert a xml file to a pdf, I am using DiagramBuiler  of wpf (Windows Presentation Foundation)

the Xml file is created by (DiagramBuiler of syncfusion)

link of DiagramBuiler of syncfusion

https://www.syncfusion.com/products/wpf/diagram

Can you help me? 

Please 

Attachment: Xml_Creating_By_Diagrambuiler_1538527.rar

[Ranjitha Amirthalingam]

Hi Fernando, 

 

Following is the same response updated in the forum #115983. 

 

We have provided the code example to enable Printing option in Diagram Builder sample. Please refer to the code example as below. 

 

public void OnPrintCommand(object param) 

{ 

    ExportSettings settings = new ExportSettings() 

     { 

        ImageStretch = Stretch.Fill, 

        ExportMode = ExportMode.PageSettings 

     }; 

     (SelectedDiagram.Info as IGraph).ExportSettings = settings; 

     (SelectedDiagram.Info as IGraph).PrintingService.ShowDialog = true; 

     (SelectedDiagram.Info as IGraph).PrintingService.Print(); 

}  

 

Also, provided Xaml code to bind the Print command in a Button .Please refer to the code as below. 

 

<syncfusion:BackStageCommandButton Header="Print" Command="{Binding DataContext.Print,Mode=TwoWay,ElementName=ribbon}" > </syncfusion:BackStageCommandButton>  

 

 

Note: 

Currently, we are checking “how to export Xml file as Pdf”. We will update the status on 29^th July, 2016. 

 

 

 

Regards, 

Ranjitha A. 

[Keerthivasan Ramamoorthy]

Hi Fernando,  

  

We have provided code example to enable Export option in Diagram Builder sample. Please refer to the below code example. The below code is used to export the Diagramming object (Nodes and Connectors) into PDF. 

 

Add the below C# code in DiagramBuilderVM.cs file and Syncfusion.Pdf.Base.dll as a reference. 

C# code example: 

public void OnExportCommand(object param) 

{ 

Microsoft.Win32.SaveFileDialog saveFileDialog = new Microsoft.Win32.SaveFileDialog(); 

saveFileDialog.Filter = "PDF File|*.pdf"; 

saveFileDialog.Title = "Save to a PDF file"; 

saveFileDialog.FileName = "Diagram"; 

saveFileDialog.ShowDialog(); 

if (!string.IsNullOrEmpty(saveFileDialog.FileName)) 

{ 

SaveFileDialog m_SaveFileDialog = new SaveFileDialog(); 

m_SaveFileDialog = new SaveFileDialog(); 

m_SaveFileDialog.Filter = "XPS File(*.xps)|*.xps"; 

m_SaveFileDialog.FileName = "DiagramExport"; 

string name = m_SaveFileDialog.FileName; 

ExportSettings es = new ExportSettings(); 

es.FileName = name; 

es.IsSaveToXps = true; 

(SelectedDiagram.Info as IGraph).ExportSettings = es; 

(SelectedDiagram.Info as IGraphInfo).Export(); 

Syncfusion.XPS.XPSToPdfConverter converter1 = new Syncfusion.XPS.XPSToPdfConverter(); 

//Convert XPS document into PDF document 

PdfDocument document = converter1.Convert(name); 

//save and close the document 

document.Save(saveFileDialog.FileName); 

document.Close(true); 

} 

} 

Also, provided XAML code to bind the Export command in a Button. Please refer to the below code, 

<syncfusion:BackStageCommandButton Header="Export" Command="{Binding DataContext.Export,Mode=TwoWay,ElementName=ribbon}" ></syncfusion:BackStageCommandButton> 

 

Note:  

For more information, we have provided a video. Please refer to the video link as below. 

Video link:160753_Video

 

  

Regards,  

Keerthivasan R.