Windows.UI.Xaml.DataTemplate displayed when a shape is drag and dropped

[Sandeep Kandula]

http://www.syncfusion.com/downloads/support/forum/116018/DiagramBuilder_1162136a.zip

 

Based on Syncfusion documentation (Diagram / Features / Stencil),  I added following code for the above source code in StencilView.xaml :

--------------------------------------------------------------------------------------------------------

<DataTemplate x:Key="SansStar">

<Path Style="{StaticResource SymbolStyle}"

Data="M 9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7 Z" Stretch="Fill">

</Path>

</DataTemplate>

<!--END : Harmony-->

<viewModel:SymbolCollection x:Key="symbolcollection">

<viewModel:SymbolVM GroupName="Harmony"

Symbol="{StaticResource SansStar}"

SymbolTemplate="{StaticResource SansStar}" />

---------------------------------------------------------------------------------------------------

 

When I try to drag and drop SansStar then I get the error as mentioned in the attachment. How to correct the problem when DataTemplates are used? I have requirement to use DataTemplate instead of <x:String>?

Attachment: Capture_6b00cc9c.zip

[Parthiban A]

Hi Sandeep,

Thanks for using Syncfusion products.

Provided code snippet will not work in DiagramBuilder application. Because we have designed diagram builder that it can customize Fill, Stroke, StorkeThickness,etc of node’s shape through property editor. DiagramBuilder does not uses DataTemplate from palette (SymbolVM), instead it is created and applied at runtime based on properties set in property editor. If the shape’s data is given in datatemplate, it is not possible for the application extract the shape’s data from template.

For your requirement we can modify it to directly provide the data in symbol. As like in the below code snippet.

Code Snippet:

<DataTemplate x:Key="SansStar">

            <Path Style="{StaticResource SymbolStyle}" Data="{Binding}" Stretch="Fill"/>

        </DataTemplate>

 

        <viewModel:SymbolVM GroupName="Harmony" Symbol="M 9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7 Z" SymbolTemplate="{StaticResource SansStar}" />

 

Kindly find the update sample from attachment.

Please let us know, if you require any further assist on this.

Regards,

Parthiban

Attachment: DiagramBuilder_1162136a_8febf526.zip

[madhu]

Hi,

      I have created my own template. This template is visible in the stencil panel but when I drag and drop it in the page the image isn't displayed.

SAMPLE CODE:

<DataTemplate x:Key="SansStar">

<Viewbox Stretch="Fill" Width="50" Height="50">

<Grid IsHitTestVisible="False">

<Canvas Name="svg21510" Width="48" Height="64">

<Canvas.Resources/>

<Canvas Name="layer1">

<Canvas Name="g29191">

<Canvas.RenderTransform>

<MatrixTransform Matrix="0.1187352 0 0 0.11289021 -27.070708 -1.4169124"/>

</Canvas.RenderTransform>

<Canvas Name="g29193">

<Canvas Name="g29195">

<Canvas Name="g29197">

<Path Name="path29199" StrokeThickness="20" Stroke="#FF3A2C6F" StrokeMiterLimit="3.8637" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round"

Data="m 253.377 500.669 v 50.953 c 0 0 6.086 0.235 8.938 -0.434 0.075 -15.53 16.986 -16.274 17.184 0 2.883 0.359 8.875 0.471 8.875 0.471 v -50.99 h -34.997 l 0 0 z">

</Path>

HOW DO I MAKE THE IMAGE APPEAR??

OUTPUT:

[madhu]

Hi Parthiban,

Adding points to my above reply :

Code Snippet:

<DataTemplate x:Key="SansStar">

            <Path Style="{StaticResource SymbolStyle}" Data="{Binding}" Stretch="Fill"/>

        </DataTemplate>

 

        <viewModel:SymbolVM GroupName="Harmony" Symbol="M 9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7 Z" SymbolTemplate="{StaticResource SansStar}" />

 I have tried the above snippet which you have mentioned. The Path which you have mentioned is fine. But the data template which I have mentioned is complex. How can I map it to the above data template (mentioned in the above reply)?

[Parthiban A]

Hi Madhu,

We have modified the diagram builder that as per your requirement. As we said already diagram builder does not uses DataTemplate from palette(SymbolVM), now we modified that it can use DataTemplate from palette, when only the DataTemplate is provided. SymbolVM.Symbol shouldn’t be set. Now we couldn’t customize fill, stroke thickness, stroke, etc. of node’s shape through property editor as like before.

Kindly find the modified sample from attachment

Please let us know if you require any further assist on this.

Regards,

Parthiban A.

Attachment: DiagramBuilder_1162136a_8febf526_a02f8796.zip

[Parthiban A]

Hi Madhu,

Kindly find the modified sample from below attachment.

Regards,

Parthiban A.

Attachment: DiagramBuilder_1162136a_8febf526_1d05cbd2.zip

[Sandeep Kandula]

Thanks a lot!

It works!

[Parthiban A]

Hi Sandeep,

Thanks for your update.

Please let us know, if you require any further assist on this.

Regards,

Parthiban