Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Shape border does not show. (Read 14271 times)
Yogendra
Junior Member
**
Offline


I Love MindFusion!

Posts: 68
Joined: Dec 27th, 2012
Shape border does not show.
Feb 8th, 2013 at 3:10pm
Print Post  
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.
Sad

  
Back to top
 
IP Logged
 
Yogendra
Junior Member
**
Offline


I Love MindFusion!

Posts: 68
Joined: Dec 27th, 2012
Re: Shape border does not show.
Reply #1 - Feb 9th, 2013 at 11:39am
Print Post  
Hi Stoyo,

It's been very helpful you answers,  that you've replied to my questions. I am stuck in a place where I am assigning image to the shape. Actually when I assign image to a shape and increase the border thickness the image remained at front of the shape and border increases at the background. I want that Image to come behind the shape just like what happen in MS word. Please suggest something to do the exact replica of what happen there in MSWORD... thanks again.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Shape border does not show.
Reply #2 - Feb 11th, 2013 at 11:30am
Print Post  
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:


Code
Select All
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
  
Back to top
 
IP Logged
 
Yogendra
Junior Member
**
Offline


I Love MindFusion!

Posts: 68
Joined: Dec 27th, 2012
Re: Shape border does not show.
Reply #3 - Apr 22nd, 2013 at 12:27pm
Print Post  
Hi Stoyo

Sorry for late reply. I have edited shape template and used converter but i am faced some problem in converter when i am  using style property of shape node. So i have attached sample project so that you can help me finding the mistake done by me.

Step:-

1. increase border of shape node by clicking on button named "Increase Border".
2. Click on "Add Image To shape" and select image then click on Ok button.

Result :- Crashing.

  

DiagramShapeNode.rar (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Shape border does not show.
Reply #4 - Apr 23rd, 2013 at 8:37am
Print Post  
Hi,

There are two problems:

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

Code
Select All
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:

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



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Yogendra
Junior Member
**
Offline


I Love MindFusion!

Posts: 68
Joined: Dec 27th, 2012
Re: Shape border does not show.
Reply #5 - Apr 24th, 2013 at 6:57am
Print Post  
Hi Stoyo

Thanks for reply back. I have correct my code as you told. Now application is not get crash but image is not shown in shape node. You can also check in sample project.

I have attached sample project which help you.

Thanks in advanced.  Smiley
  

DiagramShapeNode_001.rar (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Shape border does not show.
Reply #6 - Apr 24th, 2013 at 11:35am
Print Post  
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
  
Back to top
 
IP Logged
 
Yogendra
Junior Member
**
Offline


I Love MindFusion!

Posts: 68
Joined: Dec 27th, 2012
Re: Shape border does not show.
Reply #7 - Apr 25th, 2013 at 8:53am
Print Post  
Hi Stoyo,

Tried it with the following code as mentioned by you:

Code (HTML)
Select All
<Grid>
                            <Path x:Name="Shape"
                                DataContext="{TemplateBinding StrokeDashArray}"
							    Data="{TemplateBinding ShapeGeometry}"
							    Fill="{TemplateBinding Brush}"
							    Visibility="{TemplateBinding ShapeVisibility}" />

                            <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="ShapeBorder"
                                DataContext="{TemplateBinding StrokeDashArray}"
							    Data="{TemplateBinding ShapeGeometry}"
                                Stroke="{TemplateBinding Stroke}"
							    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="Transparent"
							    Visibility="{TemplateBinding ShapeVisibility}" />
                        </Grid>
 




and getting the following error:

Quote:
Line: 95
Error: Unhandled Error in Silverlight Application
Code: 2531   
Category: ParserError      
Message: Failed to assign to property 'System.Windows.Shapes.Path.Data'.    
File:      
Line: 86    
Position: 17   
 


This only happens when I am assigning Data value to both the Path controls but it works fine when I have just a single path binded to the data value. What's wrong here? Thanks for your help.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Shape border does not show.
Reply #8 - Apr 25th, 2013 at 9:29am
Print Post  
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
  
Back to top
 
IP Logged
 
Yogendra
Junior Member
**
Offline


I Love MindFusion!

Posts: 68
Joined: Dec 27th, 2012
Re: Shape border does not show.
Reply #9 - Apr 25th, 2013 at 12:04pm
Print Post  
Hi stoyo,

Yes it's working fine. Thanks  Smiley
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint