How do I change the Drag and Drop orange background color and also separation orange line in the RadTreeView Style

[Debranjan]

How do I change the Drag and Drop orange background color and also separation orange line in the RadTreeView Style.

I also give my attach comp file.


thanks
debu

[Tina Stancheva]

Hi Debranjan,

In order to change the drag/drop separation orange line, you need to edit the default ControlTemplate of the RadTreeView control. You can find more info about editing ControlTemplates in Blend here. In the RadTreeView ControlTemplate there is a DragBetweenItemsFeedback Grid that defines the separation orange border. You can edit this element definition. If you only need to change its background color, you will need to change the DragBetweenItemsFeedback_BackgroundBrush resource.

In order to change the orange background color of the DragCue that is displayed when dragging a RadTreeViewItem, you will need to edit the default ControlTemplate of the TreeViewDragCue control. This is the control that is used to display a DragCue during drag/drop operation in the RadTreeView.

I attached a sample project to get you started. I only changed the DragBetweenItemsFeedback element background as well as the TreeViewDragCue Background and BorderBrush colors and I placed comments on the brushes that I changed so that you can more easily follow the changes. I hope that will help you.

All the best,
Tina Stancheva
the Telerik team

[Trang]

How to make this background change in ListBox?  I'm still using the old version.  I don't have DragDropListBox.  Thank you in advance for any response.

[Lancelot]

Hi Trang,

In order to change the background of a RadListBox, you'll need to set it via the style. Since you didn't' include which version you are using, we can take the safe route and edit a copy of the template instead of directly setting only the background property.

To do this, open your project in Expression Blend. Locate the RadListbox you want to alter the background color of. Right click on it, then select Edit Template > Edit a copy.

Once the new visual tree loads, expand the tree until you see the element you want to change. (If it were me, I would just use the root grid element). Select the element and then look over at the properties pane, there will be a background property above the color picker. Select it. Then apply the color/gradient/image you want the background to be.

Thats it, when you're done you can back out to the main visual tree. If you actually are looking to alter the ItemsTemplate background, it is the same process except you'd be using the Edit Other Template > Edit ItemsTemplate > Edit a copy instead.

I hope this clears things up for you, if you are having trouble please let me know. Tell what version of the controls you are using and include the xaml of the listbox in question.

Good Luck,
Lancelot

[Trang]

I don't have RadListBox.  I implemented the Drag & Drop as suggested on the site http://www.telerik.com/help/silverlight/raddraganddrop-getting-started-with-drag-and-drop.html, The code works great.  The only issue is the DragCue.  I want to remove the yellow background and make it transparent.  I don't know where to change.  The tutorial show how to change the ArrowCue but not the DragCue.  Is there anyway to apply different style to the DragCue.  FYI, I'm not using RadListBox. 

Thank you and appriciated.

Trang

[Lancelot]

Hi Trang,

This link will bring you to a demo on how to change the drag cue. It even uses a regular listbox in the example.

Good Luck,
Lancelot

[Trang]

Thank you for replying.  I don't have this option AddDragInitializeHandler.  Can I use either

AddDragInfoHandler?

Please advise,

Thanks

[Lancelot]

Hi Debranjan,

AddDragInitializeHandler is not part of the API, you create it yourself on the same page. If you look further down into the demo, it will show you how to create that handler. This is what the event looks like:

private void OnDragInitialize(object sender, DragInitializeEventArgs args)
{
       args.Data = ((FrameworkElement)args.Source).DataContext;
       args.DragVisual = new ContentControl { ContentTemplate = LayoutRoot.Resources["ItemTemplate"] as DataTemplate, Content = args.Data };

       args.AllowedEffects = DragDropEffects.All;
}

If you go to this example, you'll see how the DragCue is now directly affected by the item it is being dragged from. To see the code used to achieve this, just toggle the "Example/Code" button on the top right.

Before I finish this reply, I should inform you that the RadDragAndDrop manager is being phased out. You should start using the newer DragDropManager control instead. It is much more flexible and more powerful. 

Good Luck,
Lancelot

[Trang]

Thank you,  I did the upgrade and everything works perfectly.

-Trang

[Lancelot]

Trang,

Great! I'm glad to hear it worked out for you. could you please mark the post that helped as "Answer"? That would help anyone else who is searching for a solution to find it quickly. 

If you have any other questions, don't hesitate to start a new thread.

Lancelot

[Trang]

Hi Lancelot,

The listbox has a vertical scrollbar, it does not auto scroll.  Right now is is very unsuable.  Is there any configuration that I can set for autoscrolling?  FYI, this is done on childwindow.  Please advice and thank you for all your help.

Trang

[Nick]

Hi Trang,

Unfortunately, unlike the RadDragAndDropManager, the DragDropManager does not come with the auto scroll behavior out of the box. However it can be implemented quite easily. You can see a sample implementation in this thread.

Let me know if this will work in your case. 

Regards,
Nik
the Telerik team