Hi,
how to create three items which have three different images. I read the previous answers, but I could not find the answer
//////////////////////////
DiagramListViewDataItem item = new DiagramListViewDataItem();
item.Key = "MyShape";
item.Shape = new AShape();
item.Group = radDiagramToolbox1.Groups[0];
radDiagramToolbox1.Items.Add(item);
//////////////////////////
But the above code is about custom shape not custom image!
11 Answers, 1 is accepted
Thank you for writing.
According to the provided brief description, I suppose that you are trying to add a custom DiagramListViewDataItem to the RadDiagramToolbox with a specific image. For this purpose, it is necessary to set the DiagramListViewVisualItem.Image property but hide the DiagramListViewVisualItem.ShapeElement. However, note that it is important to have a shape because when dropping the toolbox item a RadDiagramShape is created with the respective shape.
public
RadForm1()
{
InitializeComponent();
new
RadControlSpyForm().Show();
this
.radDiagramToolbox1.VisualItemFormatting += radDiagramToolbox1_VisualItemFormatting;
DiagramListViewDataItem item =
new
DiagramListViewDataItem();
item.Key =
"MyShape"
;
item.Text =
"My Shape"
;
item.Shape =
new
AShape();
item.Group = radDiagramToolbox1.Groups[0];
this
.radDiagramToolbox1.Items.Add(item);
}
public
class
AShape : ElementShape
{
public
override
GraphicsPath CreatePath(Rectangle bounds)
{
GraphicsPath path =
new
GraphicsPath();
path.AddString(
"A"
,
new
FontFamily(
"Arial"
), 0, 50, Point.Empty, StringFormat.GenericTypographic);
return
path;
}
}
private
void
radDiagramToolbox1_VisualItemFormatting(
object
sender, ListViewVisualItemEventArgs e)
{
DiagramListViewDataItem dataItem = e.VisualItem.Data
as
DiagramListViewDataItem;
if
(dataItem !=
null
)
{
if
(dataItem.Key ==
"MyShape"
)
{
DiagramListViewVisualItem visual = e.VisualItem
as
DiagramListViewVisualItem;
visual.Image = Properties.Resources.Earth;
visual.ImageLayout = ImageLayout.Zoom;
visual.ShapeElement.Opacity = 0;
}
}
}
I hope this information helps. Should you have further questions I would be glad to help.
Regards,
Dess
Progress Telerik
Hi Dess,
Thank you for the answer. Now I understood how to create a new item to the list, Honestly, the names like DiagramListViewDataItem, RadDiagramToolbox, DiagramListViewVisualItem are a bit difficult to be memorized!
I defined a shape like this
*****************************
RadDiagramShape shape1 = new RadDiagramShape()
{
Text = "",
Shape = new AShape(),
BackColor = Color.LimeGreen,
Image = ?????
};
*********************************
I don't know how to set the same image to be shown in diagram, please see the attached.
Honestly, it's complicated.
Thank you.
Dess,
I am not sure, maybe there is an event which is fired when dragging. If yes, again I put the name of item.key in If block ...
Thank you for writing back.
You can handle the RadDiagramToolbox1.ListViewElement.DragDropService.PreviewDragDrop event and assign the RadDiagramShape.DiagramShapeElement.Image property. Here is a sample code snippet:
public
RadForm1()
{
InitializeComponent();
this
.radDiagramToolbox1.ListViewElement.DragDropService.PreviewDragDrop
+= DragDropService_PreviewDragDrop;
}
private
void
DragDropService_PreviewDragDrop(
object
sender, RadDropEventArgs e)
{
DiagramListViewVisualItem dragItem = e.DragInstance
as
DiagramListViewVisualItem;
RadDiagramElement dropTarget = e.HitTarget
as
RadDiagramElement;
if
(dragItem!=
null
&& dropTarget !=
null
&& dragItem.Data.Key==
"MyShape"
)
{
e.Handled =
true
;
RadDiagramShape shape = dropTarget.Shapes.Last()
as
RadDiagramShape;
shape.DiagramShapeElement.Shape =
null
;
shape.BackColor = Color.Transparent;
shape.DiagramShapeElement.Image = dragItem.Image;
shape.DiagramShapeElement.ImageLayout = dragItem.ImageLayout;
};
}
I hope this information helps. If you have any additional questions, please let me know.
Regards,
Dess
Progress Telerik
Hi Dess,
Thank you for your help, I also found a way but I am not sure I used the rules correctly!
**************************************************
// event
this.radDiagramToolbox1.VisualItemFormatting += radDiagramToolbox1_VisualItemFormatting;
// item
DiagramListViewDataItem item = new DiagramListViewDataItem() ;
item.Key = "Unit";
// item.Text = "Unit";
// shape
RoundRectShape rec = new RoundRectShape();
rec.Radius = 0;
// set
item.Shape = rec;
// group
item.Group = this.radDiagramToolbox1.Groups[0];
this.radDiagramToolbox1.Items.Add(item);
****************************************************
event ->
****************************************************
private void radDiagramToolbox1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
DiagramListViewDataItem dataItem = e.VisualItem.Data as DiagramListViewDataItem;
if (dataItem != null)
{
DiagramListViewVisualItem el = e.VisualItem as DiagramListViewVisualItem;
if (dataItem.Key == "Unit")
{
// on toolbox
el.Image = Properties.Resources.units;
el.ImageLayout = ImageLayout.Zoom;
el.ShapeElement.Opacity = 0;
el.Text = "";
el.TextElement.Text = "";
// on diagram
el.ShapeElement.BackColor = Color.Transparent;
el.ShapeElement.Image = Properties.Resources.units;
el.ShapeElement.ImageLayout = ImageLayout.Stretch;
el.ShapeElement.Text = "";
el.ShapeElement.Size = new Size(110, 50);
// el.ShapeElement.Name = "Unit";
el.ShapeElement.BorderThickness = new Padding(0);
}
else
{
el.ShapeElement.BackColor = Color.FromArgb(37, 160, 218);
}
}
}
**********************************************************
it's working ;)
My last question, I am wondering where I can find the documentation about telerik? as I visited
docs.telerik.com/devtools/winforms/diagram/diagram-items/connections/connections
but I cannot find the code like the events and other tricks!
I have many questions as I am trying to use diagram component as a flow diagram, to connect two units programmatically.
Thank you.
Thank you for writing back.
The provided code snippet seems OK. Feel free to use it if it achieves your custom requirement.
The documentation regarding the RadDiagramToolbox is available here: http://docs.telerik.com/devtools/winforms/diagram/toolbox
However, it doesn't contain the demonstrated customizations as it is not a common case to customize the RadDiagramToolbox in that way. Note that RadDiagramToolbox is a derivative of the RadListView. Hence, you can refer to the RadListView's documentation in order to get a better understanding of the formatting options.
I hope this information helps. If you have any additional questions, please let me know.
Regards,
Dess
Progress Telerik
Hi,
is it possible to add a "normal" control object like button or even an RadChart as RadDiagramShape ?
br
Paul
I have answered your question in the other thread you have opened: http://www.telerik.com/forums/extended-diagram-shape.
In the future please avoid duplicating your questions as this may slow down our response. Thank you for the understanding.
I hope this helps.
Regards,
Hristo
Progress Telerik
The entire toolbox documentation (apart from class docs) is below. This is equivalent to just a 'design time' page from other controls. Is it possible to get more usage documentation? If I've missed it, please let me know.
Using the RadDiagramToolbox at design time
Since RadDiagramToolbox is a separate control it is available in the toolbox. Here is how to put it in action:
Drag and drop RadDiagramToolbox on the form.
Drag and drop RadDiagram on the form.
Run the application. Now, you are allowed to drag any shape from the RadDiagramToolbox and drop it onto the RadDiagram.
Thank you for writing.
Indeed the documentation of the diagram toolbox control is scarce. That is why I have logged an internal item to improve it. I have also updated your Telerik points for bringing this question.
In the meantime, please let me know if you have some specific questions and I will try to help you.
Looking forward to your reply.
Regards,
Hristo
Progress Telerik