(UTC)
  The MindFusion Forums › Archived Boards › Silverlight › Custom Node with text wrapping
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) Custom Node with text wrapping (Read 8911 times)
jagdipa2
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 3
Joined: Oct 28th, 2011
Custom Node with text wrapping
Oct 30th, 2011 at 2:04pm
Print Post  
You have an excellent example of creating a custom shapenode (tutorial3).

Is it possible to expand this a little such that one of the textblocks uses text wrapping?

Ideally, the textblock would be edittable as well.

I am trying to do something similar and want to keep the ratio (or width) of the textblock and get the text from wrapping. In the existing sample, when I turn text wrapping on and call the resizeToFitText, the text doesnt wrap and the control expands horizontally.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node with text wrapping
Reply #1 - Oct 31st, 2011 at 10:15am
Print Post  
Hi,

The built-in ResizeToFitText assumes there is only one textblock displaying the value of the Text property, so it's of no use for nodes similar to the OrgChartNodes from the tutorial. If you need support for more textblocks, you will have to call their Measure methods as shown below:

http://mindfusion.eu/Forum/YaBB.pl?board=diaglite_disc;action=display;num=127182...
http://mindfusion.eu/Forum/YaBB.pl?board=diaglite_disc;action=display;num=128377...
http://mindfusion.eu/Forum/YaBB.pl?board=diaglite_disc;action=display;num=127649...

and then combine somehow the measured sizes to determine the size for the whole node depending on the template of your custom nodes.

For editing the texts in-place, you could either keep some TextBoxes in the template that are shown only when a text block is clicked and are bound to the same properties as their corresponding textblocks, or otherwise implement the InplaceEditable interface to use the built-in double-click edit feature. We'll try to extend the tutorial for the next release to show this.

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


I love YaBB 1G - SP1!

Posts: 52
Joined: Jun 23rd, 2011
Re: Custom Node with text wrapping
Reply #2 - Nov 2nd, 2011 at 9:59am
Print Post  
Hi Stoyo,

Is there any way I can control the node size from within the custom node?

I have tried the following (setting a static grid width and height). The nodes are created according to the MinHieght and MinWidth of the grid. But when I do a treelayout.arange, the nodes are overlapping.



Code
Select All
			  <Canvas x:Name="Adorner">
				<Grid Name="GridOverview" MinHeight="50" MinWidth="150">
				    <Grid.ColumnDefinitions>
					  <ColumnDefinition></ColumnDefinition>
					  <ColumnDefinition></ColumnDefinition>
				    </Grid.ColumnDefinitions>
				    <Grid.RowDefinitions>
					  <RowDefinition Height="15"></RowDefinition>
					  <RowDefinition></RowDefinition>
				    </Grid.RowDefinitions>

				    <TextBlock Grid.Column="0" Grid.Row="0" Name="Numbering" Text="{TemplateBinding Numbering}"></TextBlock>
				    <TextBlock Grid.Column="1" Grid.Row="0" Name="ItemType" Text="{TemplateBinding ItemType}" TextAlignment="Right"></TextBlock>

				    <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Background="AliceBlue">
						<TextBlock Name="DescriptionStatic" Text="{TemplateBinding Description}" TextWrapping="Wrap"></TextBlock>
						<StackPanel Name="PanelDescription" Visibility="Collapsed">
						    <TextBox Name="Description" Text="{TemplateBinding Description}" TextWrapping="Wrap" ></TextBox>
						    <Button Content="Ok"></Button>
						</StackPanel>
				    </Grid>

				</Grid>
		    </Canvas>
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node with text wrapping
Reply #3 - Nov 2nd, 2011 at 11:40am
Print Post  
Hi,

TreeLayout.NodeDistance is the distance between node centers, so try making it bigger than the node widths.

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


I love YaBB 1G - SP1!

Posts: 52
Joined: Jun 23rd, 2011
Re: Custom Node with text wrapping
Reply #4 - Nov 3rd, 2011 at 11:04am
Print Post  
Okay, so the nodes are no longer overlapping.

But the links are not readjusting according to the width. They are still anchored in the old position, instead of being anchored to the top-centre of each node.

How do I do this?

Code
Select All
    <Style TargetType="local:HFRMBox">
<Setter Property="Template">
<Setter.Value>
		    <ControlTemplate TargetType="local:HFRMBox">
			  <Canvas x:Name="Adorner" Width="200">

				<Grid Name="GridOverview" Width="200">
				    <Grid.ColumnDefinitions>
					  <ColumnDefinition></ColumnDefinition>
					  <ColumnDefinition></ColumnDefinition>
				    </Grid.ColumnDefinitions>
				    <Grid.RowDefinitions>
					  <RowDefinition Height="15"></RowDefinition>
					  <RowDefinition Height="Auto"></RowDefinition>
				    </Grid.RowDefinitions>

				    <TextBlock Grid.Column="0" Grid.Row="0" Name="Numbering" Text="{TemplateBinding Numbering}"></TextBlock>
				    <TextBlock Grid.Column="1" Grid.Row="0" Name="ItemType" Text="{TemplateBinding ItemType}" TextAlignment="Right"></TextBlock>

				    <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Background="AliceBlue">
						<TextBlock Name="DescriptionStatic" Text="{TemplateBinding Description}" TextWrapping="Wrap"></TextBlock>
						<StackPanel Name="PanelDescription" Visibility="Collapsed">
						    <TextBox Name="Description" Text="{TemplateBinding Description}" TextWrapping="Wrap" ></TextBox>
						    <Button Content="Ok"></Button>
						</StackPanel>
				    </Grid>

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



Code
Select All
	  Dim tl As New Layout.TreeLayout
	  tl.LinkStyle = Layout.TreeLayoutLinkType.Cascading3
	  tl.NodeDistance = 200
	  tl.Arrange(DiagramView1)
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node with text wrapping
Reply #5 - Nov 3rd, 2011 at 11:56am
Print Post  
Have you set the node's Bounds.Width value to 200 too? The links are centered according to node.Bounds and not to the values in the template, so you will get some offset if they are different. Instead of hard-coded width, better use Width="{TemplateBinding Width}" syntax in the template as shown in the tutorials, so that the root visual element automatically gets as big as the node.

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


I love YaBB 1G - SP1!

Posts: 52
Joined: Jun 23rd, 2011
Re: Custom Node with text wrapping
Reply #6 - Nov 8th, 2011 at 8:58am
Print Post  
Okay, so I have the text wrapping, with the arrows centering.

My problem now is that the diagram still sees the old widths. When I add new nodes, the auto resizing of the diagram does not work.

Do you mind if I send you a trimmed down version of my application? You can then see exactly what is happening.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node with text wrapping
Reply #7 - Nov 8th, 2011 at 9:38am
Print Post  
What kind of old widths does it see? You must call ResizeToFitItems after adding new nodes to resize the diagram according to its content. You can email the test project to support@mindfusion.eu.
  
Back to top
 
IP Logged
 
jagdipa
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 52
Joined: Jun 23rd, 2011
Re: Custom Node with text wrapping
Reply #8 - Nov 8th, 2011 at 10:27am
Print Post  
Hi Stoyo,

I only have ResizeToFitText, and ResizeToFitImage. Both of these have no effect on the diagram.

I have send a trimmed down version of my project to the email, with a short description of what the problem is and where things are happening.

Hopefully we can find out what is going on.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node with text wrapping
Reply #9 - Nov 8th, 2011 at 10:36am
Print Post  
There's the Diagram.ResizeToFitItems method if you need to resize the whole diagram.
  
Back to top
 
IP Logged
 
jagdipa
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 52
Joined: Jun 23rd, 2011
Re: Custom Node with text wrapping
Reply #10 - Nov 8th, 2011 at 11:17am
Print Post  
Thanks Stoyo,

