Question

我有一个图，该图绑定到节点的ObservableCollection和连接的ObservableCollection。当节点和连接被硬编码到这些列表中时，该图可以很好地显示它们。但是，当稍后在程序中将节点和连接值添加到列表时，所有节点都在窗口的中心彼此重叠。在这种情况下，ForceDirectedGraphDiagramLayout似乎无法按照我认为的方式工作。我的问题是，如何动态地向图中添加数据并使该图位于ForceDirectedGraphDiagramLayout中？

这是我的网格：

<Grid Background="White">
    <ig:XamDiagram x:Name="Diagram"
                   OptionsPaneVisibility="Visible" 
                   NavigationPaneVisibility="Visible" 
                   DefaultDragInteraction="Pan">
        <ig:XamDiagram.NodeDefinitions>
            <ig:NodeDefinition TargetType="{x:Type models:EntityType}" 
                               KeyMemberPath="Name"
                               ConnectionPointsMemberPath="EntityPoints" >
                <ig:NodeDefinition.NodeStyle>
                    <Style TargetType="ig:DiagramNode" >
                        <Setter Property="DisplayTemplate" Value="{StaticResource NodeTemplate}"/>
                        <Setter Property="ShapeType" Value="None" />
                        <Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource Self}, Path=Content.FillColor, Converter={StaticResource con}, Mode=TwoWay}" />
                        <Setter Property="Width" Value="140" />
                    </Style>
                </ig:NodeDefinition.NodeStyle>
            </ig:NodeDefinition>
        </ig:XamDiagram.NodeDefinitions>
        <ig:XamDiagram.ConnectionDefinitions>
            <ig:ConnectionSourceDefinition TargetType="{x:Type models:Association}" 
                                           StartNodeKeyMemberPath="End1Name" 
                                           EndNodeKeyMemberPath="End2Name"
                                           StartNodeConnectionPointNameMemberPath="PointFromName"
                                           EndNodeConnectionPointNameMemberPath="PointToName">
                <ig:ConnectionSourceDefinition.ConnectionStyle>
                    <Style TargetType="ig:DiagramConnection">
                        <Setter Property="StartCapType" Value="None"/>
                        <Setter Property="EndCapType" Value="FilledArrow"/>
                        <Setter Property="DisplayTemplate" >
                            <Setter.Value>
                                <DataTemplate/>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ig:ConnectionSourceDefinition.ConnectionStyle>
            </ig:ConnectionSourceDefinition>
        </ig:XamDiagram.ConnectionDefinitions>
        <ig:XamDiagram.Layout>
            <ig:ForceDirectedGraphDiagramLayout Buffer="200" />
        </ig:XamDiagram.Layout>
    </ig:XamDiagram>
</Grid>

后面的代码：

    private CurrentData currentData = CurrentData.GetInstance();

    private ObservableCollection<EntityType> Nodes { get; set; }
    private ObservableCollection<Association> Associations { get; set; }

    public MyDiagram()
    {
        InitializeComponent();

        Nodes = currentData.GetNodes();
        Associations = currentData.GetAssociations();

        Diagram.ItemsSource = Nodes;
        Diagram.ConnectionsSource = Associations;
    }

    void OnLoad(object sender, RoutedEventArgs e)
   {
       Diagram.ScaleToFit();
   }

GetNodes()和GetAssociations()返回各自的ObservableCollections。当这些集合中的对象在程序运行之前被硬编码时，图的定位就可以完美地工作。当在程序已经运行时将对象添加到列表中时，所有节点都放置在另一个之上。

Answer 1

我通过将数据绑定从代码隐藏的构造函数移动到OnLoad()函数来解决了这个问题。

现在的代码如下：

private CurrentData currentData = CurrentData.GetInstance();

private ObservableCollection<EntityType> Nodes { get; set; }
private ObservableCollection<Association> Associations { get; set; }

public MyDiagram()
{
    InitializeComponent();
}

void OnLoad(object sender, RoutedEventArgs e)
{
    Nodes = currentData.GetNodes();
    Associations = currentData.GetAssociations();

    Diagram.ItemsSource = Nodes;
    Diagram.ConnectionsSource = Associations;
    Diagram.ScaleToFit();
}

Infragistics：如何动态添加数据并使用ForceDirectedGraphDiagramLayout？

1 个答案: