This thread looks to be a little on the old side and therefore may no longer be relevant. Please see if there is a newer thread on the subject and ensure you're using the most recent build of any software if your question regards a particular product.
This thread has been locked and is no longer accepting new posts, if you have a question regarding this topic please email us at support@mindscape.co.nz
|
Hello, We are planning to create a databound diagram that looks like the following for our NServiceBus tool. I already have some experience with the diagram component, but pretty much sticking to a standard flow diagram, but for this one I'd like to get your professional opinion on:
Things to note:
Thanks a lot, Hadi |
|
|
Hello Hadi I'll have a think about this next week. In the mean time, if you could send more screenshots of the desired end result, that would help a lot. Jason Fauchelle |
|
|
Hi Jason, Thanks a lot. Attached you can find the screenshot of what we have so far, which is the flow diagram I talked about. The screenshot I provided is pretty much all I have so far, but basically:
Let me know if you need a bit more context or anything else. Thanks a lot, Hadi |
|
|
Hello Hadi Thanks for all the information. From the first image you posted, using a flow diagram would be fine, but I recommend extending from the generalized diagramming classes instead as they are more flexible to work with and may make things easier in the long run. These classes are: Diagram, DiagramNode, DiagramConnection and DiagramConnectionPoint. You can either extend some of these classes to include additional logic, or you can use these classes directly and apply custom styles to them. Extending DiagramNode and DiagramConnection makes it easy to differentiate between different types of nodes/connections and apply different styles to them. Personally I would start by trying to create the light gray strip down the center of the diagram. This could be done in 2 different ways: 1) The whole gray strip (including the dark section at the bottom) could be a single diagram node. The data context of the node could include the header section at the top and a collection of saga events. The advantage of this approach is that the whole thing can easily be moved (if you allow users to move the nodes). 2) The gray strip could be made up of individual nodes. There would be a node representing the header section with the title, guid and properties. Then there would be one node for each saga event. And then finally a node for the "Saga complete" section. I think that this approach would be the easiest one to write a layout algorithm for. Then, each of the parts to the left and right of the center strip would be separate diagram nodes - like you've already got so far. If I understand correctly, the two parts in the first image you posted that are titled "BuyersRemorseIsOver" represent the same model. In order to create a diagram that looks like this image, the two "BuyersRemorseIsOver" parts will need to be separate diagram nodes. They can be binding to the same underlying model though. The 2 most difficult things to achieve will be how to size each of the nodes, and how to layout the nodes. For sizing the nodes, here is what I recommend: Create a custom control that you will place at the root of each node style that requires custom sizing logic. This custom control would probably extend ContentControl. Then in the node styles, place elements within this root however you like. e.g. a vertical StackPanel displaying the title and list of properties etc. Then in the code of this custom control listen to when its size changes. When the size changes, get the DiagramNodeElement, and from this, get the IDiagramNode model (via the Node property) and change its size based on the size of the root control. This would allow you to do things like show/hide the properties to change the height of the node. To get the DiagramNodeElement from within your custom control, you could either set the Tag property of your custom root control using a binding, or step through the visual tree in the code of the custom control. To layout the nodes, you'd want to create a custom layout algorithm. This could either extend ILayoutAlgorithm, or it could just as easily be an algorithm sitting in you application somewhere that you apply to the diagram model. This algorithm could start by running through the node(s) in the center strip and stack them one on top of the other, and then go through the side nodes and place them as appropriate. As I mentioned earlier, the layout will be easier if the center strip is split into separate nodes. The reason for this is when placing the side nodes, it is easier to place them relative to each individual nodes, rather than all of them being positioned relative to a single center node. One thing you'll also need to work on is being able to reapply your layout algorithm if some of the properties are shown/hidden as this will cause the sizes to change and thus change the position of where each node should be. Last of all would be the connections, but I think this is enough information for one post to get you started. Based on the flow diagram image you posted, it looks like the structure of you model may be different to what I've described here. Since our diagramming framework works by having a one-to-one mapping between the node/connection models to their visual counterparts, what I have described here is the easiest way to achieve the results in the image you posted. If it is difficult to implement what I have described using your current model structure, you could create an adapter that converts back and forth between your model and the diagram model that will be rendered. Let me know if you have any questions. Jason Fauchelle |
|