Hi Stoyo,

I am working with mindfussion.diagramming diagram. I can set image in background of shape node.
code is here:-

For Lop = 0 To diagram.Nodes.Count - 1
If diagram.Nodes(Lop).Selected = True Then
Dim shape As ShapeNode = diagram.Nodes(Lop)
shape.Image = bitmap 'here set Control background image
'bitmap is object of bitmapimage class.
Dim bounds As Rect = shape.Bounds
shape.Clip = shape.Shape.CreateOutlineGeometry(bounds.Width, bounds.Height, diagram.MeasureUnit)
shape.ImageStretch = Stretch.None
shape.VerticalImageAlignment = Windows.VerticalAlignment.Center
shape.HorizontalImageAlignment = Windows.HorizontalAlignment.Center
End If
Next Lop

after this i am increasing border size using this code:-

For Lop = 0 To diagram.Nodes.Count - 1
If diagram.Nodes(Lop).Selected = True Then
Dim node As ShapeNode = diagram.Nodes(Lop)
Dim Pen As Pen = node.Pen
node.Pen = Nothing
node.Pen = Pen
node.StrokeThickness = spnBorderSize.Value
End If
spnBorderSize is numeric up down button.

Once I set the image to the control the border doesn't show.

Also if I don't set image the border did show but once I set the image it overlaps the border.

I think the line where I set the outline geometry is causing the problem.
Please suggest something to overcome this problem. Thanks in advance.

Hi,

Modify the ShapeNode template shown at http://www.mindfusion.eu/onlinehelp/diagramlite/index.htm?Default_Control_Templa... so that the Image comes before the Path. While you are at it, you can also set the Clip property inside the template so you won't have to update it from NodeModified events. Use this converter to bind the clip geometry to the current shape:
http://kiwigis.blogspot.com/2010/06/cloning-path-geometry-in-silverlight.html

E.g. this image shows the result of the template below:

var node = diagram.Factory.CreateShapeNode(50, 50, 100, 300);
node.StrokeThickness = 22;
node.Style = (System.Windows.Style)Resources["MyNodeTemplate"];
node.Image = new BitmapImage(new Uri(
	"hbosch1.jpg", UriKind.Relative));
node.Shape = Shapes.Ellipse;

<!-- in page.xaml -->
<UserControl.Resources>
	<ResourceDictionary>
		<local:GeometryConverter x:Key="GeometryConverter"/>

		<Style x:Key="MyNodeTemplate" TargetType="d:ShapeNode">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="d:ShapeNode">

						<Canvas x:Name="Adorner">

							<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
								Clip="{Binding
									ElementName=Shape,
									Path=Data,
									Mode=OneWay,
									Converter={StaticResource GeometryConverter}}">
								<Image x:Name="Image"
									Source="{TemplateBinding Image}"
									HorizontalAlignment="{TemplateBinding HorizontalImageAlignment}"
									VerticalAlignment="{TemplateBinding VerticalImageAlignment}"
									Stretch="{TemplateBinding ImageStretch}">
								</Image>
							</Grid>

							<Path x:Name="Shape"
								Data="{TemplateBinding ShapeGeometry}"
								Stroke="{TemplateBinding Stroke}"
								DataContext="{TemplateBinding StrokeDashArray}"
								StrokeDashArray="{Binding Converter={StaticResource dashArrayConverter}}"
								StrokeDashCap="{TemplateBinding StrokeDashCap}"
								StrokeDashOffset="{TemplateBinding StrokeDashOffset}"
								StrokeEndLineCap="{TemplateBinding StrokeEndLineCap}"
								StrokeLineJoin="{TemplateBinding StrokeLineJoin}"
								StrokeMiterLimit="{TemplateBinding StrokeMiterLimit}"
								StrokeStartLineCap="{TemplateBinding StrokeStartLineCap}"
								StrokeThickness="{TemplateBinding StrokeThickness}"
								Fill="{TemplateBinding Brush}"
								Visibility="{TemplateBinding ShapeVisibility}" />

							<Grid
								Margin="{TemplateBinding TextMargin}"
								Width="{TemplateBinding TextWidth}"
								Height="{TemplateBinding TextHeight}"
								HorizontalAlignment="Left"
								VerticalAlignment="Top">

								<TextBlock
									Text="{TemplateBinding Text}"
									FontFamily="{TemplateBinding FontFamily}"
									FontSize="{TemplateBinding FontSize}"
									FontStretch="{TemplateBinding FontStretch}"
									FontStyle="{TemplateBinding FontStyle}"
									FontWeight="{TemplateBinding FontWeight}"
									HorizontalAlignment="{TemplateBinding HorizontalTextBlockAlignment}"
									VerticalAlignment="{TemplateBinding VerticalTextBlockAlignment}"
									TextAlignment="{TemplateBinding TextAlignment}"
									TextWrapping="{TemplateBinding TextWrapping}"
									Foreground="{TemplateBinding TextBrush}">
								</TextBlock>

							</Grid>

							<ContentPresenter
								Content="{TemplateBinding DecorationsContainer}"
								Visibility="{TemplateBinding ShapeVisibility}" />

						</Canvas>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>


	</ResourceDictionary>

</UserControl.Resources>
 

I hope that helps,
Stoyan

Hi,

There are two problems:

1. You haven't converted GeometryConverter code correctly to VB. Change the first line in GeometryConverter.IsPresentationFrameworkCollection from

If TypeOf type Is Object Then

'to

If type.Equals(GetType(Object)) Then 

2. Silverlight applies templates during layout phase, so assigning the style in CreateImageForView does not immediately take effect, and you will still get exceptions because of path geometry being shared between two objects (since cloning converter is not yet applied too together with template). Set the node's Style immediately after creating it, and later CreateImageForView will work:

BGNode = diagram.Factory.CreateContainerNode(BGBounds)
BGNode.Style = DirectCast(Resources("MyNodeTemplate"), System.Windows.Style) 

I hope that helps,
Stoyan

The template above shows the Path above the Image (because of your earlier thickness requirements), so you will have to set a transparent node Brush when assigning Image. Otherwise replace the Fill="{TemplateBinding Brush}" line in the template with Fill="Transparent", or move the path behind the image, but you will again see only half the stroke thickness. You might as well use two Path elements, one for stroke and one for fill, with the Image shown between them.

I hope that helps,
Stoyan

Hi,

Silverlight does not allow sharing the same geometry object between two Paths (via their Data property). You must use the GeometryConverter for one of the paths to clone from the other one, the same way as the Grid.Clip binding in the template above.

I hope that helps,
Stoyan