Infragistics：如何動態添加數據並使用ForceDirectedGraphDiagramLayout？

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();
}