Adding new/customized node figures

i want to add new images in the node figures.
pls see the screenshot for refrence.

Here’s an example: custom Paths

Hi walter i want to add a png file in place of node figure. is it possible.

Data.figure is defined like this
new GoNodeData() { Key="State", Text="State", Category="Standard", Figure=NodeFigure.Rectangle, GangesToolboxItemType=GangesToolboxItemTypes.States, Caption="State" , ElementType= ProcessElement.State, GangesNodeTypeByProperty = GangesNodeTypeByProperty.State, TooltipText="State"}, new GoNodeData() { Key="Divided", Text="Split state", Category="Standard", Figure=NodeFigure.DividedProcess, GangesToolboxItemType=GangesToolboxItemTypes.States, Caption="Split state", ElementType= ProcessElement.SplitState, GangesNodeTypeByProperty = GangesNodeTypeByProperty.State, TooltipText="Split state"}, new GoNodeData() { Key="Merge state", Text="Merge state", Category="Standard", Figure=NodeFigure.Ethernet, GangesToolboxItemType=GangesToolboxItemTypes.States, Caption="Merge state", ElementType= ProcessElement.MergeState, GangesNodeTypeByProperty = GangesNodeTypeByProperty.State, TooltipText="Merge state"},
I am coding in my xaml like below.
<DataTemplate x:Key="Standard">

<go:SpotPanel Style="{StaticResource SpotPanelStyle}"
go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
>
<go:NodePanel Sizing=“Fixed” go:SpotPanel.Main=“True” ToolTipService.ToolTip="{Binding Path=Data.TooltipText}" Width=“100” Height=“35”>
<Path x:Name=“Shape” Style="{StaticResource NodeShapeStyle}"
go:NodePanel.Figure="{Binding Path=Data.Figure}" />
<TextBlock Style="{StaticResource TextBlockStyle}"
Text="{Binding Path=Data.Text, Mode=TwoWay}" />
</go:NodePanel>
</go:SpotPanel>

actually i want my toolbox to look like this :-
presently it looks like this:-

Sure, you can use completely different DataTemplates in your Palette than you use in your main Diagram. That way you can data-bind to different data properties and get a completely different appearance and behavior in the Palette.

Dear Walther,



Is there an example of the DataTemplates usage?

I believe all of the samples define Diagrams, including Palettes, that make use of DataTemplates.

Hi walter
In the Figure=NodeFigure.Rectangle
I want my own figure for example
Figure=NodeFigure.Rectangle=Figure=NodeFigure.myfigure1
Figure=NodeFigure.Ethernet=Figure=NodeFigure.myfigure2
Figure=NodeFigure.myfigure3

In This nodefigure enum i want to add my own custom image(figure1,figure2,figure3) besides other available GoXam figures.
Is this possible??
I hope you are clear now!!

[QUOTE=rgautam]Hi walter i want to add a png file in place of node figure. is it possible.


Data.figure is defined like this

new GoNodeData() { Key="State", Text="State", Category="Standard", Figure=NodeFigure.Rectangle,

GangesToolboxItemType=GangesToolboxItemTypes.States, Caption="State" , ElementType= ProcessElement.State,

GangesNodeTypeByProperty = GangesNodeTypeByProperty.State, TooltipText="State"},

new GoNodeData() { Key="Divided", Text="Split state", Category="Standard", Figure=NodeFigure.DividedProcess,

GangesToolboxItemType=GangesToolboxItemTypes.States, Caption="Split state", ElementType= ProcessElement.SplitState,

GangesNodeTypeByProperty = GangesNodeTypeByProperty.State, TooltipText="Split state"},

new GoNodeData() { Key="Merge state", Text="Merge state", Category="Standard", Figure=NodeFigure.Ethernet,

GangesToolboxItemType=GangesToolboxItemTypes.States, Caption="Merge state", ElementType= ProcessElement.MergeState,

GangesNodeTypeByProperty = GangesNodeTypeByProperty.State, TooltipText="Merge state"},

I am coding in my xaml like below.

<DataTemplate x:Key=“Standard”>

<go:SpotPanel Style="{StaticResource SpotPanelStyle}"

go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"

>

<go:NodePanel Sizing="Fixed" go:SpotPanel.Main="True" ToolTipService.ToolTip="{Binding Path=Data.TooltipText}" Width="100" Height="35">

<Path x:Name="Shape" Style="{StaticResource NodeShapeStyle}"

go:NodePanel.Figure="{Binding Path=Data.Figure}" />

<TextBlock Style="{StaticResource TextBlockStyle}"

Text="{Binding Path=Data.Text, Mode=TwoWay}" />

</go:NodePanel>

</go:SpotPanel>

[/quote]

C# doesn’t allow you to add enumerated values dynamically to an enumerated type.

So for those cases that you don’t want to use one of the figures that we define for you, you can implement your own by setting the Path.Data property to a Geometry. All of the non-trivial geometries will require the use of PathGeometry. Create one and set its PathGeometry.Figures property to a new PathFigureCollection holding the figures and segments that you want.

That’s basically what we do for you automatically when you set the go:NodePanel.Figure attached property on a Path inside a NodePanel.

Caution: if you use the geometry path mini-language in XAML, like
, WPF and Silverlight both require us to treat it as a rectangular block of graphics. We cannot examine the interior of the path to figure out where the closest intersection point is. So using a Path defined this way may not be satisfactory if you want to use it as a node port with FromSpot and/or ToSpot being Spot.None. We also recommend using version 1.2.6, which provides a work-around for a Silverlight bug in exactly this cautionary situation.

Hi walter

I am new to designing geomatrical patterns using silverlight.
Can you give me an simple ex of making a figure and using it as you have described here?

I gave an example in the above mentioned post. Look for PathGeometry.

Any introductory book about Silverlight will talk all about Path and PathGeometry.

Or you could try online: Geometries.

Guatam I am working on similar problem. Is there a way we can connect.