Issue with node's visualisation on same Y Location

Hi,

I have two diagrams xDiagram & yDiagram.


I added one node (with text) in y diagram (left side).

I added two nodes (with text at an angle of -45 & image) & one link connecting these nodes in x diagram (right side).


So is looks like as:


But the issue is that I assigned the same Y location (50.0) to all nodes of both diagrams, but even then they are not shown on the same Y location.

How can I resolve this issue?

Please have a look of the code further down.

.xaml code:

<

UserControl x:Class=“Graph.MainPage”


xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation


xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml


xmlns:go=“http://schemas.nwoods.com/GoXam” xmlns:local=“clr-namespace:Graph”


xmlns:menu=“clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit” >



<UserControl.Resources>


<go:CountVisibilityConverter x:Key=“theCountVisibilityConverter” />


<go:DataTemplateDictionary x:Key=“NodeTemplates”>


<DataTemplate x:Key=“TransparentNode”>


<StackPanel go:Node.Location=“{Binding Path=Data.Location}”>


<TextBlock Text=“{Binding Path=Data.Key}” Foreground=“White” />


</StackPanel>


</DataTemplate>


<DataTemplate x:Key=“IconicNode”>


<StackPanel go:Node.SelectionElementName=“IconicNode”

go:Part.Selectable="True"

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

go:Part.Movable="False"

MouseLeftButtonDown="OnMouseLeftButtonDown">

<TextBlock Text="{Binding Path=Data.Key}">

<TextBlock.RenderTransform>

<RotateTransform Angle="-45" />

</TextBlock.RenderTransform>

</TextBlock>

<Image Source="{Binding Path=Data.NodeImage}" Stretch="Fill"/>

<ToolTipService.ToolTip>

<TextBlock Text="{Binding Path=Data.ToolTipText}" ToolTipService.Placement="Top"

Visibility="{Binding Path=Data.ToolTipText.Length,

Converter={StaticResource theCountVisibilityConverter}}" />

</ToolTipService.ToolTip>

</StackPanel>

</DataTemplate>

</go:DataTemplateDictionary>

<DataTemplate x:Key="YAxisLabelNodeTemplate">

<StackPanel go:Node.SelectionElementName="LabelNode"

go:Part.Selectable="True"

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

<TextBlock Text="{Binding Path=Data.Text}" go:Part.SelectionAdorned="True"/>

<menu:ContextMenuService.ContextMenu>

<menu:ContextMenu>

<menu:MenuItem Header="Delete" Click="OnDeleteContextMenuItemClick" >

<menu:MenuItem.Icon>

<Image Source="{Binding Path=Data.NodeImage}" Height="20" />

</menu:MenuItem.Icon>

</menu:MenuItem>

</menu:ContextMenu>

</menu:ContextMenuService.ContextMenu>

</StackPanel>

</DataTemplate>

<go:DataTemplateDictionary x:Key="LinkTemplates">

<DataTemplate x:Key="LinkTemplate">

<go:LinkPanel go:Part.SelectionElementName="Path" go:Part.SelectionAdorned="True">

<go:LinkShape Stroke="Black" StrokeThickness="1" />

</go:LinkPanel>

</DataTemplate>

<DataTemplate x:Key="ArrowLinkTemplate">

<go:LinkPanel go:Part.SelectionElementName="Path" go:Part.SelectionAdorned="True" go:Part.Selectable="True">

<go:LinkShape Stroke="Black" StrokeThickness="1" />

<Path Fill="Black" go:LinkPanel.ToArrow="Standard" />

</go:LinkPanel>

</DataTemplate>

</go:DataTemplateDictionary>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<go:Diagram Grid.Column="0"

x:Name="yDiagram"

BorderBrush="Blue" BorderThickness="1"

HorizontalContentAlignment="Stretch"

VerticalContentAlignment="Stretch"

ScrollViewer.VerticalScrollBarVisibility="Disabled"

DragSelectingTool="{x:Null}"

NodeTemplate="{StaticResource YAxisLabelNodeTemplate}">

<go:Diagram.DraggingTool>

<local:CustomDraggingTool Tag="{Binding ElementName=xDiagram}"/>

</go:Diagram.DraggingTool>

<go:Diagram.DefaultTool>

<go:ToolManager WheelBehavior="None"/>

</go:Diagram.DefaultTool>

</go:Diagram>

<go:Diagram Grid.Column="1"

x:Name="xDiagram"

BorderBrush="Blue" BorderThickness="1"

HorizontalContentAlignment="Stretch"

VerticalContentAlignment="Stretch"

ScrollViewer.VerticalScrollBarVisibility="Disabled"

DragSelectingTool="{x:Null}"

NodeTemplateDictionary="{StaticResource NodeTemplates}"

