Hi,

we're looking for a method to make links follow the outline of a shape in a template node just like when using ShapeNode with the predefined shapes.

When we use a template node, the links are attached to node by snapping to the bounding box and the result we obtain is unacceptable for our charts. When we use a path in the template (for example an hexagon) we want the links to be continuously snapped to the hexagon. See the heaxagon and the circle problem in the attached figure

We know the availability of the ShapeNode with the specific MindFusion elements and formulas, but we're trying to generalize the construction of shapes by using XAML, inside the template node that can accomodate many different elements.

We found this page in the documentation http://www.mindfusion.eu/onlinehelp/wpfdiagram/O_T_MindFusion_Diagramming_Wpf_Sh...
referring to the possibility to specify a pathGeometry callback. We're looking for something very similar both for TemplateNode and ShapeNode. Such constructors are not present in the ShapeNodes.

Independently from the Shape or the content of the TemplateNode, we're looking for a way to specify the path around which the arrows should be snapped to, but we do'nt want to rely on discrete control points, because the nodes are used in the Spring layout which does not work well with control points, from the graphical point of view.

To generate the border of the Template nodes we're using, we typically insert a Path into it, and in code behind we use a snippet like this one to construct its shape.

string data = "M0,1 A 1,1 180 1 1 2,1  A 1,1 180 1 1 0,1";
			var converter = TypeDescriptor.GetConverter(typeof(Geometry));
			CircleBorder = (Geometry)converter.ConvertFrom(data);
 

Hope you can point us in the right direction or provide a a way to obtain the result we're expecting. For us it would be sufficient to provide the path the links should snap to in both shapenode and templatenode
Thanks in advance.

Unfortunately the proposed solution is not viable for us (some other glitches).

We're trying to find an alternative. One of the possibilities would be that we're going to use shapenodes to leverage it's capabilities with respect to border snap, and to give them additional custom elements with XAML. It is important for us to be able to define additional visual elements with XAML.

Is it possible to create shapenodes and to apply a custom template which adds specific content by including the original appearance and behaviour?

Example: we want to create an ellipse shape node so that links are snapped to it and provide a template which includes the ellipse visual and some additional wpf elements like a grid and another path?

Can you provide a working example? I've tries with content presenter or contentcontrol, but it's not working.

<Style TargetType="ent:ClusterCompanyNode">
		<Setter Property="Template">
			<Setter.Value>

				<DataTemplate >
					<Grid UseLayoutRounding="True" >

						<Path x:Name="Border"
							Effect="{Binding BorderEffect}"
							Stroke="{Binding Stroke}"
							Fill="{Binding Brush}"
							Panel.ZIndex="100"
							Stretch="Fill"
							StrokeThickness="{Binding StrokeThickness}"
							StrokeDashArray="{Binding StrokeDashArray}"
							Data="{Binding BorderGeometry}" >
						</Path>

						<ContentControl />


					</Grid>
				</DataTemplate>
			</Setter.Value>
		</Setter>
	</Style>
 

where ent:ClusterCompanyNode is a subclass of ShapeNode.

S.

Hi Slavcho,

unfortunately the solution you provided me seems not working. If I provide the template XAML for the ShapeNode it is not rendered at all. No matter if I add the the datatype in the datatemplate and the override for the default style. Maybe the template I provide is wrong.


Can you provide me with a working example application where:

- a ShapeNode with the ellipse shape is displayed in a diagram
- A template XAML for the shape node is loaded by the application which:
- includes the original text and border of the shapenode
- includes another WPF element e.g. a rectangle


Thanks. A.

Hi,

the  <diag:NodeRenderer Node="{Binding}" />
is exactly what we're looking for. Unfortunately there is a bug(?) which prevents us from using it.

In our application according to some user options at run time, the Text property changes on the fly. When using the custom template for the shape nodes, the Text of the node does not get updated. I attach your project with a button showing the problem. Can we overcome it?

S.

Other properties are affected too, e.g. the Brush of the node.
While for the text property we have added our custom textblock in the template bound to a NodeText property, we need to make the Brush property of the node work, so it can be changed runtime. Can you help? With invalidate visual on the node renderer, it does not work.

this is the template we are using:

 <Style TargetType="ent:ClusterCompanyNode">
        <Setter Property="Template">
            <Setter.Value>

                <DataTemplate DataType="ent:ClusterCompanyNode" >
                    <Grid UseLayoutRounding="True" >

                        <TextBlock
                            Text="{Binding NodeText}"
							Foreground="{Binding TextBrush}"
                            FontSize="{Binding FontSize}"
                            FontWeight="{Binding FontWeight}"
                            FontFamily="{Binding FontFamily}"
                            FontStretch="{Binding FontStretch}"
                            FontStyle="{Binding FontStyle}"
                            TextDecorations="{Binding TextDecorations}"
                            TextAlignment="Center"
                            VerticalAlignment="Center"
							Panel.ZIndex="102"
                            Margin="5,0" Padding="0"   TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
						/>

                        <Grid UseLayoutRounding="True" Panel.ZIndex="100"   Visibility="{Binding ShowCategoryIcon, Converter={StaticResource BooleanToVisibilityConverter}}" >

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*"/>
                                <ColumnDefinition Width="7.5*"/>
                                <ColumnDefinition Width="1*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="1*" />
                                <RowDefinition Height="7.5*" />
                                <RowDefinition Height="1*" />
                            </Grid.RowDefinitions>
                            <Path  Grid.Column="1" Grid.Row="1"
							Stroke="{x:Null}"
							Fill="{StaticResource CompanyCategoryBrush}"
							Stretch="Uniform"
							Data="{Binding CategoryGeometry}" >
                            </Path>
                        </Grid>

                        <diag:NodeRenderer Node="{Binding}" />

                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 

Thanks, Sabrina

Please try this new build -
https://mindfusion.eu/_beta/wpf_noderenderer.zip

The standard NodeRenderer will now repaint automatically when any dependency property of the node changes, without you having to specify additional bindings.

Regards,
Slavcho
Mindfusion