Layout Groups in Diagram with different layout ins

I’m very new to GoSilverlight, sorry this is a basic question.

I am grouping parts by their type (a String property). Parts are related to other Parts. The groups are unrelated (linked). They act as containers.

I wish to do a grid layout of the parts within the group to constrain them to a reasonable bounding rectangle.

Then I wish to perform a layout of the groups so that they do not overlap.

Is there an example that would be a good starting point?

Or, what are the words I need to use when I search the documentation?

Thank you.

Have you tried it without setting either Diagram.Layout or Group.Layout?
That should work, although it won’t produce great results because of links crossing over nodes.

You could try setting Diagram.Layout to be a ForceDirectedLayout.
That doesn’t guarantee that the groups will not overlap, but it ought to produce a better result than using the default layout.
Whether or not you should use a different kind of layout, I cannot say, because it depends on the effective relationships between the groups.

I’ve tried no layouts, as well as ForceDirectedLayout in the Diagram. I’ve also tried a mixture of other layouts in the Group and/or Diagram.

I have not found a way to force the groups from overlapping. The nodes do not overlap.

Perhaps I need to implement my own layout?

Any advice, hints or examples you would suggest?

As soon as I get a chance I’ll see what’s happening when using a ForceDirectedLayout for the whole Diagram. I’m curious about how the links between individual nodes (rather than to the groups) are being treated by ForceDirectedLayout.

The default Group.Layout is a DiagramLayout, which just does stupid positioning of the nodes in a tabular manner. That might be OK initially, but really one would like that to be smarter too.

Thanks.

I’m very new to GoSilverlight, so advice will be warmly received.

Is the following application somewhat like what you want?
It uses ForceDirectedLayout for the Diagram.Layout and a GridLayout for the Group.Layout.
It does suffer from not optimizing the positions of the nodes within each group to avoid links crossing over nodes – that would require some custom positioning of the nodes after the Diagram layout had been performed.

These files work in Silverlight 4 or 5 and in WPF 4.

[code]

<UserControl x:Class=“Partition.Partition”
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”>

<UserControl.Resources>

<go:StringBrushConverter x:Key=“theBrushConverter” />

<go:BooleanStringConverter x:Key=“theButtonConverter” TrueString="-" FalseString="+" />


<go:NodePanel Sizing=“Auto” go:Part.SelectionAdorned=“True”
go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}">
<go:NodeShape go:NodePanel.Figure=“Ellipse”
go:Node.PortId="" go:Node.LinkableFrom=“True” go:Node.LinkableTo=“True”
Fill="{Binding Path=Data.Color, Converter={StaticResource theBrushConverter}}" />

</go:NodePanel>

<go:DataTemplateDictionary x:Key="GDTD">
  <DataTemplate x:Key="">
    <Border CornerRadius="5" BorderThickness="2" Background="Transparent"
            BorderBrush="{Binding Path=Data.Color, Converter={StaticResource theBrushConverter}}"
            go:Part.SelectionAdorned="True"
            go:Node.LocationElementName="myGroupPanel"
            go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
            go:Node.Avoidable="False"
            go:Group.IsSubGraphExpanded="True">
      <StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
          <Button x:Name="myCollapseExpandButton" Click="CollapseExpandButton_Click"
              Content="{Binding Path=Group.IsExpandedSubGraph, Converter={StaticResource theButtonConverter}}"
              Width="20" Margin="0 0 5 0"/>
          <TextBlock Text="{Binding Path=Data.Key}" FontWeight="Bold" />
        </StackPanel>
        <go:GroupPanel x:Name="myGroupPanel" Padding="5" />
      </StackPanel>
      <go:Group.Layout>
        <go:GridLayout CellSize="1 1" Spacing="20 20" WrappingColumn="3" />
      </go:Group.Layout>
    </Border>
  </DataTemplate>
  <DataTemplate x:Key="Collapsed">
    <StackPanel Orientation="Horizontal"
                go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
          go:Group.IsSubGraphExpanded="False">
      <Button x:Name="myCollapseExpandButton" Click="CollapseExpandButton_Click"
            Content="{Binding Path=Group.IsExpandedSubGraph, Converter={StaticResource theButtonConverter}}"
            Width="20" />
      <TextBlock Text="{Binding Path=Data.Key}" FontWeight="Bold" />
    </StackPanel>
  </DataTemplate>
</go:DataTemplateDictionary></p><p>    <DataTemplate x:Key="LinkTemplate">
  <go:LinkShape x:Name="Path" StrokeThickness="2" go:Part.Reshapable="True"
                Stroke="{Binding Path=Link.FromNode.Data.Color}" >
    <go:Link.Route>
      <go:Route Routing="AvoidsNodes" Curve="None" Corner="5" RelinkableFrom="True" RelinkableTo="True" />
    </go:Link.Route>
  </go:LinkShape>
</DataTemplate>

</UserControl.Resources>


<go:Diagram x:Name=“myDiagram” Padding=“10”
HorizontalContentAlignment=“Stretch” VerticalContentAlignment=“Stretch”
NodeTemplate="{StaticResource NodeTemplate}"
GroupTemplateDictionary="{StaticResource GDTD}"
LinkTemplate="{StaticResource LinkTemplate}">
go:Diagram.Layout
<go:ForceDirectedLayout />
</go:Diagram.Layout>
<go:Node Id=“Loading”>

</go:Node>
</go:Diagram>

[/code]

[code]/* Copyright © Northwoods Software Corporation, 2008-2012. All Rights Reserved. */

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using Northwoods.GoXam;
using Northwoods.GoXam.Model;

namespace Partition {
public partial class Partition : UserControl {
public Partition() {
InitializeComponent();

  var model = new GraphModel<SimpleData, String>();
  var nodes = new ObservableCollection<SimpleData>();
  var subgraphs = new List<SimpleData>();

  // create a bunch of subgraph data
  for (int i = 0; i < 7; i++) {
    SimpleData g = new SimpleData();
    g.Key = String.Format("Group {0:D}", i);
    g.Color = String.Format("#{0:X}{1:X}{2:X}", 80+rand.Next(100), 80+rand.Next(100), 80+rand.Next(100));
    g.IsSubGraph = true;
    g.IsSubGraphExpanded = true;
    g.WasSubGraphExpanded = false;
    subgraphs.Add(g);
    nodes.Add(g);
  }

  // create a lot of regular node data that are members of those subgraphs
  // But the PartManager won't create Nodes for these node data unless the parent group is expanded
  for (int i = 0; i < subgraphs.Count; i++) {
    for (int j = 0; j < 4; j++) {
      SimpleData d = new SimpleData();
      d.Color = String.Format("#{0:X}{1:X}{2:X}", 120+rand.Next(100), 120+rand.Next(100), 120+rand.Next(100));
      d.Key = d.Color;
      d.SubGraphKey = subgraphs[i].Key;
      nodes.Add(d);
    }
  }

  model.NodesSource = nodes;

  List<SimpleData> simples = nodes.Where(d => !d.IsSubGraph).ToList();
  for (int i = 0; i < simples.Count; i++) {
    SimpleData d = simples[i];
    d.FromKeys.Add(simples[i == 0 ? 0 : rand.Next(i)].Key);
  }

  model.Modifiable = true;
  myDiagram.Model = model;
  model.HasUndoManager = true;

  // remove the "Loading..." message
  myDiagram.InitialLayoutCompleted += (s, e) => {
    Node n = myDiagram.PartsModel.FindNodeByKey("Loading");
    if (n != null) myDiagram.PartsModel.RemoveNode(n);
  };
}

Random rand = new Random();

private void CollapseExpandButton_Click(object sender, RoutedEventArgs e) {
  // the Button is in the visual tree of a Node
  Button button = (Button)sender;
  Group sg = Part.FindAncestor<Group>(button);
  if (sg != null) {
    SimpleData subgraphdata = (SimpleData)sg.Data;
    if (!subgraphdata.IsSubGraph) return;
    // always make changes within a transaction
    myDiagram.StartTransaction("CollapseExpand");
    // toggle whether this node is expanded or collapsed
    //sg.IsExpandedSubGraph = !sg.IsExpandedSubGraph;
    // instead of data-binding go:Group.IsSubGraphExpanded, just replace the template
    // with one that has that attached property set appropriately
    subgraphdata.Category = sg.IsExpandedSubGraph ? "Collapsed" : "";
    myDiagram.CommitTransaction("CollapseExpand");
  }
}

}

// Because these properties are only set at initialization,
// their setters do not need to call RaisePropertyChanged.
public class SimpleData : GraphModelNodeData {
public String Color { get; set; }
}
}[/code]

Thank you! I am digging into this now.

OK, I merged in the sample code, but this still didn’t have the desired effect.

If I could figure out how to insert an image I would post a image of what I am trying to achieve.

However, I have been instructed to stop using Silverlight and start looking at HTML5 for our solution.

Thank you for your help.

OK, then I assume you are looking into using GoJS.
I’m still interested in what kind of diagram you want to achieve.
To be able to include an image, use the “Full Reply Editor”, which you can get either by clicking the “Post Reply” button or by clicking the button with the arrow pointing up & right, in the button bar below.
Or you might want to post in the GoJS forum or via e-mail.

Yes, I’m the guy who has been pestering you about GoJS :-)

Here is what I am trying to achieve (not the relationships, those got mucked up).

Here is what the sample code looked like:

The difference is that I produced the first model with a tool that provides container objects, which have a parent child relationship with the nodes.

Additionally, I can apply individual layout styles to each container.

I am starting to look at GoJS now.

Thank you again.

It appears that your Group template isn’t defined correctly, so the groups are not showing up reasonably.
I have made some trivial edits to my code, above. (I modified my post.)
Here’s a screenshot:

Would you post the GoJS Sample? I’m sure that it would help me a great deal!