LinkTemplateDictionary="{StaticResource LinkTemplates}">

<go:Diagram.DefaultTool>

<go:ToolManager WheelBehavior="None" />

</go:Diagram.DefaultTool>

</go:Diagram>

</Grid>

</

UserControl>

.cs code:

public

partial class MainPage


{

public MainPage()

{

InitializeComponent();

showDiagram();

}

private void showDiagram()

{

var model = new GraphLinksModel<MyNodeData, String, String, MyLinkData>();

model.Modifiable =

true;

List<Point> points = new List<Point>();

MyNodeData node = new MyNodeData();

node.Key =

"0";

node.Location =

new Point(0, 0);

node.Category =

"TransparentNode";

MyNodeData node1 = new MyNodeData();

node1.Key =

"1";

node1.Location =

new Point(50, 50);

node1.Category =

"IconicNode";

node1.YAxisLabel =

"Stopping Point";

node1.ToolTipText =

"Key: 1";

node1.ToolTipText +=

"\nType: IconicNode";

node1.ToolTipText +=

"\nImage: Yes";

points.Add(node1.Location);

MyNodeData node2 = new MyNodeData();

node2.Key =

"2";

node2.Location =

new Point(200, 50);

node2.Category =

"IconicNode";

node2.YAxisLabel =

"Stopping Point";

points.Add(node2.Location);

model.NodesSource =

new ObservableCollection<MyNodeData>();

model.AddNode(node);

model.AddNode(node1);

model.AddNode(node2);

model.LinksSource =

new ObservableCollection<MyLinkData>();

MyLinkData link = new MyLinkData();

link.From =

"1";

link.To =

"2";

link.Category =

"ArrowLinkTemplate";

//model.AddLink(node1, null, node2, null);

model.AddLink(link);

model.Modifiable =

false;

xDiagram.Model = model;

model =

new GraphLinksModel<MyNodeData, String, String, MyLinkData>();

model.Modifiable =

true;

model.NodesSource =

new ObservableCollection<MyNodeData>();

node =

new MyNodeData();

node.Key =

"0";

node.Location =

new Point(0, 0);

node.Category =

"TransparentNode";

model.AddNode(node);

node =

new MyNodeData();

node.Key =

"1";

node.Text =

"Stopping Point";

node.Location =

new Point(0, 50);

model.AddNode(node);

yDiagram.Model = model;

yDiagram.AllowScroll =

false;

yDiagram.AllowDragOut =

false;

yDiagram.SelectionDeleting +=

new EventHandler<DiagramEventArgs>(yDiagram_SelectionDeleting);

}

void yDiagram_SelectionDeleting(object sender, DiagramEventArgs e)

{

deleteYDiagramNode();

}

private void OnDeleteContextMenuItemClick(object sender, RoutedEventArgs e)

{

var partdata = ((FrameworkElement)sender).DataContext as PartManager.PartBinding;

if (partdata == null || partdata.Data == null)

{

MessageBox.Show("Clicked on nothing or on unbound part");

}

else

{

yDiagram.SelectedParts.Add(partdata.Part);

deleteYDiagramNode();

}

}

private void deleteYDiagramNode()

{

if (yDiagram.SelectedParts != null)

{

var selectedNodes = new Part[yDiagram.SelectedParts.Count];

yDiagram.SelectedParts.CopyTo(selectedNodes, 0);

foreach (Part p in selectedNodes)

{

var n = p as Node;

if (n == null)

continue;

// ignore Links

var data = n.Data as MyNodeData;

if (data == null)

continue;

/*var myNodeDatas = xDiagram.NodesSource as IEnumerable;

if (myNodeDatas != null)

{

foreach (var otherdata in myNodeDatas)

{

if (otherdata.YAxisLabel == data.Text)

{

xDiagram.Model.Modifiable = true;

xDiagram.Model.RemoveNode(otherdata);

xDiagram.Model.Modifiable = false;

}

}

}*/

yDiagram.Model.RemoveNode(data);

}

}

}

private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

Node node = Part.FindAncestor<Node>(sender as UIElement);

if (node != null && node.Data != null)

{

if (DiagramPanel.IsDoubleClick(e))

{

//do job on double click

e.Handled =

true;

MessageBox.Show("Double clicked on " + node.Data);

}

//do job on single click

MyLinkData link = new MyLinkData();

List<Point> points = new List<Point>();

points.Add(

new Point(node.Location.X, node.Location.Y + 10));

points.Add(

new Point(node.Location.X + 100, node.Location.Y + 10));

link.Points = points;

link.Category =

"ArrowLinkTemplate";

((

GraphLinksModel<MyNodeData, String, String, MyLinkData>) xDiagram.Model).Modifiable = true;

((

GraphLinksModel<MyNodeData, String, String, MyLinkData>)xDiagram.Model).AddLink(link);

((

GraphLinksModel<MyNodeData, String, String, MyLinkData>)xDiagram.Model).Modifiable = false;

}

}

}

public class MyNodeData : GraphLinksModelNodeData<String>

{

public BitmapImage NodeImage

{

get

{

var image = new BitmapImage(new Uri("/AssgnAudio.JPG", UriKind.Relative));

return image;

}

set{}

}

public string ToolTipText { get; set; }

public string YAxisLabel { get; set; }

}

public class MyLinkData : GraphLinksModelLinkData<String, String>

{

}

// this DraggingTool is used by yDiagram, but modifies the node data in xDiagram.Model

public class CustomDraggingTool : DraggingTool

{

public Diagram OtherDiagram

{

get { return this.Tag as Diagram; }

}

// limit movement to be vertical only

protected override Point ComputeMove(Node n, Point newloc, Dictionary<Part, DraggingTool.Info> draggedparts)

{

newloc.X = n.Location.X;

if (newloc.Y > Diagram.ActualHeight - 50)

newloc.Y = Diagram.ActualHeight - 50;

else if (newloc.Y < 0)

newloc.Y = 0;

return newloc;

}

public override void DoActivate()

{

base.DoActivate();

if (this.OtherDiagram != null)

this.OtherDiagram.StartTransaction("Diagram1 moves");

}

public override void DoDeactivate()

{

base.DoDeactivate();

if (this.OtherDiagram != null)

this.OtherDiagram.CommitTransaction("Diagram1 moves");

}

protected override void DragOver(Point pt, bool moving, bool copying)

{

base.DragOver(pt, moving, copying);

if (this.OtherDiagram == null)

return;

foreach (Part p in DraggedParts.Keys)

{

var n = p as Node;

if (n == null)

continue;

// ignore Links

var data = n.Data as MyNodeData;

if (data == null)

continue; // not data bound?

var myNodeDatas = OtherDiagram.NodesSource as IEnumerable<MyNodeData>;

if (myNodeDatas != null)

{

foreach (var otherdata in myNodeDatas)

{

if (otherdata.YAxisLabel == data.Text)

{

// move related nodes in Y direction just as this node is being dragged in the Y direction

otherdata.Location =

new Point(otherdata.Location.X, data.Location.Y);

}

}

}

}

}

}

They look pretty close to me. I suspect that the issue is that the RenderTransform causes the text to be drawn up, beyond what Silverlight thinks are the actual bounds of the TextBlock and thus in this case the actual bounds of the Node. I’m sure it would look worse if the strings were longer than one character, because the text would be drawn even further up.

Maybe you want to change your expectations of what should be lined up. I think most people want to ignore the text when they want to “line up” objects that have shapes or images in them. So you should set the go:Node.LocationElementName, and maybe the go:Node.LocationSpot, attached properties on the Node DataTemplate for the diagram on the right. There is discussion of these issues in the GoXamIntro document, and there are lots of examples throughout the samples.

Hi,

After setting the following property in datatemplate of nodes on both the diagram, the issue with nodes have been resolved, but still issue is with link b/w nodes of right diagram. How this link be created so that it should be displayed as in the image under expected.

go:Node.LocationSpot =“Center”
Current view:

Expected view:

I gave the answer in my previous reply: set go:Node.LocationElementName, as many of the samples do.

Hi,

Now issue has been resolved with Node’s location & image by using

go:Node.LocationElementName


property.

Now I want to show TextBlock assigned to go:Node at some offset from Node’s Location property.
Like:

How can I do that?

Please refer .xaml code for NodeTemplate:

<

DataTemplate x:Key=“IconicNode”>


<StackPanel go:Node.SelectionElementName=“Icon”

go:Part.Selectable="True"

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

go:Node.LocationElementName="Icon"

go:Node.LocationSpot="Center"

MouseLeftButtonDown="OnMouseLeftButtonDown"

Cursor="Hand">

<Image x:Name="Icon" Source="{Binding Path=Data.NodeImage}" Stretch="None"/>

<TextBlock Text="{Binding Path=Data.Key}">

</TextBlock>

<ToolTipService.ToolTip>

<TextBlock Text="{Binding Path=Data.ToolTipText}" ToolTipService.Placement="Top"

Visibility="{Binding Path=Data.ToolTipText.Length,

Converter={StaticResource theCountVisibilityConverter}}"/>

</ToolTipService.ToolTip>

</StackPanel>

</DataTemplate>

Clearly you can’t use a StackPanel for that, because that Panel layout doesn’t do what you want.

I suggest you use a go:SpotPanel. Please read the section about Spots in the GoXamIntro.

Hi,

Thanks for your hint.