(UTC)
  MindFusion Forums › Diagramming Components › WPF › Add new shape to Shapes dashboard using resource dictionary
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Add new shape to Shapes dashboard using resource dictionary (Read 4813 times)
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Add new shape to Shapes dashboard using resource dictionary
Mar 31st, 2017 at 6:08am
Print Post  
Is it possible to add new shape to this NodeList using resource xml file ?

currently I added new style like following

In Main window XML

Code
Select All
<diag:NodeListView x:Name="shapeList" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3"/>


in the constructor of the mainwindow added following line

Code
Select All
            var myShape = new MindFusion.Diagramming.Wpf.Shape(new ElementTemplate[] {
                                                                new LineTemplate(49, 0, 51, 0),
                                                                new BezierTemplate(51, 0, 78.06195, 5.2154064E-07, 100, 12.7598854, 100, 28.5),
                                                                new BezierTemplate(100, 28.5, 100, 28.99188, 99.978576, 29.480846, 99.936242, 29.966606),
                                                                new LineTemplate(99.936242, 29.966606, 99.932602, 30),
                                                                new LineTemplate(99.932602, 30, 100, 30),
                                                                new LineTemplate(99.932602, 30, 100, 90),
                                                                new LineTemplate(99.932602, 30, 80, 90),
                                                                new LineTemplate(99.932602, 30, 80, 51.472736),
                                                                new LineTemplate(99.932602, 30, 79.365486, 51.741902),
                                                                new BezierTemplate(99.932602, 30, 74.862572, 53.604394, 69.795174, 55.035278, 64.34166, 55.93081),
                                                                new LineTemplate(64.34166, 55.93081, 63.11636, 56.117116),
                                                                new LineTemplate(63.11636, 56.117116, 63.249928, 56.373452),
                                                                new BezierTemplate(63.11636, 56.117116, 64.366028, 58.640542, 65, 61.238576, 65, 64),
                                                                new BezierTemplate(65, 64, 65, 72.836556, 58.50813, 80, 50.5, 80),
                                                                new BezierTemplate(50.5, 80, 42.49187, 80, 36, 72.836556, 36, 64),
                                                                new BezierTemplate(36, 64, 36, 61.238576, 36.633972, 58.640542, 37.750072, 56.373452),
                                                                new LineTemplate(37.750072, 56.373452, 37.81398, 56.250802),
                                                                new LineTemplate(37.81398, 56.250802, 37.49023, 56.209348),
                                                                new BezierTemplate(37.81398, 56.250802, 31.337884, 55.347924, 25.637752, 53.811338, 20.634512, 51.741902),
                                                                new LineTemplate(20.634512, 51.741902, 20, 51.472736),
                                                                new LineTemplate(20, 51.472736, 20, 90),
                                                                new LineTemplate(20, 51.472736, 0, 90),
                                                                new LineTemplate(20, 51.472736, 0, 30),
                                                                new LineTemplate(20, 51.472736, 0.067397952, 30),
                                                                new LineTemplate(20, 51.472736, 0.063759088, 29.966608),
                                                                new BezierTemplate(20, 51.472736, 0.021423874, 29.480846, 0, 28.99188, 0, 28.5),
                                                                new BezierTemplate(0, 28.5, 0, 12.7598854, 21.938048, 5.2154064E-07, 49, 0)
                                                                }, FillRule.Nonzero, "test");

            shapeList.Items.Add(new ShapeNode { Bounds = new Rect(0, 0, 50, 50), Shape = myShape, EnabledHandles = AdjustmentHandles.All & ~AdjustmentHandles.ResizeHandles });


if its possible, please explain the steps
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3447
Joined: Oct 19th, 2005
Re: Add new shape to Shapes dashboard using resource dictionary
Reply #1 - Mar 31st, 2017 at 6:20am
Print Post  
If you mean you prefer loading your shape definitions from XML file instead of defining them in C# code, see the ShapeLibrary class. You could add the shapes you currently have defined to a ShapeLibrary instance and call SaveToXml to get them serialized in a file. Then you'll be able to load them by calling ShapeLibrary.LoadFromXml method.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard using resource dictionary
Reply #2 - Mar 31st, 2017 at 7:05am
Print Post  
Actually I want to define new shape in a XML file and add that new shape to NodeList

let say this is the file that include the new shape

FlowChartStencils.xaml


Code
Select All
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:s="clr-namespace:DiagramDesigner">

  <s:Toolbox x:Key="FlowChartStencils" ItemSize="60,50" SnapsToDevicePixels="True"
             ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ItemsControl.Items>

	     <!-- New "Predefined" Shape Style -->

  <Style x:Key="Predefined" TargetType="Path" BasedOn="{StaticResource FlowChartItemStyle}">
    <Setter Property="Data" Value="M 50,0 V 40 M 10,0 V 40 M 0 0 H 60 V 40 H 0 Z"/>
  </Style>

  <Style x:Key="Predefined_DragThumb" TargetType="Path" BasedOn="{StaticResource Predefined}">
    <Setter Property="IsHitTestVisible" Value="true"/>
    <Setter Property="Fill" Value="Transparent"/>
    <Setter Property="Stroke" Value="Transparent"/>
  </Style>

     <!-- New "Predefined" Shape path -->
      <Path Style="{StaticResource Predefined}" ToolTip="Machine">
        <s:DesignerItem.DragThumbTemplate>
          <ControlTemplate>
            <Path Style="{StaticResource Predefined_DragThumb}"/>
          </ControlTemplate>
        </s:DesignerItem.DragThumbTemplate>
      </Path>

    </ItemsControl.Items>
  </s:Toolbox>
</ResourceDictionary>



  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3447
Joined: Oct 19th, 2005
Re: Add new shape to Shapes dashboard using resource dictionary
Reply #3 - Mar 31st, 2017 at 8:13am
Print Post  
I'm not sure what happens in that Xaml. If you mean you need to define nodes' appearance entirely from Xaml, you can do that using DataTemplates.

If you only need bindings that create regular ShapeNodes from your ="M 50,0 V 40 M 10,0 V 40 M 0 0 H 60 V 40 H 0 Z" strings, you could move the code of FromPathString method from previous post to a ValueConverter class, and use the converter in binding expressions to create nodes from paths.

Also check the DiagramNodeAdapter class - it lets you use any WPF control as a node in the diagram.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard using resource dictionary
Reply #4 - Apr 3rd, 2017 at 4:08am
Print Post  
Let me explain this entirely from scratch

following shape that defined inside constructor of main window

Code
Select All
            // Add new custom shape
            var myShape = new MindFusion.Diagramming.Wpf.Shape(new ElementTemplate[] {
                                                                new LineTemplate(49, 0, 51, 0),
                                                                new BezierTemplate(51, 0, 78.06195, 5.2154064E-07, 100, 12.7598854, 100, 28.5),
                                                                new BezierTemplate(100, 28.5, 100, 28.99188, 99.978576, 29.480846, 99.936242, 29.966606),
                                                                new LineTemplate(99.936242, 29.966606, 99.932602, 30),
                                                                new LineTemplate(99.932602, 30, 100, 30),
                                                                new LineTemplate(99.932602, 30, 100, 90),
                                                                new LineTemplate(99.932602, 30, 80, 90),
                                                                new LineTemplate(99.932602, 30, 80, 51.472736),
                                                                new LineTemplate(99.932602, 30, 79.365486, 51.741902),
                                                                new BezierTemplate(99.932602, 30, 74.862572, 53.604394, 69.795174, 55.035278, 64.34166, 55.93081),
                                                                new LineTemplate(64.34166, 55.93081, 63.11636, 56.117116),
                                                                new LineTemplate(63.11636, 56.117116, 63.249928, 56.373452),
                                                                new BezierTemplate(63.11636, 56.117116, 64.366028, 58.640542, 65, 61.238576, 65, 64),
                                                                new BezierTemplate(65, 64, 65, 72.836556, 58.50813, 80, 50.5, 80),
                                                                new BezierTemplate(50.5, 80, 42.49187, 80, 36, 72.836556, 36, 64),
                                                                new BezierTemplate(36, 64, 36, 61.238576, 36.633972, 58.640542, 37.750072, 56.373452),
                                                                new LineTemplate(37.750072, 56.373452, 37.81398, 56.250802),
                                                                new LineTemplate(37.81398, 56.250802, 37.49023, 56.209348),
                                                                new BezierTemplate(37.81398, 56.250802, 31.337884, 55.347924, 25.637752, 53.811338, 20.634512, 51.741902),
                                                                new LineTemplate(20.634512, 51.741902, 20, 51.472736),
                                                                new LineTemplate(20, 51.472736, 20, 90),
                                                                new LineTemplate(20, 51.472736, 0, 90),
                                                                new LineTemplate(20, 51.472736, 0, 30),
                                                                new LineTemplate(20, 51.472736, 0.067397952, 30),
                                                                new LineTemplate(20, 51.472736, 0.063759088, 29.966608),
                                                                new BezierTemplate(20, 51.472736, 0.021423874, 29.480846, 0, 28.99188, 0, 28.5),
                                                                new BezierTemplate(0, 28.5, 0, 12.7598854, 21.938048, 5.2154064E-07, 49, 0)
                                                                }, FillRule.Nonzero, "test");


I want to define that in a xaml file and call reference(xaml) of that shape in constructor of main window.

can you mention the steps for that ?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3447
Joined: Oct 19th, 2005
Re: Add new shape to Shapes dashboard using resource dictionary
Reply #5 - Apr 3rd, 2017 at 11:29am
Print Post  
If you want to define this from Xaml, you could keep using the path string syntax we discussed before. Create an IValueConverter that converts string to Shape using FromPathString method from http://mindfusion.eu/Forum/YaBB.pl?num=1490610357 and use the converter in binding expression as shown in https://wpftutorial.net/ValueConverters.html

FromPathString does not support V and H commands you are showing above, you could add some support for them that still creates LineTemplate as the L command, or otherwise replace H and V with L commands.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2026. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge