This is a migrated thread and some comments may be shown as answers.

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

11 Answers 624 Views

DragAndDrop

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

11 Answers, 1 is accepted

answered on 03 Jun 2011, 11:28 AM

TreeViewDnDStyle.zip

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 26 Jun 2012, 07:48 PM

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

answered on 29 Jun 2012, 02:16 PM

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