New to Telerik UI for WPF? Download free 30-day trial

Customizing the DragVisual

This article demonstrates how to create a custom drag visual element for the DragDropBehavior by implementing the IDragVisualProvider interface.

The interface exposes the following members.

  • UseDefaultCursors: A property that determines whether the drag/drop effects will change the mouse cursor or not.
  • CreateDragVisual: A method that receives information about the dragged items and returns a FrameworkElement used as the drag visual.
  • GetDragVisualOffset: A method that receives information about the dragged items and returns the drag visual offset relative to the mouse position, as a Point structure.

Implementing IDragVisualProvider

This section shows how to create a custom drag visual provider that allows you to define a custom DataTemplate and use it with any DragDropBehavior implementation.

Example 1: Creating a custom drag visual provider

public class CustomDragVisualProvider : DependencyObject, IDragVisualProvider 
    public static readonly DependencyProperty DraggedItemTemplateProperty = 
        new PropertyMetadata(null)); 
    public DataTemplate DraggedItemTemplate 
        get { return (DataTemplate)GetValue(DraggedItemTemplateProperty); } 
        set { SetValue(DraggedItemTemplateProperty, value); } 
    public FrameworkElement CreateDragVisual(DragVisualProviderState state) 
        var visual = new DragVisual(); 
        visual.Content = state.DraggedItems.OfType<object>().FirstOrDefault(); 
        visual.ContentTemplate = this.DraggedItemTemplate; 
        return visual; 
    public Point GetDragVisualOffset(DragVisualProviderState state) 
        return state.RelativeStartPoint; 
    public bool UseDefaultCursors { get; set; } 

This approach is applicable for all controls that use a DragDropBehavior. For example, ScheduleViewDragDropBehavior, or a custom implementation of the DragDropBehavior class.

Using the Custom Drag Visual Provider

This section shows how to setup a ListBoxDragDropBehavior that will use the custom drag visual provider implemented in the previous section.

Example 2: Using the custom drag visual provider

<ListBox ItemsSource="{Binding MyItems}" DisplayMemberPath="Name"> 
        <Style TargetType="ListBoxItem"> 
            <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" /> 
        <telerik:ListBoxDragDropBehavior /> 
                    <TextBlock Text="{Binding Name}" Background="#823DBF" Padding="15" Foreground="White"/> 

Figure 1: Custom drag visual provider

dragdropmanager customizingdragvisual

In this article