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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Content Template in Stencil not appearing after drop onto SfDiagram

Thread ID:

Created:

Updated:

Platform:

Replies:

148503 Oct 22,2019 10:47 PM UTC Oct 25,2019 06:28 AM UTC WPF 5
loading
Tags: SfDiagram
John
Asked On October 22, 2019 10:47 PM UTC

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>

Karkuvel Rajan Shanmugavel [Syncfusion]
Replied On 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 


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

Karkuvel Rajan Shanmugavel [Syncfusion]
Replied On 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 


John
Replied On October 24, 2019 10:06 PM UTC

That did it!!!  Thank-you!

I appreciate the help.

Karkuvel Rajan Shanmugavel [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon