Create custom Node Figure using Path object

GoXam
1

Is creating custom Node Figure supported?

If I comment my x:Name="Shape" object and replace it with <Path go:NodePanel.Figure="Rectangle" things seem to work.
I have two issues.
  1. When I drag the object its has 0 width and 0 height even though I set it.
  2. After I resize it I can only drag the Node when I select the text, but I can't move the object otherwise (when mouse pointer not over textbox)
Any suggestions on how to create a custom NodePanel.Figure?
Thank you,
Pavel
<DataTemplate x:Key="DataObjectNodeTemplate">
<go:NodePanel Sizing="Fixed"
Height="{Binding Path=Data.Height, Mode=TwoWay}"
Width="{Binding Path=Data.Width, Mode=TwoWay}" go:Part.SelectionAdorned="True" go:Part.SelectionAdornmentTemplate="{StaticResource BoxNodeAdornmentTemplate}" go:Part.Resizable="True"
go:Part.ResizeAdornmentTemplate="{StaticResource GroupResizeAdornmentTemplate}" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}">
<Path x:Name="Shape" Stroke="Gray" StrokeThickness="1" Stretch="Fill"> <Path.Data>
<GeometryGroup>
<LineGeometry StartPoint="0,0" EndPoint="0,8" /> <LineGeometry StartPoint="0,8" EndPoint="8,8" /> <LineGeometry StartPoint="8,8" EndPoint="8,2" /> <LineGeometry StartPoint="0,0" EndPoint="6,0" /> <LineGeometry StartPoint="8,2" EndPoint="6,2" /> <LineGeometry StartPoint="6,2" EndPoint="6,0" /> <LineGeometry StartPoint="6,0" EndPoint="8,2" />
</GeometryGroup>
</Path.Data> </Path> <TextBlock Style="{StaticResource TextBlockStyle}"
Text="{Binding Data.Text, Mode=TwoWay}" />
</go:NodePanel> </DataTemplate>
2

I don’t have access to the template resources you refer to, so I tried this:

<DataTemplate x:Key="DataObjectNodeTemplate0"> <go:NodePanel Height="{Binding Path=Data.Height, Mode=TwoWay}" Width="{Binding Path=Data.Width, Mode=TwoWay}" go:Part.SelectionAdorned="True" go:Part.Resizable="True" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"> <Path x:Name="Shape" Stretch="Fill" Stroke="Gray" StrokeThickness="1" Fill="{Binding Path=Data.Color}"> <Path.Data> <GeometryGroup> <LineGeometry StartPoint="0,0" EndPoint="0,8" /> <LineGeometry StartPoint="0,8" EndPoint="8,8" /> <LineGeometry StartPoint="8,8" EndPoint="8,2" /> <LineGeometry StartPoint="0,0" EndPoint="6,0" /> <LineGeometry StartPoint="8,2" EndPoint="6,2" /> <LineGeometry StartPoint="6,2" EndPoint="6,0" /> <LineGeometry StartPoint="6,0" EndPoint="8,2" /> </GeometryGroup> </Path.Data> </Path> <TextBlock Text="{Binding Data.Text}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </go:NodePanel> </DataTemplate>
And it works fine. Maybe there’s a problem with an adornment template that you applied.

For the second issue, I do notice that the Path shape you have defined is an open figure, not a closed one, so one cannot Fill it with a Brush, as you can see by the Fill binding. Because there’s no brush in the middle of the shape, the user cannot pick that object there, which is why the user cannot drag it at that point.

We do have a similar figure: NodeFigure.File. Here’s how I would use it:

<DataTemplate x:Key="DataObjectNodeTemplate2"> <go:NodePanel Height="{Binding Path=Data.Height, Mode=TwoWay}" Width="{Binding Path=Data.Width, Mode=TwoWay}" go:Part.SelectionAdorned="True" go:Part.Resizable="True" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"> <Path go:NodePanel.Figure="File" Stroke="Gray" StrokeThickness="1" Fill="{Binding Path=Data.Color}" /> <TextBlock Text="{Binding Data.Key}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </go:NodePanel> </DataTemplate>

3

Oh, I guess you’d find the definition of the equivalent closed geometry useful:

<DataTemplate x:Key="DataObjectNodeTemplate0a"> <go:NodePanel Height="{Binding Path=Data.Height, Mode=TwoWay}" Width="{Binding Path=Data.Width, Mode=TwoWay}" go:Part.SelectionAdorned="True" go:Part.Resizable="True" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"> <Path x:Name="Shape" Stretch="Fill" Stroke="Gray" StrokeThickness="1" Fill="{Binding Path=Data.Color}"> <Path.Data> <PathGeometry> <PathFigure IsClosed="True" IsFilled="True" StartPoint="0 0"> <LineSegment Point="0 8" /> <LineSegment Point="8 8" /> <LineSegment Point="8 2" /> <LineSegment Point="6 0" /> <LineSegment Point="0 0" /> </PathFigure> <PathFigure IsClosed="False" IsFilled="False" StartPoint="6 0"> <LineSegment Point="6 2" /> <LineSegment Point="8 2" /> </PathFigure> </PathGeometry> </Path.Data> </Path> <TextBlock Text="{Binding Data.Text}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </go:NodePanel> </DataTemplate>

4

Thank you for explaining to me how to propertly create closed shape.

I found one issue unrelated to my question when I dragged the item on to the surface the item was collapsed. I resolved it by adding
go:Part.ResizeCellSize="{Binding CellSize, Source={StaticResource BusinessProcessOptions}}"
This corrected the size. Is this a bug or do I need to always use in pairs?
go:Part.Resizable="True", go:Part.ResizeCellSize
Thanks a lot for all your help!
Pavel
5

If by “collapsed” you meant zero width and height, perhaps you either need to specify a MinWidth and a MinHeight on some element in your template, or if the Width and Height are bound to data, make sure the data values are non-zero.