That has solved most of the problems.

The only one I have left then is that the diagram seems to ignore the height of the node.

Here's an exmaple (the plan box):



Uploaded with ImageShack.us
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node with text wrapping
Reply #11 - Nov 8th, 2011 at 11:46am
Print Post  
If you need to fill the entire node.Bounds area in PowderBlue as set for the child grid, assign it to root Canvas element:

<Canvas x:Name="Adorner" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
     Background="PowderBlue">

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


I love YaBB 1G - SP1!

Posts: 52
Joined: Jun 23rd, 2011
Re: Custom Node with text wrapping
Reply #12 - Nov 8th, 2011 at 12:02pm
Print Post  
Actually, the style of the box is correct. I need the numbers and the type of box outside of the PowerBlue textblock.

The picture above shows that the Plan box has too much text, so has wrapped around such that its height has expanded. However, the TreeLayout for the diagram has not detected this and moved boxes numbers 1,2 and 3 down accordingly.

The Custom node is set to the following:

Code
Select All
<ControlTemplate TargetType="local:HFRMBox">
			  <Canvas x:Name="Adorner" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">

				<Grid Name="GridOverview" Width="{TemplateBinding Width}">
				    <Grid.ColumnDefinitions>
					  <ColumnDefinition></ColumnDefinition>
					  <ColumnDefinition></ColumnDefinition>
				    </Grid.ColumnDefinitions>
				    <Grid.RowDefinitions>
					  <RowDefinition Height="15"></RowDefinition>
					  <RowDefinition Height="Auto" MinHeight="15"></RowDefinition>
				    </Grid.RowDefinitions>

				    <TextBlock Grid.Column="0" Grid.Row="0" Name="Numbering" Text="{TemplateBinding Numbering}"></TextBlock>
				    <TextBlock Grid.Column="1" Grid.Row="0" Name="ItemType" Text="{TemplateBinding ItemType}" TextAlignment="Right"></TextBlock>

				    <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Background="PowderBlue">
						<TextBlock Name="DescriptionStatic" Text="{TemplateBinding Description}" TextWrapping="Wrap"></TextBlock>
						<StackPanel Name="PanelDescription" Visibility="Collapsed">
						    <TextBox Name="Description" Text="{TemplateBinding Description}" TextWrapping="Wrap" ></TextBox>
						    <Button Content="Ok"></Button>
						</StackPanel>
				    </Grid>

				</Grid>
		    </Canvas>
</ControlTemplate>


I think the problem is that the node.bounds is not resized according to the contents.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Node with text wrapping
Reply #13 - Nov 8th, 2011 at 2:12pm
Print Post  
Indeed nodes are not resized automatically to fit their content. What you might try is to override the OnApplyTemplate method in your custom node class to get a reference to the inner grid, and then use its built-in Measure method:

Code
Select All
<!-- add a name to the inner grid -->
<Grid x:Name="grid" ...

Private _grid As Grid

Public Overrides Sub OnApplyTemplate()

MyBase.OnApplyTemplate()
	_grid = GetTemplateChild("grid")
End Sub

Public Sub ResizeToFitGrid()
	' the 15 added below is the height of first row of the outer grid
	_grid.Measure(New Size(200, Double.MaxValue))
	Bounds = New Rect(Bounds.X, Bounds.Y, 200, _grid.DesiredSize.Height + 15)
End Sub


and then call your resize method before applying TreeLayout:

Code
Select All
Private Sub RedrawDiagramView()
	For Each box As HFRMBox In DiagramView1.Nodes
		box.ResizeToFitGrid()
	Next
	Dim tl As New Layout.TreeLayout
	...


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


I love YaBB 1G - SP1!

Posts: 52
Joined: Jun 23rd, 2011
Re: Custom Node with text wrapping
Reply #14 - Nov 8th, 2011 at 4:15pm
Print Post  
Stoyan, thank you. If I could give you a medal, I would !
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge