We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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>

5 Replies

KR Karkuvel Rajan Shanmugavel Syncfusion Team October 23, 2019 05:57 AM UTC

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 :  
 
 
        private void MainWindow_ItemAdded(object sender, ItemAddedEventArgs args) 
        { 
            if(args.Item is CustomNode) 
            { 
                CustomNode node = args.Item as CustomNode; 
                node.Content = node.CustomContent; 
                node.ContentTemplate = App.Current.MainWindow.Resources[node.CustomContentTemplate] as DataTemplate; 
            } 
        } 
 
 
 
Regards, 
Karkuvel Rajan S 



JO John October 23, 2019 05:55 PM UTC

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 ()
        {
           
          
        }
      
    }'


KR Karkuvel Rajan Shanmugavel Syncfusion Team October 24, 2019 05:45 AM UTC

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. 
 
 
Regards, 
Karkuvel Rajan S 



JO John October 24, 2019 10:06 PM UTC

That did it!!!  Thank-you!

I appreciate the help.


KR Karkuvel Rajan Shanmugavel Syncfusion Team October 25, 2019 06:28 AM UTC

Hi John, 
 
Thanks for the update. 
 
Please contact us if you need any further assistance. 
 
Regards, 
Karkuvel Rajan S 


Loader.
Live Chat Icon For mobile
Up arrow icon