RichTextBox loses contents on drag&drop

[Andrew]

Hello,

I have a RichTextBox in a StackPanel and when I drag and drop (implemented using RadDragAnDropManager) the RichTextBox loses contents on drop. I suspect this is because of the unload(removing and adding it back to the visual tree).

Can you please give some hints how to make the control not lose his contents?

Thanks

[Andrew]

Sorry, I answered the question myself already :)

[Angeli]

Hi ken.

I was wondering if what type of file/object were you trying to drop onto the RadRichTextBox? I kind of have a problem with dragging images in a stackpanel onto the rich textbox. Is that even possible? You said you already solved your problem. I hope you can help me.

[Andrew]

Hi 

My scenario was that I was having a stack panel containing different items, one of them being a RichTextBox.
On dropping such an item, the RichTextBox (contained in this item) was losing its content.

What you describe it's different. 
If you drop on RadRichTextBox an image, not sure what is the default behavior of RichTextBox, not sure even if there is one.
How are you implementing the drop?

[Angeli]

I was trying to put an AllowDrop property to the work area or shall we say the rich textbox. It still won't work. :(

[Iva Toteva]

Hello Angeli,

Please find attached a sample application illustrating how you can insert images from files on drag and drop, as well as how you can use RadDragAndDropManager to for a TreeView in the same application.
If this is not what you were looking for, do not hesitate to contact us again.

Regards,
Iva
the Telerik team

[Angeli]

Hi Iva! Thank you so much for the example. It was exactly what I was looking for. Thanks again! :)

[Angeli]

Hi Iva! Sorry to bother you again. I tried to experiment with your code and added a list box with images in it. I wanted to drag them to the RadRichTextBox but I'm missing some parts. What must I add to radRichTextBox_Drop method to make it work?

[Ivailo Karamanolev]

Hello Angeli,

The AllowDrop property and the Drop event are used only when dragging and dropping files from the OS to the Silverlight application. In order to use drag & drop inside your application, for objects that reside in it, you have to use RadDragAndDropManager. Please refer to the demo project Iva sent you on how to use it. It is implemented by registering query methods, as in the demo:

RadDragAndDropManager.AddDragQueryHandler(radTreeView, OnDragQuery);
RadDragAndDropManager.AddDropQueryHandler(radRichTextBox, OnDropQuery);
RadDragAndDropManager.AddDragInfoHandler(radTreeView, OnDragInfo);
RadDragAndDropManager.AddDropInfoHandler(radRichTextBox, OnDropInfo);

Kind regards,
Ivailo
the Telerik team

[Angeli]

Hi Ivailo. Thanks for responding.

I already got the idea behind the lines of code you sent. My problem now is translating the dropped image coming from a listbox into the RadRichTextBox. The example Iva sent was dropping an external image onto the richtextbox. I understand that this line of code below is for dropping the TreeViewItem onto the richtext box and transforming it to string.

Span span = new Span(((RadTreeViewItem)e.Options.Payload).Header.ToString());
rrtb.Document.InsertInline(span);

 
I'm now having difficulty in doing it with an image since the given example was a text.

if (e.Options.Source is Image)
{
    Image draggedImg = e.Options.Source as Image;

/*
    Section section = new Section();
    Paragraph paragraph = new Paragraph();
    Stream stream = Application.GetResourceStream( new Uri(@"/DragAndDrop;component/images/image_1.png", UriKind.RelativeOrAbsolute ) ).Stream;
    Size size = new Size( 236, 50 );
    ImageInline image = new ImageInline( stream, size, "png" );
    paragraph.Inlines.Add( image);
    section.Children.Add( paragraph );
    rrtb.Document.Sections.Add(section);
*/
}

The commented part I got from http://www.telerik.com/help/silverlight/radrichtextbox-features-layout-elements-inlineimage.html which enables the user to attach an image to the document.

I don't know how to go about with DragDropQueryEventArgs e. I hope you can help me.

[Angeli]

should I use e.Options.Payload or e.Options.Source?

I tried putting an indicator to identify the dragged element as an image by showing a message box once the image was dragged but nothing shows unlike the treeview which displays a message that it was a treeviewitem that was dragged.

I hope to hear from you soon.

[Iva Toteva]

Hello Angeli,

e.Options.Source is the RadTreeViewItem that is being dragged.
e.Opions.Payload is the value that you wish to transfer between controls.

For example, if you have a TreeView that has headers, which can be dragged and dropped and pasted as text, as well as Images you wish to have inserted in the document, you can do that in the following way:

private void OnDragQuery(object sender, DragDropQueryEventArgs e)
{
    RadTreeViewItem treeViewItem = e.Options.Source as RadTreeViewItem;
    if (e.Options.Status == DragStatus.DragQuery)
    {
        e.Options.Payload = treeViewItem.Item;
        if (treeViewItem.Item is EditableHeaderedItemsControl) //You cannot have images as DragCues
        {
            TextBlock block = new TextBlock()
            {
                Text = treeViewItem.Header.ToString()
            };
            e.Options.DragCue = block;
        }
    }
    e.Handled = true;
    e.QueryResult = true;
}

And then, in the OnDropInfo method:

private void OnDropInfo(object sender, DragDropEventArgs e)
{
   // Add a marker to be shown while draggin if you like, as shown in the demo
   if (e.Options.Status == DragStatus.DropComplete)
    {
        RadRichTextBox rrtb = e.Options.Destination as RadRichTextBox;
        Point viewPoint = e.Options.RelativeDragPoint;
        DocumentPosition pos = rrtb.ActiveEditorPresenter.GetDocumentPositionFromViewPoint(viewPoint);
        rrtb.Document.CaretPosition.MoveToPosition(pos);
        if (e.Options.Payload is Image)
        {
            Image payload = e.Options.Payload as Image;
            rrtb.InsertInline(new ImageInline(new WriteableBitmap(payload.Source as BitmapSource)));
        }
        else
        {
            Span span = new Span(((RadTreeViewItem)e.Options.Payload).Header.ToString());
            rrtb.Document.InsertInline(span);
        }
    }
}

I hope that helps.

All the best,
Iva
the Telerik team

[Angeli]

Thanks for clearing that up Iva. To think I have to add only 2 lines of code compared to the ones I wrote. Thanks!