Hi,
I'm evaluating telerik diagrams for a WPF app that will allow users to model a network comms room. I think so far it looks great and fits the bill, but I have a couple of specific things I'm trying to do that because I'm new to WPF and Telerik, I'm struggling with.
1) In the toolbox, I want to be able to drag racks into the canvas area, a rack could just be a rectangle with special attributes. Is is possible to allow for a shape to map to a domain model like a rack? And could I use the properties dialog thing to collect all the details, for example rack name, rack size etc.. ? Sorry I don't know what the name is for that properties dialog thing that I've seen on the demos, but I can't work out how to make one appear
2) Once I 've got a rack on the canvas, I then want to be able to drag multiple "switches" or "patch panels" into the rack, and again set properties. Is is possible to make the rack act as a container for these other objects?
Any pointers or snippets would be grateful - getting to grips with this whilst learning WPF and MVVM is quite tricky!
Thanks!
Matt
I'm evaluating telerik diagrams for a WPF app that will allow users to model a network comms room. I think so far it looks great and fits the bill, but I have a couple of specific things I'm trying to do that because I'm new to WPF and Telerik, I'm struggling with.
1) In the toolbox, I want to be able to drag racks into the canvas area, a rack could just be a rectangle with special attributes. Is is possible to allow for a shape to map to a domain model like a rack? And could I use the properties dialog thing to collect all the details, for example rack name, rack size etc.. ? Sorry I don't know what the name is for that properties dialog thing that I've seen on the demos, but I can't work out how to make one appear
2) Once I 've got a rack on the canvas, I then want to be able to drag multiple "switches" or "patch panels" into the rack, and again set properties. Is is possible to make the rack act as a container for these other objects?
Any pointers or snippets would be grateful - getting to grips with this whilst learning WPF and MVVM is quite tricky!
Thanks!
Matt
1 Answer, 1 is accepted
0
Hello Matt,
You can populate the RadDiagramToolbox control with business objects based on your requirements. For example, you can create a gallery of Racks and a gallery of Switches. Then as there is a built-in drag/drop logic between the RadDiagramToolbox and the RadDiagram, you'll have to customize it by creating custom handlers for the RadDiagramToolbox DragInitialized and the RadDiagram Drop events. In the events you can get the data object that is being dragged from the toolbox and based on its type, create different shapes in the RadDiagram.
As you'd like to create container shapes out of the Rack instances, you can use the RadDiagramContainerShape class. It basically represents a shape that contains other shapes. I attached a sample solution demonstrating how to handle the RadDiagram Drop event to add RadDiagramShapes for the dropped objects of type Switch and RadDiagramContainerShapes for the dropped objects of type Rack.
As for the "the properties dialog thing" - I believe you're referring to the SettingsPane. You can define a SettingsPane in the RadDiagram through the ItemInformationAdorner.AdditionalContent attached property:
Unfortunately at this point, there isn't a straight-forward way to customize the SettingsPane to display custom data but you can add some code-behind logic to add new data in it. The SettingsPane basically displays a RadTabControl and you can add new RadTabItems in it, in the LayoutUpdated event handler. This approach is also demonstrated in the sample solution.
I hope this information will get you started. Let us know if you need further assistance.
Kind regards,
Tina Stancheva
the Telerik team
You can populate the RadDiagramToolbox control with business objects based on your requirements. For example, you can create a gallery of Racks and a gallery of Switches. Then as there is a built-in drag/drop logic between the RadDiagramToolbox and the RadDiagram, you'll have to customize it by creating custom handlers for the RadDiagramToolbox DragInitialized and the RadDiagram Drop events. In the events you can get the data object that is being dragged from the toolbox and based on its type, create different shapes in the RadDiagram.
As you'd like to create container shapes out of the Rack instances, you can use the RadDiagramContainerShape class. It basically represents a shape that contains other shapes. I attached a sample solution demonstrating how to handle the RadDiagram Drop event to add RadDiagramShapes for the dropped objects of type Switch and RadDiagramContainerShapes for the dropped objects of type Rack.
As for the "the properties dialog thing" - I believe you're referring to the SettingsPane. You can define a SettingsPane in the RadDiagram through the ItemInformationAdorner.AdditionalContent attached property:
<telerik:RadDiagram x:Name="xDiagram" Grid.Column="1"> <primitives:ItemInformationAdorner.AdditionalContent> <telerik:SettingsPane x:Name="settingsPane" Diagram="{Binding ElementName=xDiagram}"/> </primitives:ItemInformationAdorner.AdditionalContent></telerik:RadDiagram>Unfortunately at this point, there isn't a straight-forward way to customize the SettingsPane to display custom data but you can add some code-behind logic to add new data in it. The SettingsPane basically displays a RadTabControl and you can add new RadTabItems in it, in the LayoutUpdated event handler. This approach is also demonstrated in the sample solution.
I hope this information will get you started. Let us know if you need further assistance.
Kind regards,
Tina Stancheva
the Telerik team
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.