2011-12-01 87 views
0

創建分層數據的定製的圖形顯示我想能夠顯示網絡樹的信息的最佳實踐(存儲在分層數據結構),如實施例中所示的位置:哪些是WPF

enter image description here

在圖中,我有一些主機(頂級節點) - 其中一個被認爲是'主',因此與其他頂級節點呈現不同。每個節點可以有多個子節點(探針)。節點之間的連線顯示連接,並且如果有任何連接斷開,則線路將如Hostname2和Probe2.3所示更改。任何選定的節點(主機或探測器)也應該以不同的方式呈現。

我正在使用Prism/MVVM,我試圖保持代碼儘可能乾淨,但我不確定顯示這些數據的最佳方式。

我已經考慮過使用TreeView,但我想不出創建節點之間鏈接的乾淨方式。我也考慮過創建一個自定義面板,但我不確定這是最合適的,不知道從哪裏開始。然後我想創建一個自定義的ItemsControl,因爲使用DataTemplate和HierarchicalDataTemplate會很好。我也可以創建一個包含畫布的用戶控件,並在代碼中做所有事情,但它並不感覺最好。

我很感激您的意見,示例代碼,鏈接或您可能有的任何建議。

回答

0

你很幸運,去年我不得不爲我目前的工作寫一些非常相似的東西。我不能給你任何我的代碼,但我可以引導你在正確的方向。

我在這裏找到了一個有向圖集合類:http://msdn.microsoft.com/en-us/library/ms379574(v=vs.80).aspx#datastructures20_5_topic3

我也使用我在MSDN上找到的徑向面板:http://msdn.microsoft.com/en-us/library/ms771363(v=VS.90).aspx。這允許多個節點繪製幾何形狀。所以如果你有3個節點,他們繪製一個三角形,4個方形,5個五邊形等等。你擁有的節點越多,佈局變成一個圓。這不適合你,但如果你按照鏈接,它會告訴你如何使用自定義佈局創建自定義面板。這可能是有益的。

然後,我使用Canvas作爲舞臺,將RadialPanel作爲Canvas的子元素。每個節點只是一個帶有添加到RadialPanel中的橢圓背景的WPF UserControl。有向圖集合然後成爲節點視圖模型的集合。我存儲節點連接的位置,就像鏈接列表一樣。這使我可以輕鬆遍歷我的圖形集合,而無需迭代每個節點以查找我正在查找的節點。

繪圖中有一些技巧可以確保佈局合理,特別是繪製連線時。看到我寫的這個StackOverflow後:WPF and C# - Issue with GeneralTransform and UIElement.TransformToVisual。它有一個鏈接到我的節點圖的圖像,所以你可以比較我們的圖。

這顯然不是一切,但我認爲這是一個好的開始。對於我來說,我無法真正地覆蓋任何當前的控件來完成我所需要的功能,所以我付出了艱辛的努力。在代碼隱藏模型和視圖模型中,權衡是很多工作,但我也控制了它如何繪製的主要方面。我幫助。

+0

感謝您的信息,但我不知道如何使用DataTemplate和HierarchalDataTemplate來檢索節點和子元素。 – Adam