UWP:- How to create drag UI (indicating where the items are to be dropped) while dragging items?

user_10495296 0
Viewed 446

I'm trying to create a drag UI of something like in the below screenshot. If I set AllowDrop in my listview to "true", it automatically opens up spaces to give room for the dragged items to drop. But, I'm more keen on giving a UI indicating stating "drop here" instead of spaces.

How can I create of something like in the below with placeholders indication when I move over the dragged item?

Any thoughts?

enter image description here

enter image description here

enter image description here

uwp xaml c#
1 Answers

How can I create of something like in the below with placeholders indication when I move over the dragged item?

For your requirement, you could use ListView Footer to realize this feature, and process Footer Collapsed property in the DragOver and Drop event handler. Please refer the following code.

private  void TargetListView_DragOver(object sender, DragEventArgs e)
{
    // Our list only accepts text
    e.AcceptedOperation = (e.DataView.Contains(StandardDataFormats.Text)) ? DataPackageOperation.Copy : DataPackageOperation.None;
    VisualStateManager.GoToState(this, "Inside", true);
}


private async void TargetListView_Drop(object sender, DragEventArgs e)
{

    if (e.DataView.Contains(StandardDataFormats.Text))
    {

        var def = e.GetDeferral();
        var s = await e.DataView.GetTextAsync();
        var items = s.Split('\n');
        foreach (var item in items)
        {
            _selection.Add(item);
        }
        e.AcceptedOperation = DataPackageOperation.Copy;
        VisualStateManager.GoToState(this, "Outside", true);
        def.Complete();
    }
}

Xaml

<ListView
    x:Name="TargetListView"
    Grid.Row="2"
    Grid.Column="1"
    Margin="8,4"
    AllowDrop="True"
    CanDragItems="True"
    CanReorderItems="True"
    DragItemsCompleted="TargetListView_DragItemsCompleted"
    DragItemsStarting="TargetListView_DragItemsStarting"
    DragOver="TargetListView_DragOver"
    Drop="TargetListView_Drop"
    >
    <ListView.Footer>
        <Border Background="DarkGray" Opacity="0.8">
            <TextBlock
                x:Name="Footer"
                Height="44"
                Margin="0,0,0,0"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                FontSize="25"
                Text="Please Place your item"
                TextAlignment="Center"
                Visibility="Collapsed"
                />
        </Border>
    </ListView.Footer>
</ListView>


<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="DragDropGroup">
        <VisualState x:Name="Outside" />
        <VisualState x:Name="Inside">
            <VisualState.Setters>
                <Setter Target="Footer.Visibility" Value="Visible" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Op posted uservoice below, if anyone think this helpful please vote it up.

Allowing custom air drop UI while dragging items of a ListView

user_72547810
Related