Customizing the DragVisual

By default the drag-drop behaviors will not display drag visual, only the mouse cursor will change according the allowed drag-drop effects in the current moment. To create custom drag visuals the ListBoxDragDrop behavior should receive an instance of a IDragVisualProvider interface implementation.

Follows an example demonstrating how to use the default implementations of the IDragVisualProvider interface:

<ListBox Margin="20" ItemsSource="{Binding CustomersSource}"  
    ItemContainerStyle="{StaticResource DraggableListBoxItem}"> 
        <drag:ListBoxDragDropBehavior /> 
        <drag:ScreenshotDragVisualProvider /> 
Now to customize it, you have to create a custom DragVisualProvider, and use it instead:

public class DragVisualProvider : DependencyObject, IDragVisualProvider 
    public DataTemplate DraggedItemTemplate 
            return (DataTemplate)GetValue(DraggedItemTemplateProperty); 
            SetValue(DraggedItemTemplateProperty, value); 
    public static readonly DependencyProperty DraggedItemTemplateProperty = 
    DependencyProperty.Register("DraggedItemTemplate", typeof(DataTemplate), typeof(DragVisualProvider), new PropertyMetadata(null)); 
    public FrameworkElement CreateDragVisual(DragVisualProviderState state) 
        var visual = new DragVisual(); 
        var theme = StyleManager.GetTheme(state.Host); 
        if (theme != null) 
            StyleManager.SetTheme(visual, theme); 
        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; } 
Here is the result:

dragdropmanager customizingdragvisual

In this article
Not finding the help you need? Improve this article