Content Template in Stencil not appearing after drop onto SfDiagram

I'm using NodeViewModel to create symbols in a Stencil that include a Content template that holds some text and an image.  XAML shown below.  The symbol on the Stencil is correct as it contains the text and the image.   I drop the node onto the SfDiagram and it shows (as expected) a rectangle with the Ports in the correct locations.  However, the text and image do not appear on the node "dropped" from the Stencil.  Is this expected behavior?

<syncfusion:Stencil x:Name="stnVfStencil" Grid.Row="2" >

            <syncfusion:Stencil.SymbolSource>

                <!--Initialize the SymbolCollection-->
                <local:VfSymbolCollection>
                    <!--Define the DiagramElement-Node-->
                   
                    <NodeViewModel x:Name="ANDBlock" UnitHeight="100" UnitWidth="100" 
                                                Shape="{StaticResource Rectangle}" Key="Logic" LogicBlockName="AND" LogicImage="/Images/Logic_AND.png"
                                                >
                        <NodeViewModel.Content>
                            <Border BorderThickness="2" BorderBrush="Black">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="50"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding LogicBlockName}" FontSize="10" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0"/>
                                    <Image Source="{Binding LogicImage}" Width="50" Height="50" HorizontalAlignment="Right" Stretch="Fill" RenderOptions.BitmapScalingMode="Fant"
                                               Grid.Row="0" Grid.Column="1" />
                                </Grid>
                            </Border>
                        </NodeViewModel.Content>
                       
                        <NodeViewModel.Ports>
                            <syncfusion:PortCollection>
                                <syncfusion:NodePortViewModel x:Name="A"  NodeOffsetX="0" NodeOffsetY="0.25" PortVisibility="Visible" />
                                <syncfusion:NodePortViewModel x:Name="B" NodeOffsetX="0" NodeOffsetY="0.75" PortVisibility="Visible" />
                                <syncfusion:NodePortViewModel x:Name="Result" NodeOffsetX="1.0" NodeOffsetY="0.5" PortVisibility="Visible" />
                            </syncfusion:PortCollection>
                        </NodeViewModel.Ports>
                       
                      
                       
                    </NodeViewModel>

                </VfSymbolCollection>
            </syncfusion:Stencil.SymbolSource>
            <!--Initialize the SymbolGroup-->
            <syncfusion:Stencil.SymbolGroups>
                <syncfusion:SymbolGroups>
                    <!--Map Symbols Using MappingName-->
                    <syncfusion:SymbolGroupProvider MappingName="Key">
                    </syncfusion:SymbolGroupProvider>
                </syncfusion:SymbolGroups>
            </syncfusion:Stencil.SymbolGroups>

        </syncfusion:Stencil>

Hi John, 

 

Thanks for contacting Syncfusion support. 

 

In SfDiagram, DataContractSerializer is used for Serialization. The functionalities in DataContractSerializer are applicable to the SfDiagram Serialization. We used to serialize primitive or type of SfDiagram. We don’t serialize Content and ContentTemplate of Node in drag and drop from stencil. Please retain templates as resource and reassign once it loaded back in diagram. We have prepared a simple sample based on your requirement. In the sample we have used ItemAdded Event to restore the Content and ContentTemplate property values. Please find the sample and code snippet below. 

 

Code Snippet :  

 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/148503/ze/Stencil_Drag_Drop_Template-1658562514 

 

Regards, 

Karkuvel Rajan S 

Thanks for the quick response!  I did what you suggested.  I created a custom view model, moved to a ContentTemplate, and added an ItemAdded method.  It does not appear as if the Bindings in the DataTemplate are being used. Neither the stencil nor the "dropped" node in the diagram show the items in the data template.    I'm wondering if we need to set the DataContext for the Node somewhere like other WPF controls.  However, that property doesn't seem to exist here.

Here's the DataTemplate

'<DataTemplate x:Key="LogicBlock">
                <Border BorderThickness="2" BorderBrush="Black">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding LogicBlockName}" FontSize="10" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0"/>
                        <Image Source="{Binding LogicImage}" Width="50" Height="50" HorizontalAlignment="Right" Stretch="Fill" RenderOptions.BitmapScalingMode="Fant"
                                               Grid.Row="0" Grid.Column="1" />
                    </Grid>
                </Border>
            </DataTemplate>'

Here's the definition of the Symbol in the Stencil.

'<local:VfSymbolCollection>
                    <!--Define the DiagramElement-Node-->
                    <!--<local:VfGHAViewModel x:Name="GHAObject" UnitHeight="100" UnitWidth="100" OffsetX="100" OffsetY="100"
                                                  Shape="{StaticResource Rectangle }" Key="GHAObjects">
                        </local:VfGHAViewModel>-->
                    <local:VfLogicViewModel x:Name="ANDBlock" UnitHeight="100" UnitWidth="100"   CustomContentTemplate="LogicBlock"
                                                Shape="{StaticResource Rectangle }" Key="Logic" LogicBlockName="AND" LogicImagePath="/Images/Logic_AND.png"
                                                 ContentTemplate="{StaticResource LogicBlock}">'

And here's the custom NodeViewModel

'public class VfLogicViewModel : NodeViewModel
    {
        private string _logicBlockName;
        [DataMember]
        public string LogicBlockName
        {
            get
            {
                return _logicBlockName;
            }
            set
            {
                if (value != _logicBlockName)
                {
                    _logicBlockName = value;
                    OnPropertyChanged("LogicBlockName");
                }
            }
        }
        private string _logicImagePath;
        [DataMember]
        public string LogicImagePath
        {
            get
            {
                return _logicImagePath;
            }
            set
            {
                if (value != _logicImagePath)
                {
                    _logicImagePath = value;
                    LogicImage = new Image();
                    LogicImage.Source = new BitmapImage(new Uri(_logicImagePath,UriKind.Relative));
                    OnPropertyChanged("LogicImagePath");
                    OnPropertyChanged("LogicImage");
                }
            }
        }
       
        public Image LogicImage { get ; set; }

        private string _customcontenttemplate;
        [DataMember]
        public string CustomContentTemplate
        {
            get
            {
                return _customcontenttemplate;
            }
            set
            {
                if (value != _customcontenttemplate)
                {
                    _customcontenttemplate = value;
                    OnPropertyChanged("CustomContentTemplate");
                }
            }
        }

        public VfLogicViewModel() : base ()
        {
           
          
        }

      
    }'

Hi John, 

 

Requirement : Need to drag and drop a node with its content template is binding with customnode’s properties. 

 

We have analyzed your requirement and created a simple sample with a data template binding with properties in content of the node. In the provided code snippet we have found that you have created two new properties for text and image in custom node and binding these two properties in content template. Generally, content template will bind the value defined in the Content of the node but you have binding the node property which won’t work. So we have to create a business object with required properties and assigned the business object instance as Content of the node. For serialization,  we have to add the business object to KnownType of SfDiagram. Please find the sample in below link. 

 

Sample link : https://www.syncfusion.com/downloads/support/forum/148503/ze/Stencil_Drag_Drop_Template_With_binding_content_Properties-465624919 

 

Regards, 

Karkuvel Rajan S 

That did it!!!  Thank-you!

I appreciate the help.

Hi John, 

 

Thanks for the update. 

 

Please contact us if you need any further assistance. 

 

Regards, 

Karkuvel Rajan S