Skip to content

Latest commit

 

History

History
65 lines (48 loc) · 2.63 KB

drag-and-drop-framework-set-custom-cursors-for-different-drag-and-drop-situations.adoc

File metadata and controls

65 lines (48 loc) · 2.63 KB
Raw

Set Custom Cursors for Different Drag and Drop Situations

Before You Begin

You can override the default cursors that are used when you end users perform actions within the drag and drop framework. The following cursor templates are available.

Assumptions:

This topic assumes that you already have drag and drop functionality implemented on your page. For more information, see the Getting Started with Infragistics Drag and Drop Framework topic.

What You Will Accomplish

After completing the steps in this walkthrough, you will have customized MoveCursorTemplate and DropNotAllowedCursorTemplate. You can modify cursor templates to achieve better user experience and indicate clearly in what state the dragged element is.

Follow these Steps

  1. Set a DragSource object’s MoveCursorTemplate and DropNotAllowedCursorTemplate. Green and red colored ellipse indicates if the dragged element is over a valid drop target.

In XAML:

<ig:DragDropManager.DragSource>
    <ig:DragSource IsDraggable="True"  DragChannels="ChannelA"
        Drop="DragSource_Drop" >
        <ig:DragSource.MoveCursorTemplate>
            <DataTemplate>
                <Ellipse Fill="Green" Width="50" Height="50" />
            </DataTemplate>
        </ig:DragSource.MoveCursorTemplate>
        <ig:DragSource.DropNotAllowedCursorTemplate>
            <DataTemplate>
                <Ellipse Fill="Red" Width="50" Height="50" />
            </DataTemplate>
        </ig:DragSource.DropNotAllowedCursorTemplate>
    </ig:DragSource>
 </ig:DragDropManager.DragSource>

  1. Save and run your application.