Search code examples
c#windows-store-appswin-universal-app

How can I customize the view shown during drag and drop?


I have drag and drop setup on my UWP app, and I'd like to customize the view that the user drags. Currently it's the exact same as the ListViewItem, but that has a Border(providing a background and rounded edges) I don't want to show in the dragging view.

It's just a simple CanDragItems and AllowDrop with DragItemsStarting, DragEnter and Drop events hooked.

Is there a way to do this?


Solution

  • but that has a Border(providing a background and rounded edges) I don't want to show in the dragging view.

    To remove the Bolder of the ListviewItem, you don't need to custom the dragging view, you can just set the Bolder element's child element to CanDrag, after setting the CanDrag property for the Bolder child element such as TextBlock, you will not see the Bolder effects when dragging the item. Code example as follows:

        <ListView x:Name="SourceListView"
                  Header="SourceListView"
                  SelectionMode="Extended">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border Background="Pink"
                            BorderBrush="Gray"
                            BorderThickness="2"
                            CornerRadius="10">
                        <TextBlock Text="{Binding text}"  DragStarting="TextBlock_DragStarting" CanDrag="True"  />
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    

    I'd like to customize the view that the user drags.

    If you still want to custom your drag UI,there is an existing class DragUIOverride you can directly use for custom your Drag view. For example you don't want to show the arrow in the drag view, you can set the IsGlyphVisible property in the DragOver event like this:

     private void cnvDrop_DragOver(object sender, DragEventArgs e)
     {           
        e.DragUIOverride.IsGlyphVisible = false;
     }
    

    And the offical sample is XamlDragAndDrop, the scenario2 shows details about DragUI's customization.